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Acapa 


O animal que aparece na capa da 6 a edi^ao deste livro e um rinoceronte de Java. Todas as cinco es¬ 
pecies de rinoceronte sao conhecidas por seu enorme tamanho, couro espesso como uma armadura, 
pes com tres dedos e um ou dois chifres no focinho. O rinoceronte de Java, junto com o rinoceronte 
de Sumatra, e uma das duas especies que vivem em florestas. Ele tern aparencia semelhante ao rino¬ 
ceronte indiano, mas e menor e possui certas caracteristicas diferenciadas (principalmente a textura 
da pele). 

Os rinocerontes sao frequentemente retratados em pe, com seus focinhos na agua ou na lama. Na 
verdade, muitas vezes eles podem ser encontrados exatamente assim. Quando nao estao repousando 
em um rio, os rinocerontes cavam buracos profimdos para chafurdar. Esses dois locais de descanso 
oferecem duas vantagens. Primeiramente, aliviam o animal do calor tropical e oferecem uma pro- 
te^ao contra moscas sugadoras de sangue. (O lodo que o chafurdar deixa na pele do rinoceronte 
tambem oferece certa prote^ao contra moscas.) Segundo, a lama e a agua do rio ajudam a suportar o 
peso consideravel desses animais enormes, aliviando o peso sobre suas pernas e costas. 

O folclore ha muito tempo diz que o chifre do rinoceronte possui poderes magicos e afrodisiacos, 
e que os seres humanos, ao conquistarem os chifres, tambem obtem esses poderes. Esse e um dos 
motivos pelos quais os rinocerontes sao alvos de ca^adores. Todas as especies de rinoceronte estao em 
perigo, e a popula^ao de rinocerontes de Java e a que esta em estado mais precario. Existem menos 
de 100 desses animais. Houve um tempo em que os rinocerontes de Java podiam ser encontrados 
por todo o sudeste asiatico, mas agora acredita-se que so existam na Indonesia e no Vietna. 

A ilustra?ao da capa e uma gravura do Dover Pictorial Archive do seculo XIX. A fonte usada na 
capa e Adobe ITC Garamond. A fonte do texto e Adobe Garamond Pro, a dos tftulos e Myriad Pro 
Condensed e a do codigo e TheSansMono. 
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Prefacio 


Este livro abrange a linguagem JavaScript e as APIs JavaScript implementadas pelos navegadores 
Web. Eu o escrevi para os leitores com pelo menos alguma experiencia previa em programa^ao 
que queiram aprender JavaScript e tambem para programadores que ja utilizam JavaScript, mas 
querem aumentar seu conhecimento e realmente dominar a linguagem e a plataforma Web. Meu 
objetivo com este livro e documentar de forma ampla e definitiva a linguagem e a plataforma Java¬ 
Script. Como resultado, ele e grande e detalhado. Contudo, espero que sua leitura cuidadosa seja 
recompensadora e que o tempo investido nela seja facilmente recuperado em forma de uma maior 
produtividade ao programar. 

Este livro esta dividido em quatro partes. A Parte I abrange a linguagem JavaScript em si. A Parte II 
abrange JavaScript do lado do cliente: as APIs JavaScript definidas por HTML5 e padroes relaciona- 
dos e implementados pelos navegadores Web. A Parte III e a se^ao de referenda da linguagem basica 
e a Parte IV e a referenda para JavaScript do lado do cliente. O Capitulo 1 inclui um esbo^o dos 
capftulos das partes I e II (consulte a Se^ao 1.1). 

Esta 6 a edi^ao do livro abrange ECMAScript 5 (a versao mais recente da linguagem basica) e 
HTML5 (a versao mais recente da plataforma Web). Voce vai encontrar material sobre ECMAScript 
5 ao longo de toda a Parte I. O material novo sobre HTML5 aparece principalmente nos capftulos 
do final da Parte II, mas tambem em alguns outros capftulos. Os capftulos totalmente novos desta 
ediqao sao: Capftulo 11, Subconjuntos e extensoes de JavaScript, Capftulo 12, JavaScript do lado do 
servidor, Capftulo 19, A bibliotecajQuery, e Capftulo 22, APIs de HTML5. 

Os leitores das versoes anteriores poderao notar que reescrevi completamente muitos dos capftulos 
para a 6 a edi^ao deste livro. O niicleo da Parte I - os capftulos que abordam objetos, arrays, funijoes 
e classes - e totalmente novo e torna o livro compatfvel com os estilos e as melhores praticas de pro- 
grama?ao atuais. Da mesma forma, os principals capftulos da Parte II, como aqueles que abordam 
documentos e eventos, foram completamente atualizados. 
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Um lembrete sobre pirataria 

Caso esteja lendo a versao digital deste livro pela qual voce (ou sua empresa) nao pagou (ou pegou em- 
prestado de alguem que nao pagou), entao provavelmente tem um exemplar pirateado ilegalmente. Es- 
crever a 6 a edigao deste livro foi um trabalho de tempo integral e me ocupou mais de um ano. A unica 
maneira pela qual sou pago por esse tempo e quando os leitores compram o livro. E a unica maneira de 
poder arcar com as despesas de uma 7 a edigao e receber pela 6 a . 

Eu nao tolero pirataria, mas se voce tem um exemplar pirateado, va em frente e leia alguns capitulos. 
Penso que voce vai considerar este livro uma fonte de informagoes valiosa sobre JavaScript, mais bem or- 
ganizada e de qualidade mais alta do que o material que podera encontrar gratuitamente (e legalmente) 
na Web. Se concordar que esta e uma fonte valiosa de informagoes, entao, por favor, pague o prego de 
aquisigao de um exemplar legal (digital ou impresso) do livro. Por outro lado, se achar que este livro nao 
vale mais do que as informagoes gratuitas da Web, entao desfaga-se de seu exemplar pirateado e use as 
fontes de informagao gratuitas. 


Convenes usadas neste livro 

Utilizo as seguintes convengoes tipograficas neste livro: 

Italico 

Utilizado para dar enfase e para indicar o primeiro uso de um termo. Italico tambem e usado 
para enderegos de email, URLs e nomes de arquivo. 

Largura constante 

Utilizada em todo codigo JavaScript, listagens CSS e HTML, e de modo geral para tudo que 
seria digitado literalmente ao se programar. 

Italico de largura constante 

Utilizado para nomes de parametros de fungao e de modo geral como espago reservado para 
indicar um item que deve ser substituido por um valor real em seu programa. 

Exemplo de codigo 

Os exemplos deste livro estao disponfveis online. Voce pode encontra-los na pagina do livro, no site 
da editora: 

http://www. bookman, com. br 

Este livro esta aqui para ajuda-lo em seu trabalho. De maneira geral, voce pode usar os codigos 
em seus programas e documentagao. Nao e precise entrar em contato com a editora para pedir 
permissao, a nao ser que esteja reproduzindo uma parte significativa de codigo. Por exemplo, 
nao e necessario permissao para escrever um programa que utilize varies trechos de codigo deste 
livro. Vender ou distribuir um CD-ROM com exemplos exige permissao. Responder a uma per- 
gunta mencionando este livro e citando um exemplo de codigo nao exige permissao. Incorpo- 
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rar um volume significative de codigo de exemplo deste livro na documentafao de seu produto 
exige permissao. 

Se voce utilizar codigo deste livro, eu apreciaria (mas nao exijo) a referenda. Uma referenda normal- 
mente inclui ti'tulo, autor, editora e ISBN. Por exemplo: “JavaScript: O Guia Definitivo, de David 
Flanagan (Bookman). Copyright 2011 David Flanagan, 978-85-65837-19-4”. 

Para mais detalhes sobre a polftica de reutiliza?ao de codigo da editora, consulte http://oreilly.com/ 
publaloreillylaskjtiml2001lcodepolicy.html (em ingles). Se voce achar que o uso dos exemplos nao se 
enquadra na permissao dada aqui, entre em contato com a editora pelo enderefo permission@oreilly. 


Errata e como entrar em contato* 

A editora O’Reilly mantem uma lista piiblica dos erros encontrados neste livro (em ingles). Voce 
pode ver a lista e apresentar os erros que encontrar visitando a pagina do livro: 

http://oreilly.com/catalog/97805%805531 
Para fazer comentarios ou perguntas tecnicas sobre este livro, envie email para: 
hookquestions@oreilly. com 
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CapItulo 1 

Introdu^ao a JavaScript 


JavaScript e a linguagem de programa^ao da Web. A ampla maioria dos sites modernos usa 
JavaScript e todos os navegadores modernos - em computadores de mesa, consoles de jogos, tablets 
e smartphones - incluem interpretadores JavaScript, tornando-a a linguagem de programa^ao mais 
onipresente da historia. JavaScript faz parte da triade de tecnologias que todos os desenvolvedores 
Web devem conhecer: HTML, para especificar o conteudo de paginas Web; CSS, para especificar 
a apresenta^ao dessas paginas; e JavaScript, para especificar o comportamento delas. Este livro o 
ajudara a dominar a linguagem. 

Se voce ja conhece outras linguagens de programa^ao, talvez ajude saber que JavaScript e uma lin¬ 
guagem de alto rn'vel, dinamica, interpretada e nao tipada, conveniente para estilos de programa^ao 
orientados a objetos e fimcionais. A sintaxe de JavaScript e derivada da linguagem Java, das fimfoes 
de primeira classe de Scheme e da heranfa baseada em prototipos de Self. Mas nao e preciso co¬ 
nhecer essas linguagens nem estar familiarizado com esses termos para utilizar este livro e aprender 
JavaScript. 

Na verdade, o nome “JavaScript” e um pouco enganoso. A nao ser pela semelhanija sintatica superfi¬ 
cial, JavaScript e completamente diferente da linguagem de programa^ao Java. E JavaScript ja deixou 
para tras suas raizes como linguagem de script ha muito tempo, tornando-se uma linguagem de uso 
geral robusta e eficiente. A versao mais recente da linguagem (veja o quadro) define novos recursos 
para desenvolvimento de software em grande escala. 



2 Capftulo 1 Introdugao a JavaScript 


JavaScript: nomes e versoes 

JavaScript foi criada na Netscape na fase inicial da Web e, tecnicamente, "JavaScript" e marca registra- 
da, licenciada pela Sun Microsystems (agora Oracle), usada para descrever a implementagao da lingua- 
gem pelo Netscape (agora Mozilla). A Netscape enviou a linguagem para a ECMA - European Computer 
Manufacturer's Association - para padronizagao e, devido a questoes relacionadas a marca registrada, 
a versao padronizada manteve o nome estranho"ECMAScript". Pelos mesmos motivos ligados a marca 
registrada, a versao da Microsoft da linguagem e formalmente conhecida como"JScript". Na pratica, quase 
todo mundo chama a linguagem de JavaScript. Este livro usa o nome"ECMAScript"apenas para se referir 
ao padrao da linguagem. 

Na ultima decada, todos os navegadores Web implementaram a versao 3 do padrao ECMAScript e nao 
havia necessidade de se pensar em numeros de versao: o padrao da linguagem era estavel e as im- 
plementagoes dos navegadores eram, na maioria, interoperaveis. Recentemente, uma importante nova 
versao da linguagem foi definida como ECMAScript versao 5 e, quando este livro estava sendo produ- 
zido, os navegadores estavam comegando a implementa-la. Este livro aborda todos os novos recursos 
da ECMAScript 5, assim como todos os recursos consagrados da ECMAScript 3. As vezes, voce vai ver 
essas versoes da linguagem abreviadas como ES3 e ES5, assim como as vezes vai ver o nome JavaScript 
abreviado como JS. 

Quando falamos da linguagem em si, os unicos numeros de versao relevantes sao ECMAScript versoes 3 
ou 5. (A versao 4 da ECMAScript esteve em desenvolvimento por anos, mas se mostrou ambiciosa demais 
e nunca foi langada.) Contudo, as vezes voce tambem vai ver urn numero de versao de JavaScript, como 
JavaScript 1.5 ou JavaScript 1.8. Esses sao numeros da versao do Mozilla: a versao 1.5 e basicamente a 
ECMAScript 3 e as versoes posteriores incluem extensoes nao padronizadas da linguagem (consulte o 
Capitulo 11). Por fim, tambem existem numeros de versao vinculados a interpretadores ou "engines" de 
JavaScript especificos. 0 Google chama seu interpretador JavaScript de V8, por exemplo, e quando este 
livro estava sendo produzido a versao corrente do mecanismo V8 era a 3.0. 


Para ser util, toda linguagem deve ter ou uma plataforma, ou biblioteca padrao, ou API de fungoes 
para fazer coisas como entrada e saida basicas. A linguagem JavaScript basica define uma API mi¬ 
nima para trabalhar com texto, arrays, datas e expressoes regulares, mas nao inclui funcionalidade 
alguma de entrada ou saida. Entrada e saida (assim como recursos mais sofisticados, como conexao 
em rede, armazenamento e graficos) sao responsabilidade do “ambiente hospedeiro” dentro do qual 
JavaScript esta incorporada. Normalmente, esse ambiente hospedeiro e um navegador Web (apesar 
de que iremos ver duas utilizagoes de JavaScript sem um navegador Web, no Capitulo 12). A Parte I 
deste livro aborda a linguagem em si e sua API interna minima. A Parte II explica como JavaScript e 
usada em navegadores Web e aborda as amplas APIs baseadas em navegador, geralmente conhecidas 
como “JavaScript do lado do cliente”. 

A Parte III e a segao de referenda da API basica. Voce pode ler sobre a API de manipulagao de arrays 
de JavaScript procurando por “Array” nessa parte do livro, por exemplo. A Parte IV e a segao de re- 
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ferencia de JavaScript do lado do cliente. Voce pode procurar por “Canvas” nessa parte do livro para 
ler sobre a API grafica definida pelo elemento <canvas> de HTML5, por exemplo. 

Este livro abrange inicialmente os fundamentos de nivel mais baixo e depois os amplia para abs- 
tragoes mais avangadas e de nivel mais alto. Os capitulos se destinam a serem lidos mais ou menos 
em ordem. Porem, aprender uma nova linguagem de programagao nunca e um processo linear, e a 
descrigao de uma linguagem tambem nao e linear: cada recurso da linguagem se relaciona a outros 
recursos e este livro esta repleto de referencias cruzadas - as vezes para tras e as vezes a frente do ma¬ 
terial que voce ainda nao leu. Este capitulo faz um giro rapido pela linguagem basica e pela API do 
lado do cliente, apresentando recursos importantes que tornarao mais facil entender o tratamento 
aprofundado dos capitulos seguintes. 


Explorando JavaScript 

Ao se aprender uma nova linguagem de programagao e importante testar os exemplos do livro e, entao, 
modifica-los e testa-los novamente para avaliar seu entendimento da linguagem. Para isso, voce precisa 
de um interpretador de JavaScript. Felizmente, todo navegadorWeb contem um interpretador de Java¬ 
Script e, se voce esta lendo este livro, provavelmente ja tern mais de um navegadorWeb instalado em 
seu computador. 

Ainda neste capitulo, vamos ver que e possivel incorporar codigo JavaScript entre marcas <script> em 
arquivos HTML e, quando o navegador carregar o arquivo, vai executar o codigo. Felizmente, contudo, nao 
e preciso fazer isso sempre que voce quiser testar trechos simples de codigo JavaScript. Impulsionados 
pela poderosa e inovadora extensao Firebug do Firefox (ilustrada na Figura 1-1 e dispomvel para down¬ 
load no enderego http://getfirebug.com/), todos os navegadores Web atuais contem ferramentas para 
desenvolvedores Web que sao indispensaveis para depuragao, experimentagao e aprendizado. Normal- 
mente, essas ferramentas podem ser encontradas no menu Ferramentas do navegador, sob nomes como 
"Desenvolvedor Web" ou "Console da Web". (0 Firefox contem um "Console da Web" interno, mas quando 
este livro estava sendo produzido, a extensao Firebug era melhor.) Frequentemente, e possivel ativar um 
console com um toque de tecla, como FI 2 ou Ctrl-Shift-J. Muitas vezes, essas ferramentas de console apa- 
recem como paineis na parte superior ou inferior da janela do navegador, mas alguns permitem abri-las 
como janelas separadas (conforme ilustrado na Figura 1-1), o que costuma ser bastante conveniente. 

Um painel ou janela tipica de "ferramentas para o desenvolvedor" contem varias guias que permitem ins- 
pecionar coisas como a estrutura de documentos HTML, estilos CSS, pedidos da rede, etc. Uma das guias 
e um "console JavaScript"que permite digitar linhas de codigo JavaScript e testa-las. Essa e uma maneira 
especialmente facil de estudar JavaScript e recomendo que voce a utilize ao ler este livro. 

Existe uma API de console simples, implementada de forma portavel pelos navegadores modernos. Voce 
pode usar a fungao console. log() para exibir texto na console. Isso muitas vezes e surpreendentemente 
util ao se fazer depuragao, sendo que alguns exemplos deste livro (mesmo na segao de linguagem basica) 
utilizam console.log() para produzir saida simples. Uma maneira semelhante, porem mais invasiva, de 
exibir saida ou mensagens de depuragao e passar uma string de texto para a fungao alert (), a qual as 
exibe em uma caixa de dialogo modal. 
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Figura 1-1 Console de depuragao Firebug do Firefox. 


1.1 JavaScript basica 

Esta segao faz um giro pela linguagem JavaScript e tambem pela Parte I deste livro. Apos este capftu- 
lo introdutorio, entraremos no nivel mais baixo de JavaScript: o Capftulo 2, Estrutura lexica, explica 
coisas como comentarios em JavaScript, pontos e vfrgulas e o conjunto de caracteres Unicode. O 
Capftulo 3, Tipos, valores e variaveis, comega a ficar mais interessante: ele explica as variaveis de Java¬ 
Script e os valores que podem ser atribufdos a elas. Aqui esta um exemplo de codigo para ilustrar os 
destaques desses dois capftulos: 

// Tudo que vem apos barras normais duplas e um comentario em linguagem natural. 

// Leia os comentarios atentamente: eles explicam o codigo JavaScript. 

// variavel e um nome simbolico para um valor. 

//As variaveis sao declaradas com a palavra-chave var: 

var x; // Declara uma variavel chamada x. 

// Valores podem ser atribuidos as variaveis com o sinal = 
x = 0; // Agora a variavel x tern o valor 0 

x // => 0: Uma variavel e avaliada com seu valor. 


// JavaScript aceita varios tipos de valores 
x = l; // Numeros. 

x = 0.01; // Apenas um tipo Number para inteiros e 

x = "hello world"; // Strings de texto entre aspas. 

x = 'JavaScript'; // Apostrofos tambem delimitam strings, 

x = true; // Valores booleanos. 

x = false; // 0 outro valor booleano. 
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x = null; // Null e urn valor especial que significa "nenhum valor", 

x = undefined; // Undefined e como null. 

Dois outros tipos muito importantes que programas em JavaScript podem manipular sao objetos e 
arrays. Esses sao os temas do Capitulo 6, Objetos, e do Capitulo 7, Arrays, mas sao tao importantes 
que voce vai ve-los muitas vezes antes de chegar a esses capitulos. 

// 0 tipo de dados mais importante de JavaScript e o objeto. 

// Um objeto e uma coleqao de pares nome/valor ou uma string para mapa de valores. 
var book = { // Objetos sao colocados entre chaves. 

topic: ''JavaScript”, // A propriedade "topic" tern o valor "JavaScript". 

fat: true // A propriedade "fat" tem o valor true. 

}; //A chave marca o fim do objeto. 

// Acesse as propriedades de um objeto com . ou []: 
book.topic // => "JavaScript" 

book["fat"] // => true: outro modo de acessar valores de propriedade. 

book.author = "Flanagan"; // Crie novas propriedades por meio de atribuiqao. 
book.contents = {}; // {} e um objeto vazio sem qualquer propriedade. 


// JavaScript tambem aceita arrays (listas indexadas numericamente) de valores. 
r primes = [2, 3, 5, 7]J // Um array de 4 valores, delimitados com [ e ]. 


primes[0] 
primes.lenght 
primes[primes.lenght-l] 
primes[4] = 9; 
primes[4] = 11; 
var empty = []; 
empty.lenght 


// => 2: o primeiro elemento (indice 0) do array. 

// => 4: quantidade de elementos no array. 

// => 7: o ultimo elemento do array. 

// Adiciona um novo elemento por meio de atribuicao. 

// Ou altera um elemento existente por meio de atribuicac 
// [] e um array vazio, sem qualquer elemento. 

// => 0 


// Os arrays e objetos podem conter outros arrays e objetos: 
var points = [ // Um array com 2 elementos. 

{x:0, y:0}, // Cada elemento e um objeto. 

{x:l, y:1} 

]; 

var data = { // Um objeto com 2 propriedades 

triall: [[ 1 , 2 ], [3,4]], // 0 valor de cada propriedade e um array. 
trial2: [[2,3], [4,5]], // Os elementos dos arrays sao arrays. 

}; 

A sintaxe ilustrada anteriormente para listar elementos de array entre chaves ou para mapear nomes 
de propriedade de objeto em valores de propriedade entre colchetes e conhecida como expressao ini- 
cializadora e e apenas um dos assuntos do Capitulo 4, Expressoes e operations. Uma expressao e uma 
frase em JavaScript que pode ser avaliada para produzir um valor. O uso de . e [] para se referir ao va¬ 
lor de uma propriedade de objeto ou a um elemento de array e uma expressao, por exemplo. Talvez 
voce tenha notado no codigo anterior que, quando uma expressao aparece sozinha em uma linha, o 
comentario que se segue come^a com uma seta (=>) e o valor da expressao. Essa e uma conven^ao 
que voce vai ver por todo o livro. 

Uma das maneiras mais comuns de formar expressoes em JavaScript e usar operadores, como segue: 

// Os operadores atuam sobre os valores (operandos) para produzir um novo valor. 

// Os operadores aritmeticos sao os mais comuns: 

3+2 II => 5: adicao 
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S - 2 
3 * 2 
3 / 2 

points[l].x - points[0].x 


"3" + "2" 


// => 1: subtracao 
// => 6: multiplicaqao 
// => 1.5: divisao 

// => 1: operandos mais complicados tambem funcionam 
// => "32": + soma numeros, ou concatena strings 


// JavaScript define alguns 

var count = 0; 

count++; 


operadores aritmeticos de forma abreviada 
// Define uma variavel 
// Incrementa a variavel 
// Decrementa a variavel 
// Soma 2: o mesmo que count = count + 2; 

// Multiplica por 3: o mesmo que count = count * 3; 
// => 6: nomes de variaveis tambem sao expressoes. 


// Os operadores de igualdade e relacionais testam se dois valores sao iguaiSj 
// desiguais, menores que, maiores que, etc. Sao avaliados como verdadeiros ou falsos. 
var x = 2, y = 3; // Esses sinais = sao atribuicoes e nao testes 

// de igualdade. 

x == y // => falso: igualdade 

x != y // => verdadeiro: desigualdade 

x < y // => verdadeiro: menor que 

x <= y // => verdadeiro: menor ou igual a 

x > y // => falso: maior que 

x >= y // => falso: maior ou igual a 

"two" == "three" // => falso: as duas strings sao diferentes 

"two" > "three" // => verdadeiro: "tw" e alfabeticamente maior do que "th" 

false == (x > y) // => verdadeiro: falso e igual a falso 


// Os operadores logicos combinam ou invertem valores booleanos 

(x == 2) && (y == 3) // => verdadeiro: as duas comparacoes sao verdadeiras. && 

// e E 

(x > 3) || (y < 3) // => falso: nenhuma das comparacoes e verdadeira. | | e OU 

!(x == y) // => verdadeiro: ! inverte urn valor booleano 

Se as frases em JavaScript sao expressoes, entao as senten^as completas sao instrugoes, as quais sao 
o tema do Capftulo 5, Instrugoes. No codigo anterior, as linhas que terminam com ponto e vfrgula 
sao instrugoes. (No codigo a seguir, voce vai ver instrugoes de varias linhas que nao terminam com 
ponto e vfrgula.) Na verdade ha muita sobreposi^ao entre instrugoes e expressoes. Em linhas gerais, 
uma expressao e algo que calcula um valor, mas nao faz nada: ela nao altera o estado do programa 
de modo algum. As instrugoes, por outro lado, nao tern um valor (ou nao tern um valor com que 
nos preocupemos), mas alteram o estado. Voce viu declara^oes de variavel e instrugoes de atribui^ao 
anteriormente. A outra categoria abrangente de instru^ao sao as estruturas de controle, como as con¬ 
ditionals e os la^os. Exemplos aparecerao a seguir, apos abordarmos as fun^oes. 

Uma fungdo e um bloco de codigo JavaScript nomeado e parametrizado que voce define uma vez 
e, entao, pode chamar repetidamente. As fun^oes nao serao abordadas formalmente ate o Capftulo 
8, Fungoes, mas, assim como os objetos e arrays, voce vai ve-las muitas vezes antes de chegar a esse 
capftulo. Aqui estao alguns exemplos simples: 

// As funqoes sao blocos de codigo JavaScript parametrizados que podemos chamar. 
function plusl(x) { // Define uma funcao chamada "plusl", com o parametro "x" 

return x+1; // Retorna um valor uma unidade maior do que o que foi passado 

} // As funcoes sao incluidas entre chaves 
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plusl(y) // => 4: y e 3; portanto, essa chamada retorna B+l 

var square = -function(x) { // As fun^oes sao valores e podem ser atribuidas a 

// variaveis 

return x*x; // Calcula o valor da funcao 

}; // Um ponto e virgula marca o fim da atribui^ao. 

square(plus(y)) // => 16: chama duas funcoes em uma unica expressao 

Quando combinamos funcoes com objetos, obtemos metodos: 

// Quando funcoes recebem as propriedades de um objeto, as 
// chamamos de "metodos". Todos os objetos de JavaScript tem metodos: 
var a = []; // Cria um array vazio 

a.push(i,2,3); // 0 metodo push() adiciona elementos em um array 

a.reverseQ; // Outro metodo: inverte a ordem dos elementos 


// Tambem podemos definir nossos proprios metodos. A palavra-chave "this" se refere a 
// objeto no qual o metodo e definido: neste caso, o array de pontos anterior. 


points.dist = function() { 

var pi = this[0]; 
var p2 = this[l]; 
var a = p2.x-pl.x; 
var b = p2.y-pl.y; 
return Math.sqrt(a*a + 
b*b); 

}; 

points.dist() 


// Define um metodo para calcular a distancia entre 
// pontos 

// Primeiro elemento do array que chamamos 
// Segundo elemento do objeto "this" 

// Diferen^a em coordenadas X 
// Diferenca em coordenadas Y 
// 0 teorema de Pitagoras 
// Math.sqrtQ calcula a raiz quadrada 

// => 1,414: distancia entre nossos 2 pontos 


Agora, conforme prometido, aqui estao algur 
estruturas de controle JavaScript comuns: 


s funfoes cujos corpos demonstram instru^oes de 


// As instru<;6es JavaScript incluem condicionais e la^os que usam a sintaxe 
// das linguagens C, C++, Java e outras. 


function abs(x) { 
if (x >= 0) { 

} 

else { 

} 


// Uma fun<;ao para calcular o valor absoluto 
// A instrupao if... 

// executa este codigo, se a comparacao for 
// verdadeira. 

// Este e o fim da clausula if. 

// A clausula opcional else executa seu codigo se 
// a comparapao for falsa. 

// Chaves sao opcionais quando ha 1 instrucao por 
// clausula. 

// Observe as instrufoes return aninhadas dentro de 
II if/else. 


function factorial(n) { 
var product = 1; 
while(n > l) { 

product *= n; 

} 

return product; 

} 

factorial(4) 


// Uma fun<;ao para calcular fatoriais 
// Comeca com o produto de 1 

// Repete as instru^oes que estao em {}, enquanto a 
// expressao em () for verdadeira 
// Atalho para product = product * n; 

// Atalho para n = n - 1 
// Fim do laco 
// Retorna o produto 

// => 24: 1*4*3*2 
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function factorial2(n) { 
var i, product = 1; 
for(i=2; i <= n; i++) 
product *= i; 

return product; 


} 

factorial2(5) 


// Outra versao, usando um la?o diferente 
// Comeqa com l 

// Incrementa i automaticamente, de 2 ate n 

II Faz isso a cada vez. {} nao e necessario para lacos 

// de 1 linha 

// Retorna o fatorial 

// => 120: i*2*3*4*5 


JavaScript e uma linguagem orientada a objetos, mas e bastante diferente da maioria. O Capftulo 9, 
Classes e modulos, aborda com detalhes a programa^ao orientada a objetos em JavaScript, com mui- 
tos exemplos, sendo um dos capftulos mais longos do livro. Aqui esta um exemplo muito simples 
que demonstra como definir uma classe JavaScript para representar pontos geometricos bidimen- 
sionais. Os objetos que sao instancias dessa classe tern um unico metodo chamado r() que calcula a 
distancia do ponto a partir da origem: 


// Define uma funcao construtora para inicializar um novo objeto Point 
function Point(x,y) { // Por conven^ao, as construtoras comeqam com letras 

// maiusculas 

this.x = x; //A palavra-chave this e o novo objeto que esta sendo 

// inicializado 

this.y = y; // Armazena os argumentos da funcao como propriedades do 

// objeto 

} // Nenhum return e necessario 


// Usa uma funqao construtora com a palavra-chave "new" para criar instancias 
var p = new Point(l, l); // 0 ponto geometrico (l,l) 


// Define metodos para objetos Point atribuindo-os ao objeto 
// prototype associado a funcao construtora. 

Point.prototype.r = functionQ { 

return Math.sqrt( // Retorna a raiz quadrada de x 2 + y 2 

this.x * this.x + // Este e o objeto Point no qual o metodo... 

this.y * this.y II...e chamado. 

); 

}; 


// Agora o objeto Point b (e todos os futuros objetos Point) herda o metodo r() 
p.r() // => 1,414... 

O Capftulo 9 e o climax da Parte I e os capftulos posteriores resumem outros pontos e encerram 
nossa explora^ao da linguagem basica. O Capftulo 10, Comparagao depadroes com expressdes regu- 
lares, explica a gramatica das expressoes regulares e demonstra como utiliza-las na compara^ao de 
padroes textuais. O Capftulo 11, Subconjuntos e extensdes de JavaScript, aborda os subconjuntos e 
as extensoes de JavaScript basica. Por fim, antes de mergulharmos em JavaScript do lado do cliente 
em navegadores Web, o Capftulo 12 , JavaScript do lado do servidor, apresenta duas maneiras de usar 
JavaScript fora dos navegadores. 


1.2 JavaScript do lado do cliente 

JavaScript do lado do cliente nao apresenta o problema de referenda cruzada nao linear no mesmo 
grau que a linguagem basica exibe, sendo que e possfvel aprender a usar JavaScript em navegado¬ 
res Web em uma sequencia bastante linear. Porem, voce provavelmente esta lendo este livro para 
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aprender JavaScript do lado do cliente e a Parte II esta muito longe daqui; portanto, esta se<jao e 
um esbo^o rapido das tecnicas basicas de programa^ao no lado do cliente, seguida por um exemplo 
detalhado. 

O Capitulo 13 , JavaScript em navegadores Web, e o primeiro capitulo da Parte II e explica em 
detalhes como trabalhar com JavaScript em navegadores Web. O mais importante que voce vai 
aprender nesse capitulo e que pode incorporar codigo JavaScript em arquivos HTML usando a 
marca <script>: 

<script src="library. js"x/script> <!-- inclui uma biblioteca de codigo DavaScript --> 
<body> 

<p>This is a paragraph of HTML</p> 

// E este e um codigo DavaScript do lado do cliente 
// literalmente incorporado no arquivo HTML 
</script> 

<p>Here is more HTML.</p> 

</body> 

</html> 

O Capitulo 14, O objeto Window, explica tecnicas de scripts no navegador Web e aborda algumas 
fun^oes globais importantes de JavaScript do lado do cliente. Por exemplo: 

<script> 

function moveonQ { 

// Exibe uma caixa de dialogo modal para fazer uma pergunta ao usuario 
var answer = confirm("Ready to move on?"); 

// Se ele clicou no botao "OK", faz o navegador carregar uma nova pagina 
if (answer) window.location = "http://google.com"; 

} 

// Executa a funqao definida acima por 1 minuto (60.000 milissegundos) a partir de agora. 
setTimeout(moveon, 60000); 

</script> 

Note que o codigo do exemplo no lado do cliente mostrado nesta se^ao aparece em trechos mais lon- 
gos do que os exemplos da linguagem basica anteriormente no capitulo. Esses exemplos nao devem 
ser digitados em uma janela de console do Firebug (ou similar). Em vez disso, voce pode incorpora- 
-los em um arquivo HTML e testa-los, carregando-os em seu navegador Web. O codigo anterior, 
por exemplo, funciona como um arquivo HTML independente. 

O Capitulo 15, Escrevendo scripts de documentos, trata do que e realmente JavaScript do lado do cliente, 
fazendo scripts de conteudo de documentos HTML. Ele mostra como se seleciona elementos HTML 
especlficos dentro de um documento, como se define os atributos HTML desses elementos, como se 
altera o conteudo desses elementos e como se adiciona novos elementos no documento. A fun^ao a 
seguir demonstra diversas dessas tecnicas basicas de pesquisa e modifica^ao de documentos: 

// Exibe uma mensagem em uma seqao de saida de depuracao especial do documento. 

// Se o documento nao contem esta seqao, cria uma. 
function debug(msg) { 

// Localiza a secao de depuracao do documento, examinando os atributos de 
// identificaqao HTML 

var log = document.getElementById("debuglog"); 
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// Se nao existe elemento algum com a identificacao "debuglog", cria um. 
if (Hog) { 

log = document.createElement("div"); // Cria um novo elemento <div> 

log.id = "debuglog"; // Define o atributo de identificacao HTML 

log.innerHTML = "<hl>Debug Log</hl>"; // Define o conteudo inicial 
document.body.appendChild(log); // Adiciona-o no final do documento 

} 

// Agora, coloca a mensagem em seu proprio <pre> e a anexa no log 
var pre = document.createElement("pre"); // Cria uma marca <pre> 

var text = document.createTextNode(msg); // Coloca a msg em um no de texto 

pre.appendChild(text); // Adiciona o texto no <pre> 

log.appendChild(pre); // Adiciona <pre> no log 

} 

O Capi'tulo 15 mostra como JavaScript pode fazer scripts de elementos HTML que definem con¬ 
teudo da Web. O Capi'tulo 16, Scripts de CSS, mostra como voce pode usar JavaScript com os estilos 
CSS que definem a apresenta^ao desse conteudo. Normalmente isso e feito com o atributo style ou 
class dos elementos HTML: 

function hide(e, reflow) { // Oculta o 
if (reflow) { 

e.style.display = "none" 

} 

else { 

e.style.visibility = "hidden”; 

} 

} 

function highlight(e) { // Destaca e, definindo uma classe CSS 

// Basta definir ou anexar no atributo da classe HTML. 

// Isso presume que uma folha de estilos CSS ja define a classe "hilite" 
if (le.className) e.className = "hilite"; 
else e.className += " hilite"; 

} 

JavaScript nos permite fazer scripts do conteudo HTML e da apresenta^ao CSS de documentos em 
navegadores Web, mas tambem nos permite definir o comportamento desses documentos com roti- 
nas de tratamento de evento. Uma rotina de tratamento de evento e uma funcjao JavaScript que regis- 
tramos no navegador e que este chama quando ocorre algum tipo de evento especificado. O evento 
de interesse pode ser um clique de mouse ou um pressionamento de tecla (ou, em um smartphone, 
pode ser um gesto de algum tipo, feito com dois dedos). Ou entao, uma rotina de tratamento de 
evento pode ser ativada quando o navegador termina de carregar um documento, quando o usuario 
redimensiona a janela do navegador ou quando o usuario insere dados em um elemento de formula- 
rio HTML. O Capi'tulo 17, Tratando eventos, explica como se define e registra rotinas de tratamento 
de eventos e como o navegador as chama quando ocorrem eventos. 

O modo mais simples de definir rotinas de tratamento de evento e com atributos HTML que co- 
mepm com “on”. A rotina de tratamento “onclick” e especialmente util quando se esta escrevendo 
programas de teste simples. Suponha que voce tenha digitado as fun (joes debugQ e hide() anteriores 
e salvo em arquivos chamados debug.js e bide.js. Voce poderia escrever um arquivo de teste simples 
em HTML usando elementos <button> com atributos da rotina de tratamento de evento onclick: 


elemento e faz script de seu estilo 

// Se o 22 argumento e verdadeiro 
// oculta o elemento e utiliza seu espaco 

// Caso contrario 

// torna e invisivel, mas deixa seu espaco 



Capi'tulo 1 Introdugao a JavaScript 11 


<scri.pt src="debug.js"x/script> 
cscript src="hide.js"x/script> 

Hello 

<button onclick="hide(this,true); debug(’hide button l’);”>Hidel</button> 

<button onclick="hide(this); debug(’hide button 2');">Hide2</button> 

World 

Aqui esta um codigo JavaScript do lado do cliente que utiliza eventos. Ele registra uma rotina de 
tratamento de evento para o importante evento “load” e tambem demonstra uma maneira mais 
sofisticada de registrar funqAes de rotina de tratamento para eventos “click”: 

// 0 evento "load" ocorre quando um documento esta totalmente carregado. Normalmente, 

// precisamos esperar por esse evento antes de comecarmos a executar nosso codigo 
// JavaScript. 

window.onload = functionQ { // Executa esta funcao quando o documento for carregado 

// Localiza todas as marcas <img> no documento 
var images = document.getElementsByTagName("img"); 

// Faz um la?o por elas, adicionando uma rotina de tratamento para eventos "click" em 
// cada uma para que clicar na imagem a oculte. 
for(var i = 0; i < images.length; i++) { 
var image = images[i]; 

if (image.addEventListener) // Outro modo de registrar uma rotina de 
// tratamento 

image.addEventListener("click"j hide, false); 
else // Para compatibilidade com o IE8 e anteriores 

image.attachEvent("onclick", hide); 

} 

// Esta e a funcao de rotina para tratamento de evento registrada anteriormente 
function hide(event) { event.target.style.visibility = "hidden"; } 

U 

Os capitulos 15, 16 e 17 explicam como usar JavaScript para fazer scripts do conteudo (HTML), 
da apresenta^ao (CSS) e do comportamento (tratamento de eventos) de paginas Web. As APIs des- 
critas nesses capitulos sao um pouco complexas e, ate recentemente, cheias de incompatibilidades 
com os navegadores. Por esses motivos, a maioria dos programadores JavaScript do lado do cliente 
optam por usar uma biblioteca ou estrutura do lado do cliente para simplificar as tarefas basicas 
programa^ao. A biblioteca mais popular e a jQuery, o tema do Capitulo 19, A biblioteca jQuery. 
biblioteca jQuery define uma API engenhosa e facil de usar para fazer scripts do conteudo, da apre- 
senta?ao e do comportamento de documentos. Ela foi completamente testada e funciona em todos 
os principals navegadores, inclusive nos antigos, como o IE6. 

E facil identificar um codigo jQuery, pois ele utiliza frequentemente uma funcao chamada $0- Aqui 
esta a funfao debugQ utilizada anteriormente, reescrita com jQuery: 
function debug(msg) { 

var log = $("#debuglog"); // Localiza o elemento para exibir a msg. 

if (log.length == 0) { // Se ele ainda nao existe, cria-o... 

log = $("<div id='debuglog'xhi>Debug Log</hix/div>"); 
log.appendTo(document.body); lit o insere no final do corpo. 

} 

log.append($("<pre/>").text(msg)); // Coloca a msg em <pre> e anexa no log. 

} 


> £* 
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Os quatro capftulos da Parte II descritos ate aqui foram todos sobre paginas Web. Outros quatro 
capftulos mudam o enfoque para aplicativos Web. Esses capftulos nao falam sobre o uso de navega- 
dores Web para exibir documentos com conteudo, apresenta^ao e comportamento em scripts. Em 
vez disso, falam sobre o uso de navegadores Web como plataformas de aplicativo e descrevem as APIs 
fornecidas pelos navegadores modernos para suportar aplicativos Web sofisticados do lado do clien- 
te. O Capftulo 18, Scripts HTTP, explica como se faz requisites HTTP em scripts JavaScript - um 
tipo de API de ligapio em rede. O Capftulo 20, Armazenamento no lado do cliente, descreve mecanis- 
mos para armazenar dados - e ate aplicativos inteiros - no lado do cliente para usar em sessoes de na- 
vega^ao fiituras. O Capftulo 21, Mtdia e graficos em scripts, aborda uma API do lado do cliente para 
desenhar elementos graficos em uma marca <canvas> da HTML. E, por fim, o Capftulo 22, APIs de 
HTML5, aborda varias APIs de aplicativo Web novas, especificadas pela HTML5 ou relacionadas a 
ela. Conexao em rede, armazenamento, graficos: esses sao servi^os de sistema operacional que estao 
sendo fornecidos pelos navegadores Web, definindo um novo ambiente de aplicativo independente 
de plataforma. Se voce esta visando navegadores que aceitam essas novas APIs, esse e um bom mo- 
mento para ser um programador JavaScript do lado do cliente. Nao ha exemplos de codigo desses 
quatro ultimos capftulos aqui, mas o longo exemplo a seguir utiliza algumas dessas novas APIs. 

1.2.1 Exemplo: uma calculation de emprestimos em JavaScript 

Este capftulo termina com um longo exemplo que reune muitas dessas tecnicas e mostra como sao 
os programas JavaScript do lado do cliente reais (mais HTML e CSS). O Exemplo 1-1 lista o codigo 
do aplicativo de calculadora de pagamento de emprestimos simples ilustrada na Figura 1-2. 



Figura 1-2 Um aplicativo Web de calculadora de emprestimos. 


Vale a pena examinar o Exemplo 1-1 atentamente. Nao espere compreender tudo, mas o codigo esta 
bastante comentado e voce sera capaz de pelo menos entender a ideia geral de seu funcionamento. O 
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exemplo demonstra varios recursos da linguagem JavaScript basica e tambem importantes tecnicas 
de JavaScript do lado do cliente: 

• Como localizar elementos em um documento. 

• Como obter entrada do usuario a partir de elementos de entrada de formularios. 

• Como definir o conteudo HTML de elementos do documento. 

• Como armazenar dados no navegador. 

• Como fazer requisites HTTP em scripts. 

• Como desenhar graficos com o elemento <canvas>. 


Exemplo 1-1 Uma calculadora de emprestimos em JavaScript 


<!D0CTYPE html> 

<html> 

<head> 

<title>JavaScript Loan Calculator</title> 
<style> /* Esta e uma folha de estilos CSS: 
.output { font-weight: bold; } 

#payment { text-decoration: underline; } 
#graph { border: solid black lpx; } 
th, td { vertical-align: top; } 

</style> 

</head> 

<body> 


ela adiciona estilo na saida do programa */ 
I* Valores calculados em negrito */ 

/* Para elemento com id="payment" */ 

/* 0 grafico tern borda simples */ 

/* Nao centraliza celulas da tabela */ 


Esta e uma tabela HTML com elementos <input> que permitem ao usuario inserir dados e 
elementos <span> nos quais o programa pode exibir seus resultados. Esses elementos tern 
identificacoes como "interest" e "years". Essas identificaqoes sao usadas no codigo 
JavaScript que vem apos a tabela. Note que alguns dos elementos de entrada definem 
rotinas de tratamento de evento "onchange" ou "onclick". Elas especificam strings de 
codigo JavaScript a ser executado quando o usuario insere dados ou da um clique. 


<trxth>Enter Loan Data:</th> 

<tdx/td> 

<th>Loan Balance, Cumulative Equity, and Interest Payments</thx/tr> 
<trxtd>Amount of the loan ($):</td> 

ctdxinput id="amount" onchange="calculate();"></td> 

<td rowspan=8> 

ccanvas id="graph” width="400" height="250"x/canvasx/tdx/tr> 
<trxtd>Annual interest (%):</td> 

ctdxinput id="apr" onchange="calculate();"x/tdx/tr> 
<trxtd>Repayment period (years):</td> 

ctdxinput id="years" onchange="calculate();"x/td> 

<trxtd>Zipcode (to find lenders) :</td> 

<tdxinput id="zipcode" onchange="calculate();"x/td> 
<trxth>Approximate Payments:</th> 

ctdxbutton onclick="calculate();">Calculate</buttonx/tdx/tr> 
<trxtd>Monthly payment:</td> 

<td>$<span class="output" id="payment"x/spanx/tdx/tr> 
<trxtd>Total payment:</td> 

<td>$<span class="output" id="total"x/spanx/tdx/tr> 
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<trxtd>Total interest:</td> 

<td>$<span class="output" id="totalinterest"x/spanx/tdx/tr> 
<trxth>Sponsors:</thxtd colspan=2> 

Apply for your loan with one of these fine lenders: 

<div id="lenders"x/divx/tdx/tr> 

</table> 

<!-- 0 restante deste exemplo e codigo JavaScript na marca <script> a seguir --> 
<!-- Normalmente, este script ficaria na marca <head> do documento acima, mas --> 
<!-- e mais facil entende-lo aqui, depois de ter visto seu contexto HTML. --> 

"usestrict"; // Usa o modo restrito da ECMAScript 5 nos navegadores que o suportam 


* Este script define a funqao calculateQ chamada pelas rotinas de tratamento de evento 

* no codigo HTML acima. A funqao le valores de elementos <input>j calcula 

* as informacoes de pagamento de emprestimo, exibe o resultado em elementos <span>. 

* Tambem salva os dados do usuario, exibe links para financeiras e desenha urn grafico. 

function calculateQ { 

// Pesquisa os elementos de entrada e saida no documento 

var amount = document.getElementById("amount"); 

var apr = document.getElementById("apr"); 

var years = document.getElementById("years"); 

var zipcode = document.getElementById("zipcode"); 

var payment = document.getElementById("payment"); 

var total = document.getElementById("total"); 

var totalinterest = document.getElementById("totalinterest"); 

// Obtem a entrada do usuario atraves dos elementos de entrada. Presume que tudo isso 

// Converte os juros de porcentagem para decimais e converte de taxa 

// anual para taxa mensal. Converte o periodo de pagamento em anos 

// para o numero de pagamentos mensais. 

var principal = parseFloat(amount.value); 

var interest = parseFloat(apr.value) / too / 12 ; 

var payments = parseFloat(years.value) * 12 ; 

// Agora calcula o valor do pagamento mensal. 

var x = Math.pow(l + interest, payments); // Math.powQ calcula potencias 
var monthly = (principal*x*interest)/(x-l); 

// Se o resultado e urn numero finito, a entrada do usuario estava correta e 
// temos resultados significativos para exibir 
if (isFinite(monthly)) { 

// Preenche os campos de saida, arredondando para 2 casas decimais 

payment.innerHTML = monthly.toFixed(2); 

total.innerHTML = (monthly * payments).toFixed(2); 

totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2); 

// Salva a entrada do usuario para que possamos recupera-la na proxima vez que 
// ele visitar 

save(amount.value, apr.value, years.value, zipcode.value); 
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// Anuncio: localiza e exibe financeiras locais, mas ignora erros de rede 
try { // Captura quaisquer erros que ocorram dentro destas chaves 
getLenders(amount.value, apr.value, years.value, zipcode.value); 

} 

catch(e) { /* E ignora esses erros */ } 

// Por fim, traca o grafico do saldo devedor, dos juros e dos pagamentos do 
capital 

chart(principal, interest, monthly, payments); 

} 

else { 

// 0 resultado foi Not-a-Number ou infinito, o que significa que a entrada 

// estava incompleta ou era invalida. Apaga qualquer saida exibida anteriormente. 

payment.innerHTML = // Apaga o conteudo desses elementos 

total.innerHTML = "" 

totalinterest.innerHTML = ""; 

chart(); // Sem argumentos, apaga o grafico 

} 

} 

// Salva a entrada do usuario como propriedades do objeto localStorage. Essas 
// propriedades ainda existirao quando o usuario visitar no futuro 

// Esse recurso de armazenamento nao vai funcionar em alguns navegadores (o Firefox, por 
// exemplo), se voce executar o exemplo a partir de urn arquivo local:// URL. Contudo, 

// funciona com HTTP. 

function save(amount, apr, years, zipcode) { 

if (window.localStorage) { // So faz isso se o navegador suportar 
localStorage.loan_amount = amount; 
localStorage.loan_apr = apr; 
localStorage.loan_years = years; 
localStorage.loan_zipcode = zipcode; 

} 

} 

// Tenta restaurar os campos de entrada automaticamente quando o documento e carregado 
// pela primeira vez. 
window.onload = functionQ { 

// Se o navegador suporta localStorage e temos alguns dados armazenados 
if (window.localStorage && localStorage.loan_amount) { 

document.getElementByldC'amount").value = localStorage.loan_amount; 
document.getElementByldC'apr'') .value = localStorage.loan_apr; 
document.getElementByldCyears”) .value = localStorage.loan_years; 
document.getElementById(''zipcode") .value = localStorage. loan_zipcode; 

} 

}; 

// Passa a entrada do usuario para urn script no lado do servidor que (teoricamente) pode 
// retornar 

// uma lista de links para financeiras locais interessadas em fazer emprestimos. Este 
// exemplo nao contem uma implementacao real desse serviqo de busca de financeiras. Mas 
// se o servi^o existisse, essa fun^ao funcionaria com ele. 
function getLenders(amount, apr, years, zipcode) { 

// Se o navegador nao suporta o objeto XMLHttpRequest, nao faz nada 
if ((window.XMLHttpRequest) return; 
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// Localiza o elemento para exibir a lista de -financeiras 

var ad = document.getElementById("lenders"); 

if (!ad) return; // Encerra se nao ha ponto de saida 

// Codifica a entrada do usuario como parametros de consulta em um URL 

var url = "getLenders.php" + // Url do servico mais 

"?amt=" + encodeURIComponent(amount) + // dados do usuario na string 

"&apr=" + encodeURIComponent(apr) + 

"&yrs=" + encodeURIComponent(years) + 

"&zip=" + encodeURIComponent(zipcode); 

// Busca o conteudo desse URL usando o objeto XMLHttpRequest 
var req = new XMLHttpRequestQ; // Inicia um novo pedido 
req.open(''GET", url); // Um pedido GET da HTTP para o url 

req.send(null); // Envia o pedido sem corpo 

// Antes de retornar, registra uma fun^ao de rotina de tratamento de evento que sera 
// chamada em um momento posterior, quando a resposta do servidor de HTTP chegar. 

// Esse tipo de programacao assincrona e muito comum em JavaScript do lado do 

req.onreadystatechange = functionQ { 

if (req.readyState == 4 && req.status == 200) { 

// Se chegamos ate aqui, obtivemos uma resposta HTTP valida e completa 
var response = req.responseText; // Resposta HTTP como string 
var lenders = JSON.parse(response); // Analisa em um array JS 

// Converte o array de objetos lender em uma string HTML 
var list = 

for(var i = 0; i < lenders.length; i++) { 

list += "<lixa href="' + lenders[i] .url + + 

lenders[i].name + "</a>"; 

} 

// Exibe o codigo HTML no elemento acima. 
ad.innerHTML = "<ul>” + list + "</ul>"; 

} 

} 

} 

// Faz o grafico do saldo devedor mensal, dos juros e do capital em um elemento <canvas> 
// da HTML. 

// Se for chamado sem argumentos, basta apagar qualquer grafico desenhado anteriormente. 
function chart(principal, interest, monthly, payments) { 

var graph = document.getElementById("graph"); // Obtem a marca <canvas> 

graph.width = graph.width; // Magica para apagar e redefinir o elemento 

// Se chamamos sem argumentos ou se esse navegador nao suporta 
// elementos graficos em um elemento <canvas>, basta retornar agora, 
if (arguments.length == 0 || (graph.getContext) return; 

// Obtem o objeto "contexto" de <canvas> que define a API de desenho 
var g = graph.getContext("2d"); // Todo desenho e feito com esse objeto 
var width = graph.width, height = graph.height; // Obtem o tamanho da tela de 

// desenho 
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// Essas funpoes convertem numeros de pagamento e valores monetarios em pixels 
function paymentToX(n) { return n * width/payments; } 

function amountToY(a) { return height-(a * height/(monthly*payments*1.05));} 

// Os pagamentos sao uma linha reta de (0,0) a (payments, monthly*payments) 
g.moveTo(paymentToX(0), amountToY(O)); // Comeca no canto inferior esquerdo 

g.lineTo(paymentToX(payments), // Desenha ate o canto superior direito 

amountToY(monthly*payments)); 

g.lineTo(paymentToX(payments), amountToY(O)); // Para baixo, ate o canto 

// inferior direito 

g.closePath(); // E volta ao inicio 

g.fillStyle = "#f88"; // Vermelho-claro 

g.fill(); // Preenche o triangulo 

g.font = "bold 12px sans-serif"; // Define uma fonte 

g.fillText("Total Interest Payments", 20,20); // Desenha texto na legenda 


// 0 capital acumulado nao e linear e e mais complicado de representar no grafico 
var equity = 0; 

g.beginPath(); // Inicia uma nova figura 

g.moveTo(paymentToX(0), amountToY(O)); // comepando no canto inferior 

// esquerdo 

for(var p = l; p <= payments; p++) { 

// Para cada pagamento, descobre quanto e o juro 
var thisMonthsInterest = (principal-equity)*interest; 

equity += (monthly - thisMonthsInterest); // 0 resto vai para o capital 

g.lineTo(paymentToX(p),amountToY(equity)); // Linha ate este ponto 


} 

g.lineTo(paymentToX(payments), amountToY(O)); 

g.closePathQ; 

g.fillStyle = "green"; 

g.fiiiQ; 

g.fillText("Total Equity", 20,35); 


// Linha de volta para o eixo X 
// E volta para o ponto inicial 
// Agora usa tinta verde 
// E preenche a area sob a curva 
// Rotula em verde 


// Faz lapo novamente, como acima, mas representa o saldo devedor como uma linha 
// preta grossa no grafico 
var bal = principal; 
g.beginPathQ; 

g.moveTo(paymentToX(0),amountToY(bal)); 
for(var p = l; p <= payments; p++) { 

var thisMonthsInterest = bal*interest; 

bal -= (monthly - thisMonthsInterest); // 0 resto vai para o capital 
g.lineTo(paymentToX(p),amountToY(bal)); // Desenha a linha ate esse ponto 


g.lineWidth = 3; 
g.stroke(); 

g.fillStyle = "black"; 
g.fillText("Loan Balance", 20,50); 


// Usa uma linha grossa 
// Desenha a curva do saldo 
// Troca para texto preto 
// Entrada da legenda 


// Agora faz marcacoes anuais e os numeros de ano 
g.textAlign="center"; 

var y = amountToY(O); 

for(var year=l; year*12 <= payments; year++) { 
var x = paymentToX(year*12); 
g.fillRect(x-o.5,y-3,i,3); 
if (year == l) g.fillText("Year", x, y-5); 


eixo X 

// Centraliza o texto nas 
// marcas 

// Coordenada Y do eixo X 

// Para cada ano 

// Calcula a posicao da marca 

// Desenha a marca 

// Rotula o eixo 
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} 


if (year % 5 == 0 && year*i2 
g.fillText(String(year), 


payments) 

y-5); 


// Numera cada 5 a 


// Marca valores de pagamento ao longo da margem direita 
g.textAlign = "right"; // Alinha 0 texto a direita 

g.textBaseline = "middle"; // Centraliza verticalmente 

var ticks = [monthly*payments, principal]; // Os dois pontos que marcaremos 
var rightEdge = paymentToX(payments); // Coordenada X do eixo Y 

for(var i = 0; i < ticks.length; i++) { // Para cada urn dos 2 pontos 

var y = amountToY(ticks[i]); // Calcula a posi^ao Y da marca 
g.fillRect(rightEdge-3, y-0.5j 3jl); // Desenha a marcacao 

g.fillText(String(ticks[i].toFixed(O)), // E a rotula. 
rightEdge-5, y); 

} 


} 

</script> 

</body> 

</html> 
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Esta parte do livro, Capitulos 2 a 12, documenta a linguagem JavaScript basica e tem como objetivo 
ser uma referenda da linguagem. Depois de le-la do principio ao fim para aprender a linguagem, 
voce podera voltar a ela para relembrar alguns pontos mais complicados de JavaScript. 


Capitulo 2, Estrutura lexica 
Capitulo 3, Tipos, valores e variaveis 
Capitulo 4, Expressoes e operadores 
Capitulo 5, Instrugoes 
Capitulo 6, Objetos 
Capitulo 7, Arrays 
Capitulo 8, Fungoes 
Capitulo 9, Classes e modulos 

Capitulo 10, Comparagdo depadroes com expressoes regulares 
Capitulo 11, Subconjuntos e extensoes de JavaScript 
Capitulo 12, JavaScript do lado do servidor 



Esta pagina foi deixada em branco intencionalmente. 





Capltulo 2 

Estrutura lexica 


A estrutura lexica de uma linguagem de programa^ao e o conjunto de regras elementares que es- 
pecificam o modo de escrever programas nessa linguagem. E a sintaxe de nivel mais baixo de uma 
linguagem; especifica detalhes de como sao os nomes de variaveis, os caracteres delimitadores para 
comentarios e como uma instnnjao do programa e separada da seguinte. Este breve capitulo docu- 
menta a estrutura lexica de JavaScript. 

2.1 Conjunto de caracteres 

Os programas JavaScript sao escritos com o conjunto de caracteres Unicode. Unicode e um su- 
perconjunto de ASCII e Latin-1 e suporta praticamente todos os idiomas escritos usados boje no 
planeta. A ECMAScript 3 exige que as implementa^oes de JavaScript suportem Unicode versao 2.1 
ou posterior e a ECMAScript 5 exige que as implementa^oes suportem Unicode 3 ou posterior. 
Consulte o quadro na Se^ao 3.2 para mais informa^oes sobre Unicode e JavaScript. 

2.1.1 Diferenciagao de maiusculas e minusculas 

JavaScript e uma linguagem que diferencia letras maiusculas de minusculas. Isso significa que pala- 
vras-chave, variaveis, nomes de funfao e outros identificadores da linguagem sempre devem ser digi- 
tados com a composi^ao compativel de letras. A palavra-chave while, por exemplo, deve ser digitada 
como “while” e nao como “While” ou “WHILE.” Da mesma forma, online, Online, OnLine e ONLINE 
sao quatro nomes de variavel distintos. 

Note, entretanto, que HTML nao diferencia letras maiusculas e minusculas (embora a XHTML 
diferencie). Por causa de sua forte associa^ao com JavaScript do lado do cliente, essa diferen^a pode 
ser confusa. Muitos objetos e propriedades de JavaScript do lado do cliente tern os mesmos nomes 
das marcas e atributos HTML que representam. Ao passo que essas marcas e nomes de atributo po- 
dem ser digitados com letras maiusculas ou minusculas na HTML, em JavaScript elas normalmente 
devem ser todas minusculas. Por exemplo, o atributo de rotina de tratamento de evento onclick da 
HTML as vezes e especificado como onClick em HTML, mas deve ser especificado como onclick no 
codigo JavaScript (ou em documentos XHTML). 
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2.1.2 Espa$o em branco, quebras de linha e caracteres de controle deformato 

JavaScript ignora os espa^os que aparecem entre sinais em programas. De modo geral, JavaScript 
tambem ignora quebras de linha (mas consulte a Se^ao 2.5 para ver uma exce^ao). Como e possivel 
usar espa^os e novas linhas livremente em seus programas, voce pode formatar e endentar os progra¬ 
mas de um modo organizado e harmonioso, que torne o codigo facil de ler e entender. 

Alem do caractere de espa^o normal (\u0020), JavaScript tambem reconhece os seguintes caracteres 
como espa^o em branco: tabula?ao (\u0009), tabula^ao vertical (\uoooB), avanq:o de pagina (\u000C), 
espa?o nao separavel (\uooAo), marca de ordem de byte (\uFEFF) e qualquer caractere Unicode da ca- 
tegoria Zs. JavaScript reconhece os seguintes caracteres como terminos de linha: avan<jo de linha (\ 
uOOOA), retorno de carro (\u000D), separador de linha (\u2028) e separador de paragrafo (\u 2029 ). Uma 
sequencia retorno de carro, avanq:o de linha e tratada como um unico termino de linha. 

Os caracteres de controle de formato Unicode (categoria Cf), como RIGHT-TO-LEFT MARK 
(\u200F) e LEFT-TO-RIGHT MARK (\u200E), controlam a apresenta^ao visual do texto em que 
ocorrem. Eles sao importantes para a exibi^ao correta de alguns idiomas e sao permitidos em comen¬ 
tarios, strings literais e expressoes regulares literais de JavaScript, mas nao nos identificadores (por 
exemplo, nomes de variavel) de um programa JavaScript. Como casos especiais, ZERO WIDTH 
JOINER (\u 200 D) e ZERO WIDTH NON-JOINER (\u200C) sao permitidos em identificadores, 
mas nao como o primeiro caractere. Conforme observado anteriormente, o caractere de controle de 
formato de marca de ordem de byte (\uFEFF) e tratado como caractere de espafo. 

2.1.3 Sequences de escape Unicode 

Alguns componentes de hardware e software de computador nao conseguem exibir ou introduzir o 
conjunto completo de caracteres Unicode. Para ajudar os programadores que utilizam essa tecnolo- 
gia mais antiga, JavaScript define sequencias especiais de seis caracteres ASCII para represen tar qual¬ 
quer codigo Unicode de 16 bits. Esses escapes Unicode comefam com os caracteres \u e sao seguidos 
por exatamente quatro digitos hexadecimais (usando as letras A-F maiusculas ou minusculas). Os 
escapes Unicode podem aparecer em strings literais, expressoes regulares literais e em identificadores 
JavaScript (mas nao em palavras-chave da linguagem). O escape Unicode para o caractere “e”, por 
exemplo, e \u00E9, e as duas strings JavaScript a seguir sao identicas: 

"cafe" === "caf\u00e9" // => true 

Os escapes Unicode tambem podem aparecer em comentarios, mas como os comentarios sao ig- 
norados, eles sao tratados como caracteres ASCII nesse contexto e nao sao interpretados como 
Unicode. 

2.1.4 Normaliza^ao 

O Unicode permite mais de uma maneira de codificar o mesmo caractere. A string “e”, por exemplo, 
pode ser codificada como o caractere Unicode \u00E9 ou como um caractere ASCII “e” normal, 
seguido da marca de combina^ao de acento agudo \u030i. Essas duas codifica^oes podem parecer 
exatamente a mesma quando exibidas por um editor de textos, mas tern diferentes codifica^oes 
binarias e sao consideradas diferentes pelo computador. O padrao Unicode define a codificaqao pre- 
ferida para todos os caracteres e especifica um procedimento de normaliza^ao para converter texto 
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em uma forma canonica conveniente para compara^oes. JavaScript presume que o codigo-fonte que 
esta interpretando ja foi normalizado e nao tenta normalizar identificadores, strings nem expressoes 


2.2 Comentarios 

JavaScript aceita dois estilos de comentarios. Qualquer texto entre lie o final de uma linha e tratado 
como comentario e e ignorado por JavaScript. Qualquer texto entre os caracteres I* e */ tambem e 
tratado como comentario; esses comentarios podem abranger varias linhas, mas nao podem ser ani- 
nhados. As linhas de codigo a seguir sao todas comentarios JavaScript validos: 

// Este e um comentario de uma linha. 

/* Este tambem e um comentario */ // e aqui esta outro comentario. 

I* 

* Este e ainda outro comentario. 

* Ele tern varias linhas. 


2.3 Literals 


Um literal e um valor de dados que aparece diretamente em um programa. Os valores seguintes sao 
todos literals: 


12 

1.2 

"hello world" 


false 

/javascript/gi 

null 


// 0 numero doze 

// 0 numero um ponto dois 

// Uma string de texto 

// Outra string 

// Um valor booleano 

// 0 outro valor booleano 

// Uma "expressao regular" literal (para comparacao de padroes) 
// Ausencia de um objeto 


Os detalhes completos sobre literals numericos e string aparecem no Capitulo 3. As expressoes regu- 
lares literals sao abordadas no Capitulo 10. Expressoes mais complexas (consulte a Secjao 4.2) podem 
servir como array e objeto literals. Por exemplo: 

{ x:l, y:2 } // Um inicializador de objeto 

[1,2,3,4,5] // Um inicializador de array 


2.4 Identificadores e palavras reservadas 

Um identificador e simplesmente um nome. Em JavaScript, os identificadores sao usados para dar 
nomes a variaveis e fun^oes e para fornecer rotulos para certos la^os no codigo JavaScript. Um iden¬ 
tificador JavaScript deve come^ar com uma letra, um sublinhado (_) ou um cifrao ($). Os caracteres 
subsequentes podem ser letras, digitos, sublinhados ou cifroes. (Os digitos nao sao permitidos como 
primeiro caractere, para que JavaScript possa distinguir identificadores de niimeros facilmente.) To- 
dos estes sao identificadores validos: 

my_variable_name 

vl3 
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_dummy 

$str 

Por portabilidade e facilidade de edifao, e comum usar apenas letras e dfgitos ASCII em identifica- 
dores. Note, entretanto, que JavaScript permite que os identificadores contenham letras e dfgitos do 
conjunto de caracteres Unicode inteiro. (Tecnicamente, o padrao ECMAScript tambem permite que 
caracteres Unicode das categorias obscuras Mn, Me e Pc aparefam em identificadores, apos o pri- 
meiro caractere.) Isso permite que os programadores utilizem nomes de variavel em outros idiomas 
e tambem usem sfmbolos matematicos: 

var tt = 3.14; 

Assim como qualquer linguagem, JavaScript reserva certos identificadores para uso proprio. Essas 
“palavras reservadas” nao podem ser usadas como identificadores normais. Elas estao listadas a seguir. 


2.4.1 Palavras reservadas 

JavaScript reserva varios identificadores como palavras-chave da propria linguagem. Voce nao pode 


• essas palavras 

como identificadores em seus 

; programas: 


break 

delete 

function 

return 

typeof 

case 

do 

if 

switch 

var 

catch 

else 

in 

this 

void 

continue 

false 

instanceof throw 

while 

debugger 

finally 

new 

true 

with 

default 

for 

null 

try 



JavaScript tambem reserva certas palavras-chave nao utilizadas atualmente na linguagem, mas que 
poderao ser usadas em futuras versoes. A ECMAScript 5 reserva as seguintes palavras: 

class const enum export extends import super 

Alem disso, as seguintes palavras, que sao validas em codigo JavaScript normal, sao reservadas no 
modo restrito: 

implements let private public yield 

interface package protected static 

O modo restrito tambem impoe restrifoes sobre o uso dos identificadores a seguir. Eles nao sao to- 
talmente reservados, mas nao sao permitidos como nomes de variavel, funipao ou parametro: 
arguments eval 

ECMAScript 3 reservou todas as palavras-chave da linguagem Java e, embora tenham sido consen- 
tidos em ECMAScript 5, voce ainda deve evitar todos esses identificadores, caso pretenda executar 


codigo em un 

ta implementafao ECMAScript 3 de Ja 

vaScript: 


abstract 

double 

goto 

native 

static 

boolean 

enum 

implements 

package 

super 

byte 

export 

import 

private 

synchronized 

char 

extends 

int 

protected 

throws 

class 

final 

interface 

public 

transient 

const 

float 

long 

short 

volatile 
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funfoes globais e voce deve evitar o uso de seus nomes em 


JavaScript predefine diversas variaveis e 
suas proprias variaveis e fun^oes: 

arguments encodeURI 

Array encodeURIComponent 

Boolean Error 

Date eval 

decodeURI EvalError 

decodellRIComponent Function 


Infinity 

Number 

RegExp 

isFinite 

Object 

String 

isNaN 

parseFloat 

SyntaxError 

ISON 

parselnt 

TypeError 

Math 

RangeError 

undefined 

NaN 

ReferenceError 

URIError 


Lembre-se de que as implementa^oes de JavaScript podem definir outras variaveis e fiinfoes globais, 
sendo que cada incorpora?ao de JavaScript especffica (lado do cliente, lado do servidor, etc.) tera sua 
propria lista de propriedades globais. Consulte o objeto Window na Parte IV para ver uma lista das 
variaveis e funijoes globais definidas por JavaScript do lado do cliente. 


2.5 Pontos e virgulas opcionais 

Assim como muitas linguagens de programa^ao, JavaScript usa o ponto e virgula (;) para separar 
instrufoes (consulte o Capitulo 5). Isso e importante para tornar claro o significado de seu codi- 
go: sem um separador, o fim de uma instru^ao pode parecer ser o inicio da seguinte ou vice-versa. 
Em JavaScript, voce normalmente pode omitir o ponto e virgula entre duas instru^oes, caso essas 
instrufoes sejam escritas em linhas separadas. (Voce tambem pode omitir um ponto e virgula no 
final de um programa ou se o proximo sinal do programa for uma chave de fechamento }.) Muitos 
programadores JavaScript (e o codigo deste livro) utilizam pontos e virgulas para marcar explicita- 
mente os finais de instrufoes, mesmo onde eles nao sao obrigatorios. Outro estilo e omitir os pontos 
e virgulas quando possivel, utilizando-os nas poucas situates que os exigem. Qualquer que seja o 
estilo escolhido, existem alguns detalhes que voce deve entender sobre os pontos e virgulas opcionais 
em JavaScript. 

Considere o codigo a seguir. Como as duas instrufoes aparecem em linhas separadas, o primeiro 
ponto e virgula poderia ser omitido: 


Contudo, escrito como a seguir, o primeiro ponto e virgula e obrigatorio: 
a = 3; b = 4; 

Note que JavaScript nao trata toda quebra de linha como ponto e virgula: ela normalmente trata as 
quebras de linha como pontos e virgulas somente se nao consegue analisar o codigo sem os pontos e 
virgulas. Mais formalmente (e com as duas exce^oes, descritas a seguir), JavaScript trata uma quebra 
de linha como ponto e virgula caso o proximo caractere que nao seja espa^o nao possa ser interpre- 
tado como a continua^ao da instru^ao corrente. Considere o codigo a seguir: 


console.log(a) 
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JavaScript interpreta esse codigo como segue: 
var a; a = 3; console.log(a); 

JavaScript trata a primeira quebra de linha como ponto e virgula porque nao pode analisar o codigo 
var a a sem um ponto e virgula. O segundo a poderia aparecer sozinho como a instru^ao a;, mas 
JavaScript nao trata a segunda quebra de linha como ponto e virgula porque pode continuar anali- 
sando a instru^ao mais longa a = 3;. 

Essas regras de termino de instrupio levam a alguns casos surpreendentes. O codigo a seguir parece 
ser duas instru^oes distintas, separadas por uma nova linha: 
var y = x + f 
(a+b).toString() 

Porem, os parenteses na segunda linha de codigo podem ser interpretados como uma chamada de 
funqao de f da primeira linha, sendo que JavaScript interpreta o codigo como segue: 

var y = x + f(a+b).toStringQ; 

Muito provavelmente, essa nao e a interpretapio pretendida pelo autor do codigo. Para funcionarem 
como duas instru^oes distintas, e necessario um ponto e virgula explicito nesse caso. 

Em geral, se uma instrupio comepi com (, [, /, + ou -, ha a possibilidade de que possa ser interpreta- 
da como uma continua^ao da instrupio anterior. Na pratica, instru^oes comepindo com /, + e - sao 
muito raras, mas instru^oes comepindo com ( e [ nao sao incomuns, pelo menos em alguns estilos 
de programapio com JavaScript. Alguns programadores gostam de colocar um ponto e virgula pro- 
tetor no inicio de uma instrupio assim, para que continue a funcionar corretamente mesmo que a 
instrupio anterior seja modificada e um ponto e virgula, anteriormente de termino, removido: 
var x = 0 //Ponto e virgula omitido aqui 

;[x,x+l,x+2].forEach(console.log) // 0 ; protetor mantem esta instruqao 
//separada 

Existem duas exce^oes a regra geral de que JavaScript interpreta quebras de linha como pontos e 
virgulas quando nao consegue analisar a segunda linha como uma continuapio da instrupio da pri¬ 
meira linha. A primeira excepio envolve as instru^oes return, break e continue (consulte o Capitulo 
5). Essas instru^oes frequentemente aparecem sozinhas, mas as vezes sao seguidas por um identifica- 
dor ou por uma expressao. Se uma quebra de linha aparece depois de qualquer uma dessas palavras 
(antes de qualquer outro sinal), JavaScript sempre interpreta essa quebra de linha como um ponto e 
virgula. Por exemplo, se voce escreve: 
return 

JavaScript presume que voce quis dizer: 
return; true; 

Contudo, voce provavelmente quis dizer: 


return true; 
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Isso signifies que nao se deve inserir uma quebra de linha entre return, break ou continue e a expres¬ 
sao que vem apos a palavra-chave. Se voce inserir uma quebra de linha, seu codigo provavelmente vai 
falhar de uma maneira inesperada, dificil de depurar. 

A segunda exce^ao envolve os operadores ++ e -- (Se^ao 4.8). Esses podem ser operadores prefixados, 
que aparecem antes de uma expressao, ou operadores pos-fixados, que aparecem depois de uma ex¬ 
pressao. Se quiser usar um desses operadores como pos-fixados, eles devem aparecer na mesma linha 
da expressao em que sao aplicados. Caso contrario, a quebra de linha vai ser tratada como ponto e 
virgula e o operador ++ ou - - vai ser analisado como um operador prefixado aplicado ao codigo que 
vem a seguir. Considere este codigo, por exemplo: 


y 

Ele e analisado como x; ++y; e nao como x++; y. 
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Tipos, valores e variaveis 


Os programas de computador funcionam manipulando valores, como o numero 3,14 ou o texto 
“Ola Mundo”. Os tipos de valores que podem ser representados e manipulados em uma linguagem 
de programa^ao sao conhecidos como tipos e uma das caracterfsticas mais fundamentais de uma lin¬ 
guagem de programafao e o conjunto de tipos que ela aceita. Quando um programa precisa manter 
um valor para uso futuro, ele atribui o valor (ou “armazena” o valor) a uma variavel. Uma variavel 
define um nome simbolico para um valor e permite que o valor seja referido pelo nome. O funciona- 
mento das variaveis e outra caracteristica fundamental de qualquer linguagem de programa^ao. Este 
capi'tulo explica os tipos, valores e variaveis em JavaScript. Os paragrafos introdutorios fornecem 
uma visao geral, sendo que talvez voce ache util consultar a Se^ao 1.1 enquanto os le. As sefoes a 
seguir abordam esses temas em profundidade. 

Os tipos de JavaScript podem ser divididos em duas categorias: tiposprimitivos e tipos de objeto. Os 
tipos primitivos de JavaScript incluem numeros, sequencias de texto (conhecidas como strings) e 
valores de verdade (conhecidos como booleanos). Uma parte significativa deste capi'tulo e dedicada a 
uma explica^ao detalhada dos tipos numericos (Se^ao 3.1) e de string (Se^ao 3.2) em JavaScript. Os 
booleanos sao abordados na Se?ao 3.3. 

Os valores especiais null e undefined de JavaScript sao valores primitivos, mas nao sao numeros, nem 
strings e nem booleanos. Cada valor normalmente e considerado como membro unico de seu pro- 
prio tipo especial. A Seqao 3.4 tern mais informafoes sobre null e undefined. 

Qualquer valor em JavaScript que nao seja numero, string, booleano, null ou undefined e um objeto. 
Um objeto (isto e, um membro do tipo objeto) e um conjunto de propriedades, em que cada proprie- 
dade tern um nome e um valor (ou um valor primitivo, como um numero ou string, ou um objeto). 
Um objeto muito especial, o objeto global, e estudado na Se^ao 3.5, mas uma abordagem mais geral 
e detalhada sobre objetos aparece no Capi'tulo 6. 

Um objeto normal em JavaScript e um conjunto nao ordenado de valores nomeados. A linguagem 
tambem define um tipo especial de objeto, conhecido como array, que representa um conjunto 
ordenado de valores numerados. A linguagem JavaScript contem sintaxe especial para trabalhar com 
arrays, sendo que os arrays tern um comportamento especial que os diferencia dos objetos normais. 
Os arrays sao o tema do Capi'tulo 7. 
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JavaScript define outro tipo especial de objeto, conhecido como fungao. Uma funrjao e um objeto 
que tem codigo executavel associado. Uma funqao pode ser chamada para executar esse codigo exe¬ 
cutavel e retornar um valor calculado. Assim como os arrays, as funfoes se comportam de maneira 
diferente dos outros tipos de objetos, sendo que JavaScript define uma sintaxe especial para traba- 
lhar com elas. O mais importante a respeito das fun^oes em JavaScript e que elas sao valores reais 
e os programas em JavaScript podem trata-las como objetos normais. As fun (joes sao abordadas no 
Capitulo 8. 

As funtjoes que sao escritas para serem usadas (com o operador new) para inicializar um objeto criado 
recentemente sao conhecidas como construtoras. Cada construtora define uma classe de objetos - o 
conjunto de objetos inicializados por essa construtora. As classes podem ser consideradas como 
subtipos do tipo de objeto. Alem das classes Array e Function, JavaScript basica define outras tres 
classes uteis. A classe Date define objetos que representam datas. A classe RegExp define objetos que 
representam expressoes regulares (uma poderosa ferramenta de compararjao de padroes, descrita no 
Capitulo 10). E a classe Error define objetos que representam erros de sintaxe e de execuijao que 
podem ocorrer em um programa JavaScript. Voce pode estabelecer suas proprias classes de objetos, 
definindo funtjoes construtoras apropriadas. Isso esta explicado no Capitulo 9. 

O interpretador JavaScript realiza a coleta de lixo automatica para gerenciamento de memoria. Isso 
significa que um programa pode criar objetos conforme for necessario e o programador nunca pre- 
cisa se preocupar com a destruRao ou desalocatjao desses objetos. Quando um objeto nao pode mais 
ser acessado - quando um programa nao tem mais maneira alguma de se referir a ele -, o interpre¬ 
tador sabe que ele nunca mais pode ser utilizado e recupera automaticamente o espa<jo de memoria 
que ele estava ocupando. 

JavaScript e uma linguagem orientada a objetos. Isso significa que, em vez de ter fun (joes definidas 
globalmente para operar em valores de varios tipos, os proprios tipos definem metodos para trabalhar 
com valores. Para classificar os elementos de um array a, por exemplo, nao passamos a para uma 
funijao sort(). Em vez disso, chamamos o metodo sort() de a: 

a.sort(); // A versao orientada a objetos de sort(a). 

A definiijao de metodo e abordada no Capitulo 9. Tecnicamente, em JavaScript apenas os objetos 
possuem metodos. Mas niimeros, strings e valores booleanos se comportam como se tivessem meto¬ 
dos (a Setjao 3.6 explica como isso funciona). Em JavaScript, null e undefined sao os unicos valores 
em que metodos nao podem ser chamados. 

Os tipos de JavaScript podem ser divididos em tipos primitivos e tipos de objeto. E podem ser di- 
vididos em tipos com metodos e tipos sem metodos. Tambem podem ser classificados como tipos 
mutaveis e imutaveis. Um valor de um tipo mutavel pode mudar. Objetos e arrays sao mutaveis: um 
programa JavaScript pode alterar os valores de propriedades do objeto e de elementos de arrays. 
Numeros, booleanos, null e undefined sao imutaveis - nem mesmo faria sentido falar sobre alterar 
o valor de um numero, por exemplo. As strings podem ser consideradas arrays de caracteres, sendo 
que se poderia esperar que fossem mutaveis. No entanto, em JavaScript as strings sao imutaveis: voce 
pode acessar o texto de determinado indice de uma string, mas JavaScript nao fornece uma maneira 
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de alterar o texto de uma string existente. As diferenfas entre valores mutaveis e imutaveis sao explo- 
radas mais a fundo na Se^ao 3.7. 

JavaScript convene valores de um tipo para outro de forma livre. Se um programa espera uma string, 
por exemplo, e voce fornece um numero, ele convene o numero em string automaticamente. Se 
voce usa um valor nao booleano onde e esperado um booleano, JavaScript convene adequadamente. 
As regras de conversao de valor sao explicadas na Se^ao 3.8. As regras de conversao de valor liberals 
de JavaScript afetam sua defini^ao de igualdade, sendo que o operador de igualdade == realiza con- 
versoes de tipo conforme descrito na Se<jao 3.8.1. 

As variaveis em JavaScript sao nao tipadas: voce pode atribuir um valor de qualquer tipo a uma 
variavel e, posteriormente, atribuir um valor de tipo diferente para a mesma variavel. As variaveis 
sao declaradas com a palavra-chave var. JavaScript utiliza escopo lexico. As variaveis declaradas fora 
de uma funfao sao variaveis globais e sao visiveis por toda parte em um programa JavaScript. As 
variaveis declaradas dentro de uma fun^ao tern escopo de Jungao e sao visiveis apenas para o codigo 
que aparece dentro dessa funqao. A declara^ao e o escopo de variaveis sao abordados na Seqao 3.9 e 
na Sefao 3.10. 

3.1 Numeros 

Ao contrario de muitas linguagens, JavaScript nao faz distinijao entre valores inteiros e valores 
em ponto flutuante. Todos os numeros em JavaScript sao representados como valores em pon- 
to flutuante. JavaScript representa numeros usando o formato de ponto flutuante de 64 bits de- 
finido pelo padrao IEEE 754 1 , isso significa que pode representar numeros tao grandes quanto 
+ 1,7976931348623157 x 10 308 e tao pequenos quanto ±5 x 10~ 324 . 

O formato numerico de JavaScript permite representar exatamente todos os inteiros entre 
-9007199254740992 (-2 53 ) e 9007199254740992 (2 53 ), inclusive. Se voce usar valores inteiros 
maiores do que isso, podera perder a precisao nos digitos a direita. Note, enttetanto, que certas ope¬ 
rates em JavaScript (como indexatjao de arrays e os operadores bit a bit descritos no Capitulo 4) sao 
efetuadas com inteiros de 32 bits. 

Quando um numero aparece diretamente em um programa JavaScript, ele e chamado de literal 
numerico. JavaScript aceita literals numericos em varios formatos, conforme descrito nas se^oes a 
seguir. Note que qualquer literal numerico pode ser precedido por um sinal de subtract (-) para 
tornar o numero negativo. Tecnicamente, contudo, - e o operador de negato unario (consulte o 
Capitulo 4) e nao faz parte da sintaxe de literal numerico. 


1 Esse formato deve ser conhecido dos programadores Java como formato do tipo double. Tambem e o formato double 
usado em quase todas as implementafoes modernas de C e C++. 
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3.1.1 Literals inteiros 

Em um programa JavaScript, um inteiro de base 10 e escrito como uma sequencia de dfgitos. Por 
exemplo: 

0 

3 

10000000 

Alem dos literals inteiros de base 10, JavaScript reconhece valores hexadecimais (base 16). Um literal 
hexadecimal come^a com “Ox” ou “OX”, seguido por uma sequencia de dfgitos hexadecimais. Um 
dfgito hexadecimal e um dos algarismos de 0 a 9 ou as letras a (ou A) ate f (ou F), as quais represen- 
tam valores de 10 a 15. Aqui estao exemplos de literals inteiros hexadecimais: 

Oxff // 15*16 + 15 = 255 (base 10) 

0xCAFE911 

Embora o padrao ECMAScript nao ofere^a suporte para isso, algumas implementafoes de Java¬ 
Script permitem especificar literals inteiros no formato octal (base 8). Um literal em octal come^a 
com o dfgito 0 e e seguido por uma sequencia de dfgitos, cada um entre 0 e 7. Por exemplo: 

0377 // 3*64 + 7*8 + 7 = 255 (base 10) 

Como algumas implementa^oes aceitam literals em octal e algumas nao, voce nunca deve escrever 
um literal inteiro com um zero a esquerda; nesse caso, nao da para saber se uma implementa?ao vai 
interpreta-la como um valor octal ou decimal. No modo restrito de ECMAScript 5 (Se^ao 5.7.3), os 
Eterais em octal sao proibidos explicitamente. 


3.1.2 Literals em ponto flutuante 

Os literals em ponto flutuante podem ter um ponto decimal; eles usam a sintaxe tradicional dos 
numeros reais. Um valor real e representado como a parte inteira do numero, seguida de um ponto 
decimal e a parte fracionaria do numero. 

Os literals em ponto flutuante tambem podem ser representados usando-se nota^ao exponencial: 
um numero real seguido da letra e (ou E), seguido por um sinal de adi^ao ou subtra^ao opcional, se¬ 
guido por um expoente inteiro. Essa nota^ao representa o numero real multiplicado por 10, elevado 
a potencia do expoente. 

Mais sucintamente, a sintaxe e: 

[dlgitos][.digitos] [(E|e)[(+| -)]dlgitos] 

Por exemplo: 

3.14 

2345.789 

.333333333333333333 

6.02e23 // 6.02 X 10 23 

1.4738223E-32 // 1.4738223 x 10~ 32 




32 Parte I JavaScript basica 


3.1.3 Aritmetica em JavaScript 

Os programas JavaScript trabalham com numeros usando os operadores aritmeticos fornecidos pela 
linguagem. Isso inclui + para adi^ao, - para subtra^ao, * para multiplica^ao, / para divisao e % para 
modulo (resto da divisao). Mais detalhes sobre esses e outros operadores podem ser encontrados no 
Capitulo 4. 


Alem desses operadores aritmeticos basicos, JavaScript aceita operates matematicas mais complexas 
por meio de um conjunto de funqties e constantes definidas como propriedades do objeto Math: 


Math.pow(2,53) 

Math.round(.6) 

Math.ceil(.6) 

Math.floor(.6) 

Math.abs(-5) 

Math.max(x,y,z) 

Math.min(x,y,z) 

Math.random() 

Math.PI 
Math.E 
Math.sqrt(3) 

Math.pow(3, 1/3) 
Math.sin(O) 

Math.log(lO) 

Math.Iog(l00)/Math.LN10 
Math.log(5l2)/Math.LN2 
Math.exp(3) 


// => 9007199254740992: 2 elevado a potencia 53 

// => 1.0: arredonda para o inteiro mais proximo 

// => 1.0: arredonda para cima para um inteiro 

// => 0.0: arredonda para baixo para um inteiro 

// => 5: valor absoluto 
// Retorna o maior argumento 
// Retorna o menor argumento 
// Numero pseudoaleatorio x, onde 0 <= x < l.o 
// it: circunferencia de um circulo / diametro 
lie: A base do logaritmo natural 
// A raiz quadrada de 3 
// A raiz cubica de 3 

// Trigonometria: tambem Math.cos, Math.atan, etc. 
// Logaritmo natural de 10 
// Logaritmo de base 10 de 100 
// Logaritmo de base 2 de 512 
// Math.E ao cubo 


Consulte o objeto Math na se^ao de referenda para ver detalhes completos sobre todas as fun^oes 
matematicas suportadas por JavaScript. 

A aritmetica em JavaScript nao gera erros em casos de estouro, estouro negativo ou divisao por 
zero. Quando o resultado de uma opera^ao numerica e maior do que o maior numero representavel 
(estouro), o resultado e um valor infinito especial, que JavaScript indica como Infinity. Da mesma 
forma, quando um valor negativo se torna maior do que o maior numero negativo representavel, o 
resultado e infinito negativo, indicado como -Infinity. Os valores infinitos se comportam conforme 
o esperado: soma-los, subtrai-los, multiplica-los ou dividi-los por qualquer coisa resulta em um valor 
infinito (possivelmente com o sinal invertido). 

O estouro negativo ocorre quando o resultado de uma opera^ao numerica e mais proximo de zero do 
que o menor numero representavel. Nesse caso, JavaScript retorna 0. Se o estouro negativo ocorre a 
partir de um numero negativo, JavaScript retorna um valor especial conhecido como “zero negati¬ 
vo”. Esse valor e quase completamente indistinguivel do zero normal e os programadores JavaScript 
raramente precisam detecta-lo. 

Divisao por zero nao e erro em JavaScript: ela simplesmente retorna infinito ou infinito negativo. 
Contudo, ha uma exce^ao: zero dividido por zero nao tern um valor bem definido e o resultado 
dessa opera?ao e o valor especial not-a-number, impresso como NaN. NaN tambem surge se voce tenta 
dividir infinito por infinito, extrai a raiz quadrada de um numero negativo, ou usa operadores arit¬ 
meticos com operandos nao numericos que nao podem ser convertidos em numeros. 
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JavaScript predefine as variaveis globais Infinity e NaN para corner o infinito positivo e o valor not- 
-a-number. Em ECMAScript 3, esses sao valores de leitura/gravarjao e podem ser alterados. EC- 
MAScript 5 corrige isso e coloca os valores no modo somente para leitura. O objeto Number define 
alternativas que sao somente para leitura ate em ECMAScript 3. Aqui estao alguns exemplos: 


Infinity 

Number.POSITIVE_INFINITY 
1/0 

Number.MAXVALUE + 1 


// Uma variavel de leitura/gravacao inicializada como 
// Infinity. 

// 0 mesmo valor, somente para leitura. 

// Este tambem e o mesmo valor. 

// Isso tambem e avaliado como Infinity. 


Number.NEGATIVE_INFINITY // Essas expressoes sao infinito negativo. 

-Infinity 

-1/0 

-Number.MAX_VALUE - 1 


NaN 

Number.NaN 
0/0 


// Uma variavel de leitura/gravacao inicializada como NaN. 
// Uma propriedade somente para leitura contendo o mesmo 

// Avaliado como NaN. 


Number.MIN_VALUE/2 // Estouro negativo: avaliado como 0 

-Number.MIN_VALUE/2 // Zero negativo 

-1/Infinity // Tambem 0 negativo 


O valor not-a-number tern uma caracterfstica incomum em JavaScript: nao e comparado como 
igual a qualquer outro valor, incluindo ele mesmo. Isso significa que voce nao pode escrever x == NaN 
para determinar se o valor de uma variavel x e NaN. Em vez disso, deve escrever x ! = x. Essa expressao 
sera verdadeira se, e somente se, x for NaN. A funfao isNaNQ e semelhante. Ela retorna true se seu 
argumento for NaN ou se esse argumento for um valor nao numerico, como uma string ou um objeto. 
A funijao relacionada isFiniteQ retorna true se seu argumento for um numero que nao seja NaN, 
Infinity ou -Infinity. 

O valor zero negativo tambem e um pouco incomum. Ele e comparado como igual (mesmo usando- 
-se o teste restrito de igualdade de JavaScript) ao zero positivo, isto e, os dois valores sao quase indis- 
tinguiveis, exceto quando usados como divisores: 

var zero =0; // Zero normal 

var negz = -0; // Zero negativo 

zero === negz // => verdadeiro: zero e zero negativo sao iguais 

l/zero === l/negz // => falso: infinito e -infinito nao sao iguais 


3.1.4 Ponto flutuante binario e erros de arredondamento 

Existem infinitos numeros reais, mas apenas uma quantidade finita deles (18437736874454810627, 
para ser exato) pode ser representada de forma exata pelo formato de ponto flutuante de JavaScript. 
Isso significa que, quando se esta trabalhando com numeros reais em JavaScript, a representa?ao do 
numero frequentemente sera uma aproxima?ao dele. 
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A represen ta^ao em ponto flutuante IEEE-754 utilizada em JavaScript (e por praticamente todas 
as outras linguagens de programaqao modernas) e uma representaqao binaria que pode descrever 
fraqoes como 1 / 2 ,1/8 e 1/1024 com exatidao. Infelizmente, as fraqoes que usamos mais comumen- 
te (especialmente ao executarmos calculos financeiros) sao decimals: 1/10,1/100, etc. As represen- 
taqoes em ponto flutuante binarias nao conseguem representar numeros simples como 0.1 com 
exatidao. 


Os numeros em JavaScript tern muita precisao e podem se aproximar bastante de 0.1. Mas o fato 
de esse numero nao poder ser representado de forma exata pode causar problemas. Considere este 
codigo: 


var y = .2 - 

x == y 


y == .1 


// trinta centavos menos 20 centavos 

// vinte centavos menos 10 centavos 

// => falso: os dois valores nao sao os mesmos! 

// => falso: .3-.2 nao e igual a .1 

// => verdadeiro: .2-.1 e igual a .1 


Devido ao erro de arredondamento, a diferenija entre as aproximaqoes de .3 e .2 nao e exatamente 
igual a diferen^a entre as aproximaqoes de .2 e . 1. E importante entender que esse problema nao e 
especffico da linguagem JavaScript: ele afeta qualquer linguagem de programaqao que utilize nume¬ 
ros binarios em ponto flutuante. Alem disso, note que os valores x e y no codigo anterior sao muito 
proximos entre si e do valor correto. Os valores calculados sao adequados para quase todas as finali- 
dades - o problema surge quando ten tamos comparar a igualdade de valores. 


Uma futura versao de JavaScript podera suportar um tipo numerico decimal que evite esses pro¬ 
blemas de arredondamento. Ate entao, talvez voce queira efetuar calculos financeiros importantes 
usando inteiros adaptados. Por exemplo, voce poderia manipular valores monetarios como centavos 
inteiros, em vez de fraqoes de moeda. 


3.1.5 Datasehoras 


JavaScript basico inclui uma construtora DateQ para criar objetos que representam datas e horas. 
Esses objetos Date tem metodos que fornecem uma API para calculos simples de data. Os objetos 
Date nao sao um tipo fundamental como os numeros. Esta seqao apresenta um estudo rapido sobre 
o trabalho com datas. Detalhes completos podem ser encontrados na seqao de referenda: 


var then = new Date(2010, 0, l); 
var later = new Date(2010, 0, 1 , 
17 , 10 , 30); 
var now = new Date(); 
var elapsed = now - then; 


// 0 l 2 dia do l 2 mes de 2010 

// 0 mesmo dia, as 5:10:30 da tarde, hora local 

// A data e hora atuais 

// Subtracao de data: intervalo em milissegundos 


later. getFullYearQ 
later. getMonthQ 
later.getDate() 
later.getDay() 
later. getHoursQ 
later.getUTCHours() 


// => 2010 

// => 0: meses com base em zero 
// => l: dias com base em um 

// => 5: dia da semana. 0 e domingo, 5 e sexta-feira. 
// => 17: 5 da tarde, hora local 
// Horas em UTC; depende do fuso horario 
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later.toString() 

later.toUTCString() 
later.toLocaleDateString() 
later. toLocaleTimeStringO 
later.toISOString() 


// => "Sexta-feira, 01 de janeiro de 2010, 17:10:30 GMT-0800 
// (PST)" 

// => "Sabado, 02 de janeiro de 2010, 01:10:30 GMT" 

// => "01/01/2010" 

II => "05:10:30 PM" 

// => " 2010 - 01 - 02 T 01 : 10 :30.000Z"j somente ES5 



3.2 Texto 

Uma string e uma sequencia ordenada imutavel de valores de 16 bits, cada um dos quais normal- 
mente representa um caractere Unicode - as strings sao um tipo de JavaScript usado para representar 
texto. O comprimento de uma string e o numero de valores de 16 bits que ela content. As strings (e 
seus arrays) de JavaScript utilizam indexagao com base em zero: o primeiro valor de 16 bits esta na 
posigao 0, o segundo na posigao 1 e assim por diante. A string vazia e a string de comprimento 0. 
JavaScript nao tern um tipo especial que represente um unico elemento de uma string. Para repre¬ 
sentar um unico valor de 16 bits, basta usar uma string que tenha comprimento 1. 


Caracteres, posi^oes de codigo e strings em JavaScript 

JavaScript usa a codificagao UTF-16 do conjunto de caracteres Unicode e as strings em JavaScript sao 
sequences de valores de 16 bits sem sinal. Os caracteres Unicode mais comumente usados (os do "piano 
basico multilingue") tern posigoes de codigo que cabem em 16 bits e podem ser representados por um 
unico elemento de uma string. Os caracteres Unicode cujas posigoes de codigo nao cabem em 16 bits sao 
codificados de acordo com as regras da UTF-16 como uma sequencia (conhecida como"par substituto") de 
dois valores de 16 bits. Isso significa que uma string JavaScript de comprimento 2 (dois valores de 16 bits) 
pode representar apenas um caractere Unicode: 

var p = "ft"; // n e l caractere com posicao de codigo de 16 bits 0x03c0 

var e = "e"; //eel caractere com posicao de codigo de 17 bits 0xid452 

p.length // => 1: p consiste em 1 elemento de 16 bits 

e.length II => 2 : a codificagao UTF -16 de e sao 2 valores de 16 bits: "\ud835\ 

// udc52" 

0s diversos metodos de manipulagao de strings definidos em JavaScript operam sobre valores de 16 bits 
e nao sobre caracteres. Eles nao tratam pares substitutes de forma especial, nao fazem a normalizagao da 
string e nem mesmo garantem que uma string seja UTF-16 bem formada. 


3.2.1 Strings literals 

Para incluir uma string literalmente em um programa JavaScript, basta colocar os caracteres da string 
dentro de um par combinado de aspas simples ou duplas (' ou "). Os caracteres de aspas duplas 
podem estar contidos dentro de strings delimitadas por caracteres de aspas simples e estes podem 
estar contidos dentro de strings delimitadas por aspas duplas. Aqui estao exemplos de strings literals: 
"" // A string vazia: ela tem zero caracteres 

"3.14" 
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'name="myform'" 

"Wouldn't you prefer O'Reilly's book?" 

"This string\nhas two lines" 

"it is the ratio of a circle's circumference to its diameter" 

Em ECMAScript 3, as strings literais devem ser escritas em uma unica linha. Em ECMAScript 5, 
no entanto, pode-se dividir uma string literal em varias linhas, finalizando cada uma delas, menos 
a ultima, com uma barra invertida (\). Nem a barra invertida nem a termina^ao de linha que vem 
depois dela fazem parte da string literal. Se precisar incluir um caractere de nova linha em uma string 
literal, use a sequencia de caracteres \n (documentada a seguir): 

"two\nlines” // Uma string representando 2 linhas escritas em uma linha 

"one\ // Uma string de uma linha escrita em 3 linhas. Somente ECMAScript 5. 

Note que, ao usar aspas simples para delimitar suas strings, voce deve tomar cuidado com as contra- 
foes e os possessivos do idioma ingles, como can’t e O’Reillys. Como o apostrofo e igual ao caractere 
de aspas simples, deve-se usar o caractere de barra invertida (\) para fazer o “escape” de qualquer 
apostrofo que apare^a em strings com aspas simples (os escapes estao explicados na proxima secjao). 

Na programa?ao JavaScript do lado do cliente, o codigo JavaScript pode conter strings de codi- 
go HTML e o codigo HTML pode conter strings de codigo JavaScript. Assim como JavaScript, 
HTML utiliza aspas simples ou duplas para delimitar suas strings. Assim, ao se combinar JavaScript 
e HTML, e uma boa ideia usar um estilo de aspas para JavaScript e outro para HTML. No exemplo 
a seguir, a string “Thank you” esta entre aspas simples dentro de uma expressao JavaScript, a qual e 
colocada entre aspas duplas dentro de um atributo de rotina de tratamento de evento em HTML: 
<button onclick="alert('Thank you')">Click Me</button> 

3.2.2 Sequences de escape em strings literais 

O caractere de barra invertida (\) tern um proposito especial nas strings em JavaScript. Combinado 
com o caractere que vem a seguir, ele representa um caractere que nao pode ser representado de outra 
forma dentro da string. Por exemplo, \n e uma sequencia de escape que representa um caractere de 
nova linha. 

Outro exemplo, mencionado anteriormente, e o escape V, que representa o caractere de aspas sim¬ 
ples (ou apostrofo). Essa sequencia de escape e util quando se precisa incluir um apostrofo em uma 
string literal que esta contida dentro de aspas simples. Voce pode ver por que elas sao chamadas de 
sequencias de escape: a barra invertida permite escapar da interpretaqao normal do caractere de aspas 
simples. Em vez de utiliza-lo para marcar o final da string, voce o utiliza como um apostrofo: 
'You\'re right, it can\'t be a quote' 

ATabela 3-1 lista as sequencias de escape em JavaScript e os caracteres que representam. Duas se¬ 
quencias de escape sao genericas e podem ser usadas para representar qualquer caractere, especifican- 
do-se seu codigo de caractere Latin-1 ou Unicode como um numero hexadecimal. Por exemplo, a 
sequencia \xA9 representa o sfmbolo de direitos autorais, o qual tern a codifica^ao Latin- 1 dada pelo 
numero hexadecimal A9. Da mesma forma, o escape \u representa um caractere Unicode arbitrario 
especificado por quatro digitos hexadecimais; \u03c0 representa o caractere n, por exemplo. 
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Tabela 3-1 Sequences de escape em JavaScript 


Sequencia 

Caractere representado 

\0 

0 caractere NUL (\u 0000 ) 

\b 

Retrocesso (\u0008) 

\t 

Tabulacao horizontal (\u0009) 

\n 

Nova linha (\u 000 A) 

\v 

Tabulacao vertical (\u 000 B) 

\f 

Avan^o de pagina (\u 000 C) 

\r 

Retorno de carro (\u 000 D) 

\" 

Aspas duplas (\u 0022 ) 

V 

Apostrofo ou aspas simples (\u0027) 

\\ 

Barra invertida (\u005C) 

\x XX 

0 caractere Latin -1 especificado pelos dois digitos hexadecimais XX 

\u XXXX 

0 caractere Unicode especificado pelos quatro digitos hexadecimais XXXX 



Se o caractere \ precede qualquer outro caractere que nao seja um dos mostrados na Tabela 3-1, 
a barra invertida e simplesmente ignorada (embora, e claro, versoes futuras da linguagem possam 
definir novas sequencias de escape). Por exemplo, \# eo mesmo que #. Por fim, conforme observado 
anteriormente, a ECMAScript 5 permite que uma barra invertida antes de uma quebra de linha 
divida uma string literal em varias linhas. 


3.2.3 Trabalhando com strings 

Um dos recursos incorporados a JavaScript e a capacidade de concatenar strings. Se o operador + e 
utilizado com mimeros, ele os soma. Mas se esse operador e usado em strings, ele as une, anexando 
a segunda na primeira. Por exemplo: 

msg = "Hello, " + "world"; // Produz a string "Hello, world" 

greeting = "Welcome to my blog," + " " + name; 

Para determinar o comprimento de uma string - o numero de valores de 16 bits que ela content - 
use sua propriedade length. Determine o comprimento de uma string s como segue: 


Alem dessa propriedade length, existem varios metodos que podem ser chamados em strings (como 
sempre, consulte a se^ao de referenda para ver detalhes completos): 


var s = "hello, world" 

s.charAt(O) 

s.charAt(s.length-l) 

s.substring(l,4) 

s.slice(l,4) 

s.slice(-3) 

s.indexOf("l") 

s.lastlndex 0 f("l") 

s.indexOf("l", 3) 


// Comeca com um texto. 

// => "h": o primeiro caractere. 

// => "d": o ultimo caractere. 

// => "ell": o 22 , 32 e 4 s caracteres. 

// => "ell": a mesma coisa 

// => "rid": os ultimos 3 caracteres 

// => 2 : posicao da primeira letra 1 . 

// => 10 : posiqao da ultima letra 1 . 

// => 3: posicao do primeiro "1" em ou apos 3 








38 Parte I JavaScript basica 


s.split("j ") // => ["hello", "world"] divide em substrings 

s.replace("h", "H") // => "Hello, world": substitui todas as instancias 

s.toUpperCaseQ // => "HELLO, WORLD" 

Lembre-se de que as strings sao imutaveis em JavaScript. Metodos como replace () e toUpperCase() 
retornam novas strings - eles nao modificam a string em que sao chamados. 

Em ECMAScript 5, as strings podem ser tratadas como arrays somente para leitura e e possivel aces- 
sar caracteres individuals (valores de 16 bits) de uma string usando colchetes em lugar do metodo 
charAt(): 

s = "hello, world"; 

s[ 0 ] // => "h" 

s[s.length-l] // => "d" 

Os navegadores Web baseados no Mozilla, como o Firefox, permitem que as strings sejam indexadas 
dessa maneira ha muito tempo. A maioria dos navegadores modernos (com a notavel exce^ao do IE) 
seguiu o exemplo do Mozilla mesmo antes que esse recurso fosse padronizado em ECMAScript 5. 


3.2.4 Compara^ao de padroes 

JavaScript define uma construtora RegExpQ para criar objetos que representam padroes textuais. 
Esses padroes sao descritos com expressoes regulares, sendo que JavaScript adota a sintaxe da Perl para 
expressoes regulares. Tan to as strings como os objetos RegExp tern metodos para fazer compara^ao 
de padroes e executar operates de busca e troca usando expressoes regulares. 

Os objetos RegExp nao sao um dos tipos fundamentals de JavaScript. Assim como os objetos Date, 
eles sao simplesmente um tipo de objeto especializado, com uma API util. A gramatica da expressao 
regular e complexa e a API nao e trivial. Elas estao documentadas em detalhes no Capitulo 10. No 
entanto, como os objetos RegExp sao poderosos e utilizados comumente para processamento de 
texto, esta se^ao fornece uma breve visao geral. 

Embora os objetos RegExp nao sejam um dos tipos de dados fundamentals da linguagem, eles tern 
uma sintaxe literal e podem ser codificados diretamente nos programas JavaScript. O texto entre um 
par de barras normais constitui uma expressao regular literal. A segunda barra normal do par tambem 
pode ser seguida por uma ou mais letras, as quais modificam o significado do padrao. Por exemplo: 

/ A HTML/ // Corresponde as letras H T M L no inicio de uma string 

/[i-9][0-9]*/ // Corresponde a um digito diferente de zero, seguido de qualquer 

// numero de digitos 

/\bjavascript\b/i // Corresponde a "javascript" como uma palavra, sem considerar letras 
// maiusculas e minusculas 


Os objetos RegExp definem varios metodos uteis e as strings tambem tem metodos que aceitam 
argumentos de RegExp. Por exemplo: 


var text = "testing: 1 , 2 , 3"; 
var pattern = /\d+/g 

pattern.test(text) 
text.search(pattern) 
text.match(pattern) 
text.replace(pattern, "#"); 
text.split(/\D+/)j 


// Exemplo de texto 

// Corresponde a todas as instancias de um ou mais 
// digitos 

// => verdadeiro: existe uma correspondence 
// => 9 : posiqao da primeira correspondence 
// => [" 1 ", " 2 ", " 3 "]: array de todas as correspondences 
// => "testing: #, #, #" 

// => " 2 "," 3 "] ; divide em nao digitos 




Capi'tuloB Tipos, valores e variaveis 39 


3.3 Valores booleanos 

Um valor booleano representa verdadeiro ou falso, ligado ou desligado, sim ou nao. So existem dois 
valores possrveis desse tipo. As palavras reservadas true e false sao avaliadas nesses dois valores. 

Geralmente, os valores booleanos resultam de compara^oes feitas nos programas JavaScript. Por 
exemplo: 


Esse codigo faz um teste para ver se o valor da variavel a e igual ao numero 4. Se for, o resultado dessa 
comparagio e o valor booleano true. Se a nao e igual a 4, o resultado da comparagio e false. 

Os valores booleanos sao comumente usados em estruturas de controle em JavaScript. Por exemplo, 
a instrugio if/else de JavaScript executa uma a?ao se um valor booleano e true e outra agio se o va¬ 
lor e false. Normalmente, uma com paramo que gera um valor booleano e combinada diretamente 
com a instrugio que o utiliza. O resultado e o seguinte: 

if (a == 4) 
b = b + 1; 
else 

a = a + l; 

Esse codigo verifica se a e igual a 4. Se for, ele soma lab; caso contrario, ele soma l a a. Conforme 
discutiremos na Segio 3.8, em JavaScript qualquer valor pode ser convertido em um valor booleano. 
Os valores a seguir sao convertidos (e, portanto, funcionam como) em false: 

undefined 

null 

0 

-0 

NaN 

"" //a string vazia 

Todos os outros valores, incluindo todos os objetos (e arrays) sao convertidos (e funcionam como) 
em true, false e os seis valores assim convertidos, as vezes sao chamados de valores falsos e todos os 
outros valores sao chamados de verdadeiros. Sempre que JavaScript espera um valor booleano, um 
valor falso funciona como false e um valor verdadeiro funciona como true. 

Como exemplo, suponha que a variavel o contem um objeto ou o valor null. Voce pode testar expli- 
citamente para ver se o e nao nulo, com uma instrugio if, como segue: 

if (o !== null) ... 

O operador de desigualdade !== compara o com null e e avaliado como true ou como false. Mas 
voce pode omitir a comparagio e, em vez disso, contar com o fato de que null e falso e os objetos 
sao verdadeiros: 


if (o) ... 
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No primeiro caso, o corpo da instru^ao if so vai ser executado se o nao for null. O segundo caso e 
menos rigoroso: ele executa o corpo da instru^ao if somente se o nao e false ou qualquer valor falso 
(como null ou undefined). A instru^ao if apropriada para seu programa depende de quais valores 
voce espera atribuir para o. Se voce precisa diferenciar null de 0 e entao deve utilizar uma com- 
para^ao explfcita. 

Os valores booleanos tem um metodo toString() que pode ser usado para converte-los nas strings 
“true” ou “false”, mas nao possuem qualquer outro metodo util. Apesar da API trivial, existem tres 
operadores booleanos importantes. 

O operador && executa a opera?ao booleana E. Ele e avaliado como um valor verdadeiro se, e so¬ 
mente se, seus dois operandos sao verdadeiros; caso contrario, e avaliado como um valor falso. O 
operador 11 e a operaqao booleana OU: ele e avaliado como um valor verdadeiro se um ou outro (ou 
ambos) de seus operandos e verdadeiro e e avaliado como um valor falso se os dois operandos sao 
falsos. Por fim, o operador unario ! executa a opera^ao booleana NAO: ele e avaliado como true se 
seu operando e falso e e avaliado como false se seu operando e verdadeiro. Por exemplo: 

if ((x == 0 && y == 0) || !(z == 0)) { 

// x e y sao ambos zero ou z nao e zero 

} 

Os detalhes completos sobre esses operadores estao na Secjao 4.10. 

3.4 null e undefined 

null e uma palavra-chave da linguagem avaliada com um valor especial, normalmente utilizado para 
indicar a ausencia de um valor. Usar o operador typeof em null retorna a string “object”, indicando 
que null pode ser considerado um valor de objeto especial que significa “nenhum objeto”. Na prati- 
ca, contudo, null normalmente e considerado como o unico membro de seu proprio tipo e pode ser 
usado para indicar “nenhum valor” para mimeros e strings, assim como para objetos. A maioria das 
linguagens de programa^ao tem um equivalente para o null de JavaScript: talvez voce ja o conhe^a 
como nullou nil. 

JavaScript tambem tem um segundo valor que indica ausencia de valor. O valor indefinido 
representa uma ausencia mais profunda. E o valor de variaveis que nao foram inicializadas e o 
valor obtido quando se consulta o valor de uma propriedade de objeto ou elemento de array que 
nao existe. O valor indefinido tambem e retornado por fun$6es que nao tem valor de retorno 
e o valor de parametros de fun^ao quando os quais nenhum argumento e fornecido. undefined 
e uma variavel global predefinida (e nao uma palavra-chave da linguagem, como null) que e 
inicializada com o valor indefinido. Em ECMAScript 3, undefined e uma variavel de leitura/ 
gravafao e pode ser configurada com qualquer valor. Esse erro foi corrigido em ECMAScript 5 
e undefined e somente para leitura nessa versao da linguagem. Se voce aplicar o operador typeof 
no valor indefinido, ele vai retornar “undefined”, indicando que esse valor e o unico membro de 
um tipo especial. 
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Apesar dessas diferenqas, tanto null quanto undefined indicam uma ausencia de valor e muitas 
vezes podem ser usados indistintamente. O operador de igualdade == os considera iguais. (Para dife- 
rencia-los, use o operador de igualdade restrito ===.) Ambos sao valores falsos - eles se comportam 
como false quando um valor booleano e exigido. Nem null nem undefined tem propriedades ou 
metodos. Na verdade, usar . ou [] para acessar uma propriedade ou um metodo desses valores causa 
um TypeError. 

Voce pode pensar em usar undefined para representar uma ausencia de valor em rn'vel de sistema, 
inesperada ou como um erro e null para representar ausencia de valor em nivel de programa, nor¬ 
mal ou esperada. Se precisar atribuir um desses valores a uma variavel ou propriedade ou passar um 
desses valores para uma funqao, null quase sempre e a escolha certa. 

3.5 0 objeto global 

As seqoes anteriores explicaram os tipos primitivos e valores em JavaScript. Os tipos de objeto - ob- 
jetos, arrays e fun (joes - sao abordados em seus proprios capitulos, posteriormente neste livro. Po- 
rem, existe um valor de objeto muito importante que precisamos abordar agora. O objeto global e um 
objeto normal de JavaScript que tem um objetivo muito importante: as propriedades desse objeto 
sao os simbolos definidos globalmente que estao disponiveis para um programa JavaScript. Quando 
o interpretador JavaScript comeqa (ou quando um navegador Web carrega uma nova pagina), ele 
cria um novo objeto global e da a ele um conjunto inicial de propriedades que define: 

• propriedades globais, como undefined, Infinity e NaN 

• funqoes globais, como isNaNQ, parselntQ (Secjao 3.8.2) e eval() (Seqao 4.12). 

• funqoes construtoras, como Date(), RegExpQ, StringQ, ObjectQ e Array() (Serjao 3.8.2) 

• objetos globais, como Math e JSON (Seqao 6.9) 

As propriedades iniciais do objeto global nao sao palavras reservadas, mas merecem ser tratadas 
como se fossem. A Seqao 2.4.1 lista cada uma dessas propriedades. Este capitulo ja descreveu algu- 
mas dessas propriedades globais. A maioria das outras sera abordada em outras partes deste livro. E 
voce pode procura-las pelo nome na seqao de referenda de JavaScript basico ou procurar o proprio 
objeto global sob o nome “Global”. Em JavaScript do lado do cliente, o objeto Window define ou- 
tros globais que podem ser pesquisados na seqao de referenda do lado do cliente. 

No codigo de rn'vel superior - codigo JavaScript que nao faz parte de uma firnqao -, pode-se usar a 
palavra-chave this de JavaScript para se referir ao objeto global: 

var global = this; // Define uma variavel global para se referir ao objeto global 

Em JavaScript do lado do cliente, o objeto Window serve como objeto global para todo codigo 
JavaScript contido na janela do navegador que ele representa. Esse objeto global Window tem uma 
propriedade de autoreferencia window que pode ser usada no lugar de this para se referir ao objeto 
global. O objeto Window define as propriedades globais basicas, mas tambem define muitos outros 
globais que sao especificos para navegadores Web e para JavaScript do lado do cliente. 
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Ao ser criado, o objeto global define todos os valores globais predefinidos de JavaScript. Mas esse 
objeto especial tambem content globais definidos pelo programa. Se seu codigo declara uma varia- 
vel global, essa variavel e uma propriedade do objeto global. A Se<jao 3.10.2 explica isso com mais 
detalhes. 

3.6 Objetos wrapper 

Os objetos JavaScript sao valores compostos: eles sao um conjunto de propriedades ou valores no- 
meados. Ao usarmos a nota^ao . fazemos referenda ao valor de uma propriedade. Quando o valor 
de uma propriedade e uma fun^ao, a chamamos de metodo. Para chamar o metodo m de um objeto 
o, escrevemos o.m(). 

Tambem vimos que as strings tern propriedades e metodos: 

var s = "hello world!"; // Uma string 

var word = s.substring(s.indexOf(" ")+l, s.length); // Usa propriedades da string 

Contudo, as strings nao sao objetos. Entao, por que elas tern propriedades? Quando voce tenta se 
referir a uma propriedade de uma string s, JavaScript convene o valor da string em um objeto como 
se estivesse chamando new String(s). Esse objeto herda (consulte a Secjao 6.2.2) metodos da string e 
e utilizado para solucionar a referenda da propriedade. Uma vez solucionada a propriedade, o objeto 
recentemente criado e descartado. (As implementa^oes nao sao obrigadas a criar e descartar esse 
objeto transitorio - contudo, devem se comportar como se fossem.) 

Numeros e valores booleanos tern metodos pelo mesmo motivo que as strings: um objeto tempo¬ 
rario e criado com a construtora Number() ou BooleanQ e o metodo e solucionado por meio desse 
objeto temporario. Nao existem objetos empacotadores (wrapper) para os valores nulle undefined: 
qualquer tentativa de acessar uma propriedade de um desses valores causa um TypeError. 

Considere o codigo a seguir e pense no que acontece quando ele e executado: 

var s = "test"; // Come;a com um valor de string, 

s.len = 4; // Configura uma propriedade nele. 

var t = s.len; // Agora consulta a propriedade. 

Quando esse codigo e executado, o valor de t e undefined. A segunda linha de codigo cria um objeto 
String temporario, configura sua propriedade len como 4 e, em seguida, descarta esse objeto. A ter- 
ceira linha cria um novo objeto String a partir do valor da string original (nao modificado) e, entao, 
tenta ler a propriedade len. Essa propriedade nao existe e a expressao e avaliada como undefined. Esse 
codigo demonstra que strings, numeros e valores booleanos se comportam como objetos quando se 
tenta ler o valor de uma propriedade (ou metodo) deles. Mas se voce tenta definir o valor de uma 
propriedade, essa tentativa e ignorada silenciosamente: a alteraQo e feita em um objeto temporario 
e nao persiste. 

Os objetos temporaries criados ao se acessar uma propriedade de uma string, numero ou valor bo- 
oleano sao conhecidos como objetos empacotadores (wrapper) e ocasionalmente pode ser necessario 
diferenciar um valor de string de um objeto String ou um numero ou valor booleano de um objeto 
Number ou Boolean. Normalmente, contudo, os objetos wrapper podem ser considerados como 



Capi'tuloB Tipos, valores e variaveis 43 


um detalhe de implementa^ao e nao e necessario pensar neles. Basta saber que string, numero e valo¬ 
res booleanos diferem de objetos pois suas propriedades sao somente para leitura e que nao e possfvel 
definir novas propriedades neles. 

Note que e possfvel (mas quase nunca necessario ou util) criar objetos wrapper explicitamente, cha- 
mando as construtoras StringO, NumberQ ou Boolean(): 

var s = "test", n = l, b = true; // Uma string, um numero e um valor booleano. 

var S = new String(s); // Um objeto String 

var N = new Number(n); // Um objeto Number 

var B = new Boolean(b); // Um objeto Boolean 

JavaScript converte objetos wrapper no valor primitivo empacotado, quando necessario; portanto, 
os objetos S, N e B anteriores normalmente (mas nem sempre) se comportam exatamente como os 
valores s, n e b. O operador de igualdade == trata um valor e seu objeto wrapper como iguais, mas e 
possfvel diferencia-los com o operador de igualdade restrito ===. O operador typeof tambem mostra 
a diferenija entre um valor primitivo e seu objeto wrapper. 


3.7 Valores primitivos imutaveis e references de objeto mutaveis 

Em JavaScript existe uma diferenija fundamental entre valores primitivos (undefined, null, boolea¬ 
nos, numeros e strings) e objetos (incluindo arrays e funijoes). Os valores primitivos sao imutaveis: 
nao ha como alterar (ou “mudar”) um valor primitivo. Isso e obvio para numeros e booleanos - nem 
mesmo faz sentido mudar o valor de um numero. No entanto, nao e tao obvio para strings. Como 
as strings sao como arrays de caracteres, voce poderia pensar que e possfvel alterar o caractere em 
qualquer fndice especificado. Na verdade, JavaScript nao permite isso e todos os metodos de string 
que parecem retornar uma string modificada estao na verdade retornando um novo valor de string. 
Por exemplo: 

var s = "hello"; // Comega com um texto em letras minusculas 
s.toUpperCaseQ; // Retorna "HELLO", mas nao altera s 

s // => "hello": a string original nao mudou 

Os valores primitivos tambem sao comparados por valor: dois valores sao iguais somente se tern o 
mesmo valor. Isso parece recorrente para numeros, booleanos, null e undefined: nao ha outra manei- 
ra de compara-los. Novamente, contudo, nao e tao obvio para strings. Se dois valores distintos de 
string sao comparados, JavaScript os trata como iguais se, e somente se, tiverem o mesmo compri- 
mento e se o caractere em cada fndice for o mesmo. 


Os objetos sao diferentes dos valores primitivos. Primeiramente, eles sao mutaveis - seus valores 
podem mudar: 


var o = { x:l }; 
o.x = 2; 
o.y = 3; 


// Come^a com um objeto 

// Muda-o, alterando o valor de uma propriedade 
// Muda-o novamente, adicionando uma nova propriedade 


var a = [1,2,3] 

a[0] = 0; 
a[3] = 4; 


// Os arrays tambem sao mutaveis 
// Muda o valor de um elemento do array 
// Adiciona um novo elemento no array 
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Objetos nao sao comparados por valor: dois objetos nao sao iguais mesmo que tenham as mesmas 
propriedades e valores. E dois arrays nao sao iguais mesmo que tenham os mesmos elementos na 
mesma ordem: 


var o = {x:l}, p = {x:l}; 
o === p 

var a = [], b = []; 


// Dois objetos com as mesmas propriedades 
// => falso: objetos distintos nunca sao iguais 
// Dois arrays vazios diferentes 
// => falso: arrays diferentes nunca sao iguais 


As vezes os objetos sao chamados de tipos de referenda para distingui-los dos tipos primitivos de 
JavaScript. Usando essa terminologia, os valores de objeto sao referencias e dizemos que os objetos 
sao comparados por referenda: dois valores de objeto sao iguais se, e somente se, eles se referem ao 
mesmo objeto basico. 


var a = []; 


b[0] = i; 
a [ 0 ] 


// A variavel a se refere a urn array vazio. 

// Agora b se refere ao mesmo array. 

// Muda o array referido pela variavel b. 

// => l: a mudanca tambem e visivel por meio da variavel a. 

// => verdadeiro: a e b se referem ao mesmo objeto; portanto, 


iguais. 


Como voce pode ver no codigo anterior, atribuir um objeto (ou array) a uma variavel simplesmente 
atribui a referenda: isso nao cria uma nova copia do objeto. Se quiser fazer uma nova copia de um 
objeto ou array, voce precisa copiar explicitamente as propriedades do objeto ou dos elementos do 
array. Este exemplo demonstra o uso de um la^o for (Se<jao 5.5.3): 

var a=['a','b','c']; //Um array que queremos copiar 

var b = []; // Um array diferente no qual vamos copiar 

for(var i = 0; i < a.length; i++) { // Para cada indice de [] 

b[i] = a[i]; // Copia um elemento de a em b 

} 


Da mesma forma, se queremos comparar dois objetos ou arrays distintos, devemos comparar suas 
propriedades ou seus elementos. Este codigo define uma fun<;ao para comparar dois arrays: 


function equalArrays(a,b) { 

if (a.length != b.length) return false; 

for(var i = 0; i < a.length; i++) 
if (a[i] !== b[i]) return false; 


// Arrays de tamanho diferente nao sao 

// Itera por todos os elementos 
// Se algum difere, os arrays nao sao 

// Caso contrario, eles sao iguais 


3.8 Conversdes de tipo 

A JavaScript e muito flexivel quanto aos tipos de valores que exige. Vimos isso no caso dos boolea- 
nos: quando a JavaScript espera um valor booleano, voce pode fornecer um valor de qualquer tipo 
- ela o convene conforme for necessario. Alguns valores (valores “verdadeiros”) sao convertidos em 
truee outros (valores “falsos”) sao convertidos em false. O mesmo vale para outros tipos: se a Java¬ 
Script quer uma string, ela convene qualquer valor fornecido em uma string. Se a JavaScript quer 
um numero, ela tenta converter o valor fornecido para um numero (ou para NaN, caso nao consiga 
fazer uma conversao significativa). Alguns exemplos: 

10 + " objects" // => "10 objects". 0 numero 10 e convertido em uma string 

"1" * "4" // => 28: as duas strings sao convertidas em numeros 
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var n = 1 - "x"; // => NaN: a string "x" nao pode ser convertida em um numero 

n + " objects " // => "NaN objects": NaN e convertido na string "NaN" 

A Tabela 3-2 resume como os valores sao convertidos de um tipo para outro em JavaScript. As en- 
tradas em negrito na tabela destacam as conversoes que talvez voce ache surpreendentes. As celulas 
vazias indicam que nenhuma conversao e necessaria e nada e feito. 


Tabela 3-2 Conversoes de tipo da JavaScript 


Valor 

Convertido em: 

String 

Numero 

Booleano 

Objeto 

undefined 

"undefined" 

NaN 

false 

lanca TypeEnoi 

null 

"null" 

0 

false 

lanca TypeEnoi 

true 

"true" 

1 


new Boolean(true) 

false 

"false" 

0 


Boolean(false) 

"" (string vazia) 


0 

false 

new String("") 

numerico) 


1.2 

true 

new String("l.2") 

numerico) 


NaN 

true 

new String("one") 

0 

"0" 


false 

new Number(O) 

-0 

"0" 


false 

new Number(-O) 

NaN 

"NaN" 


false 

new Number(NaN) 

Infinity 

"Infinity" 


true 

Number(Infinity) 

-Infinity 

"-Infinity" 


true 

new Number(- 
Infinity) 

l (finito, nao zero) 

"i" 


true 

new Number(l) 

{} (qualquer objeto) 

consulte a Segao 
3.8.3 

consulte a 
Secao 3-8.3 

true 


[] (array vazio) 


0 

true 


[9] (l elt numerico) 

"9" 

9 

true 


['a'] (qualquer outro 
array) 

use o metodo join() 

NaN 

true 


function(){} (qualquer 
funcao) 

consulte a Secao 
3.8.3 

NaN 

true 



As conversoes de valor primitivo para valor primitivo mostradas na tabela sao relativamente simples. 
A conversao para booleano ja foi discutida na Serjao 3.3. A conversao para strings e bem definida 
para todos os valores primitivos. A conversao para numeros e apenas um pouco mais complicada. 
As strings que podem ser analisadas como numeros sao convertidas nesses numeros. Espa^os antes 
e depois sao permitidos, mas qualquer caractere que nao seja espa^o antes ou depois e que nao fa^a 
parte de um literal numerico faz a conversao de string para numero produzir NaN. Algumas conver- 
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soes numericas podem parecer surpreendentes: true e convertido em 1 e false e a string vazia "" sao 
convertidos em 0. 

As conversoes de valor primitivo para objeto sao diretas: os valores primitivos sao convertidos em 
seus objetos wrapper (Secjao 3.6), como se estivessem chamando a construtora String(), Number() 
ou Boolean(). 

As exce^oes sao null e undefined: qualquer tentativa de usar esses valores onde e esperado um objeto 
dispara um TypeError, em vez de realizar uma conversao. 

As conversoes de objeto para valor primitivo sao um pouco mais complicadas e sao o tema da Se^ao 

3.8.3. 


3.8.1 Conversoes e igualdade 

Como JavaScript pode converter valores com flexibilidade, seu operador de igualdade == tambem 
e flexivel em sua no^ao de igualdade. Todas as compara^oes a seguir sao verdadeiras, por exemplo: 


null == undefined 
"O' 1 == 0 
0 == false 
"0" == false 


// Esses dois valores sao tratados como iguais. 

// A string e convertida em um numero antes da comparacao. 
// 0 booleano e convertido em numero antes da comparacao. 
// Os dois operandos sao convertidos em numeros antes da 
// comparacao. 


A Se^ao 4.9.1 explica exatamente quais conversoes sao realizadas pelo operador == para determinar se 
dois valores devem ser considerados iguais e tambem descreve o operador de igualdade restrito ===, 
que nao faz conversoes ao testar a igualdade. 


Lembre-se de que a capacidade de conversao de um valor para outro nao implica na igualdade desses 
dois valores. Se undefined for usado onde e esperado um valor booleano, por exemplo, ele sera con¬ 
vertido em false. Mas isso nao significa que undefined == false. Os operadores e as instrufoes em 
JavaScript esperam valores de varios tipos e fazem as conversoes para esses tipos. A instru<;ao if con¬ 
vene undefined em false, mas o operador == nunca tenta converter seus operandos para booleanos. 


3.8.2 Conversoes explfcitas 

Embora JavaScript fa<;a muitas conversoes de tipo automaticamente, as vezes sera necessario realizar 
uma conversao explicita ou talvez voce prefira usar as conversoes de forma explicita para manter o 
codigo mais claro. 

O modo mais simples de fazer uma conversao de tipo explicita e usar as fun^Ses Boolean(), Number(), 
String() ou 0bject(). Ja vimos essas fun^Ses como construtoras para objetos wrapper (na Se^ao 
3.6). Contudo, quando chamadas sem o operador new, elas funcionam como fun^oes de conversao e 
fazem as conversoes resumidas na Tabela 3-2: 

Number("B'') // => 3 

String(false) // => "false" Ou use false.toStringQ 

Boolean([]) // => verdadeiro 

0bject(3) // => novo Number(3) 



Capi'tulo3 Tipos, valores e variaveis 47 


Note que qualquer valor que nao seja null ou undefined tem um metodo toStringQ e o resultado 
desse metodo normalmente e igual ao retornado pela fun 9 k) String(). Note tambem que aTabela 
3-2 mostra um TypeError se voce tenta converter null ou undefined em um objeto. A fun 910 Ob¬ 
ject! ) n &o levanta uma exce^ao nesse caso: em vez disso, ela simplesmente retorna um objeto vazio 
recentemente criado. 

Certos operadores de JavaScript fazem conversoes de tipo implfcitas e as vezes sao usados para pro- 
positos de conversao de tipo. Se um operando do operador + e uma string, ele converte o outro em 
uma string. O operador unario + converte seu operando em um numero. E o operador unario ! 
converte seu operando em um valor booleano e o nega. Esses fatos levam aos seguintes idiomas de 
conversao de tipo que podem ser vistos em algum codigo: 

x + "" // 0 mesmo que String(x) 

+x // 0 mesmo que Number(x). Voce tambem podera ver x-0 

!!x // 0 mesmo que Boolean(x). Observe 0 duplo ! 

Formatar e analisar numeros sao tarefas comuns em programas de computador e JavaScript tem 
fun^oes e metodos especializados que oferecem controle mais preciso sobre conversoes de numero 
para string e de string para numero. 

O metodo toStringQ definido pela classe Number aceita um argumento opcional que especifica 
uma raiz (ou base) para a conversao. Se o argumento nao e especificado, a conversao e feita na base 
10. Contudo, tambem e possivel converter numeros em outras bases (entre 2 e 36). Por exemplo: 
var n = 17 ; 

binary_string = n.toString(2); // E avaliado como"l000l" 

octal_string = "0" + n.toString(8); // E avaliado como"02l" 
hex_string = "Ox" + n.toString(l6); // E avaliado como"0xll" 


Ao trabalhar com dados financeiros ou cientificos, talvez voce queira converter numeros em strings 
de maneiras que oferefam controle sobre o numero de casas decimals ou sobre o numero de digi- 
tos significativos na saida; ou entao, talvez queira controlar o uso de nota^ao exponential. A classe 
Number define tres metodos para esses tipos de conversoes de numero para string. toFixedQ con¬ 
verte um numero em uma string com um numero especificado de digitos apos a casa decimal. Ele 
nunca usa nota^ao exponencial. toExponentialQ converte um numero em uma string usando nota- 
910 exponencial, com um digito antes da casa decimal e um numero especificado de digitos apos a 
casa decimal (ou seja, o numero de digitos significativos e um a mais do que o valor especificado). 
toPrecisionQ converte um numero em uma string com o numero de digitos significativos especifi¬ 
cado. Ela usa nota^ao exponencial se o numero de digitos significativos nao for grande o suficiente 
para exibir toda a parte inteira do numero. Note que todos os tres metodos arredondam os digitos a 
direita ou preenchem com zeros, conforme for apropriado. Considere os exemplos a seguir: 


var n = 123456.789; 

n.toFixed(O); 

n.toFixed(2); 

n.toFixed(s); 

n.toExponential(l); 

n.toExponential(3); 

n.toPrecision(4); 

n.toPrecision(7); 

n.toPrecision(lO); 


// "123457" 

// "123456.79" 

// "123456.78900" 
// ”l.2e+5" 

// "l.235e+5" 

// "l.235e+5" 

// "123456.8" 

// "123456.7890" 
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Se uma string e passada para a funjao de conversao Number( ), ela tenta analisar essa string como um 
inteiro ou literal em ponto flutuante. Essa funjao so trabalha com inteiros de base 10 e nao permite 
caracteres a direita que nao faijam parte da literal. As funfoes parselnt() e parseFloatQ (essas sao 
fun (joes globais e nao metodos de qualquer classe) sao mais flexiveis. parselnt() analisa somente in¬ 
teiros, enquanto parseFloatQ analisa inteiros e numeros em ponto flutuante. Se uma string comeja 
com “Ox” ou “OX”, parselntQ a interpreta como um niimero hexadecimal 2 . Tanto parselntQ como 
parseFloatQ pulam espajos em branco a esquerda, analisam o maximo de caracteres numericos que 
podem e ignoram tudo que vem em seguida. Se o primeiro caractere que nao e espajo nao faz parte 
de uma literal numerica valida, elas retornam NaN: 


parseInt("B blind mice") 

parseFloat(" 3.14 meters") 

parselnt("-12.34") 

parseInt("OxFF") 

parselnt("0xff”) 

parseInt("-OXFF") 

parseFloat(".i") 

parselnt("0.i") 

parselnt(".i") 

parseFloat("$72.47"); 


// => 3 
// => 3.14 
// => -12 
// => 255 
// => 255 
// => -255 
// => 0.1 
// => 0 

// => NaN: inteiros nao podem come^ar com 
// => NaN: numeros nao podem comecar com "$" 


parselntQ aceita um segundo argumento opcional especificando 
lisado. Os valores validos estao entre 2 e 36. Por exemplo: 


parselnt("ll", 2); 
parselntQff", 16); 
parselntC'zz", 36); 
parselnt("077", 8); 
parselnt("077", 10); 


// => 3 (1*2 + 1) 

// => 255 (15*16 + 15) 
// => 1295 (35*36 + 35) 
// => 63 (7*8 + 7) 

// => 77 (7*10 + 7) 


(base) do niimero a ser ana- 


3.8.3 Conversoes de objeto para valores primitivos 

As conversoes de objeto para valores booleanos sao simples: todos os objetos (inclusive arrays e fun- 
$oes) sao convertidos em true. Isso vale ate para objetos wrapper: new Boolean(false) e um objeto e 
nao um valor primitivo e tambem e convertido em true. 

As conversoes de objeto para string e de objeto para niimero sao feitas chamando-se um metodo do 
objeto a ser convertido. Isso e complicado pelo fato de que os objetos em JavaScript tern dois meto¬ 
dos diferentes que realizam conversoes e tambem e complicado por alguns casos especiais descritos 
a seguir. Note que as regras de conversao de strings e numeros descritas aqui se aplicam apenas a 
objetos nativos. Os objetos hospedeiros (definidos pelos navegadores Web, por exemplo) podem ser 
convertidos em numeros e strings de acordo com seus proprios algoritmos. 


2 Em ECMAScript 3, parselntQ pode analisar uma string que comefa com “0” (mas nao com “Ox” ou “OX”) como um 
niimero octal ou como um niimero decimal. Como o comportamento nao e especificado, voce nunca deve usar parselntQ 
para analisar numeros com zeros a esquerda, a nao ser que especifique explicitamente a raiz a ser usada! Em ECMAScript 5, 
parselntQ so analisa numeros octais se voce passa 8 como segundo argumento explicitamente. 
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Todos os objetos herdam dois metodos de conversao. O primeiro e chamado toStringQ e sua tarefa 
e retornar uma representaqao de string do objeto. O metodo padrao toString( ) nao retorna um valor 
muito interessante (embora o achemos util no Exemplo 6-4): 

({x:l, y:2}) .toStringQ // => "[object Object]" 

Muitas classes definem versoes mais espedficas do metodo toStringQ. O metodo toStringQ da clas- 
se Array, por exemplo, converte cada elemento do array em uma string e une as strings resultantes 
com vfrgulas entre elas. O metodo toStringQ da classe Function retorna uma represen ta$ao definida 
pela implementa?ao de uma funijao. Na pratica, as implementaqdes normalmente convertem as fim- 
foes definidas pelo usuario em strings de codigo-fonte JavaScript. A classe Date define um metodo 
toString( ) que retorna uma string de data e hora legivel para seres humanos (e que pode ser analisa- 
da por JavaScript). A classe RegExp define um metodo toStringQ que converte objetos RegExp em 
uma string semelhante a um literal RegExp: 

[1,2,3].toStringQ // => "1,2,3" 

(function(x) { f(x); }).toStringQ // => "function(x) {\n f(x);\n}" 

/\d+/g.toStringQ // => "/\\d+/g" 

new Date( 2010 , 0 , 1 ).toStringQ // => "Sexta-feira 01 de Janeiro de 2010 00:00:00 

// GMT-0800 (PST)" 



A outra funijao de conversao de objeto e chamada valueOfQ. A tarefa desse metodo e menos bem 
definida: ele deve converter um objeto em um valor primitivo que represente o objeto, caso exista 
tal valor primitivo. Os objetos sao valores compostos e a maioria deles nao pode ser representada 
por um unico valor primitivo; portanto, o metodo padrao valueOf () simplesmente retorna o proprio 
objeto, em vez de retornar um valor primitivo. As classes wrapper definem metodos valueOfQ que 
retornam o valor primitivo empacotado. Os arrays, as fun (joes e as expressoes regulares simplesmente 
herdam o metodo padrao. Chamar valueOfQ para instancias desses tipos simplesmente retorna o 
proprio objeto. A classe Date define um metodo valueOfQ que retorna a data em sua represen tarjao 
interna: o numero de milissegundos desde 1° de janeiro de 1970: 

var d = new Date(2010, 0, l); // l e de janeiro de 2010, (hora do Pacifico) 

d.valueOfQ // => 1262332800000 


Explicados os metodos toStringQ e valueOfQ, podemos agora abordar as conversoes de objeto para 
string e de objeto para numero. Note, contudo, que existem alguns casos especiais nos quais Java¬ 
Script realiza uma conversao diferente de objeto para valor primitivo. Esses casos especiais estao 
abordados no final desta seijao. 

Para converter um objeto em uma string, JavaScript executa estas etapas: 

• Se o objeto tern um metodo toString (), JavaScript o chama. Se ele retorna um valor primitivo, 
JavaScript converte esse valor em uma string (se ja nao for uma string) e retorna o resultado 
dessa conversao. Note que as conversoes de valor primitivo para string estao todas bem defi¬ 
nidas na Tabela 3-2. 

• Se o objeto nao tem metodo toStringQ ou se esse metodo nao retorna um valor primitivo, 
entao JavaScript procura um metodo valueOfQ. Se o metodo existe, JavaScript o chama. Se o 
valor de retorno e primitivo, a JavaScript converte esse valor em uma string (se ainda nao for) 
e retorna o valor convertido. 

• Caso contrario, JavaScript nao pode obter um valor primitivo nem de toStringQ nem de va¬ 
lueOfQ; portanto, lan^a umTypeError. 
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Para converter um objeto em um numero, JavaScript faz a mesma coisa, mas tenta primeiro o me- 
todo valueOfQ: 

• Se o objeto tem um metodo valueOf () que retorna um valor primitivo, JavaScript convene (se 
necessario) esse valor primitivo em um numero e retorna o resultado. 

• Caso contrario, se o objeto tem um metodo toString() que retorna um valor primitivo, Java¬ 
Script convene e retorna o valor. 

• Caso contrario, JavaScript lan^a um TypeError. 

Os detalhes dessa conversao de objeto para numero explicam porque um array vazio e convertido no 
numero 0 e porque um array com um unico elemento tambem pode ser convertido em um numero. 
Os arrays herdam o metodo padrao valueOf() que retorna um objeto, em vez de um valor primitivo, 
de modo que a conversao de array para numero conta com o metodo toStringQ. Os arrays vazios 
sao convertidos na string vazia. E a string vazia e convertida no numero 0. Um array com um unico 
elemento e convertido na mesma string em que esse unico elemento e convertido. Se um array con¬ 
tent um unico numero, esse numero e convertido em uma string e, entao, de volta para um numero. 

Em JavaScript, o operador + efetua adi^ao numerica e concatena^ao de strings. Se um de seus ope- 
randos e um objeto, JavaScript convene o objeto usando uma conversao de objeto para valor primi¬ 
tivo especial, em vez da conversao de objeto para numero utilizada pelos outros operadores aritme- 
ticos. O operador de igualdade == e semelhante. Se solicitado a comparar um objeto com um valor 
primitivo, ele convene o objeto usando a conversao de objeto para valor primitivo. 

A conversao de objeto para valor primitivo utilizada por + e == inclui um caso especial para objetos 
Date. A classe Date e o unico tipo predefinido de JavaScript basica que define conversoes signifi- 
cativas para snings e para numeros. A conversao de objeto para valor primitivo e basicamente uma 
conversao de objeto para numero (valueof () primeiro) para todos os objetos que nao sao datas e uma 
conversao de objeto para string (toStringQ primeiro) para objetos Date. Contudo, a conversao nao 
e exatamente igual aquelas explicadas anteriormente: o valor primitivo retornado por valueOfQ ou 
por toStringQ e usado diretamente, sem ser for^ado a ser um numero ou uma string. 

O operador < e os outros operadores relacionais realizam conversoes de objeto para valores primiti¬ 
ves, assim como ==, mas sem o caso especial para objetos Date: todo objeto e convertido tentando 
valueOfQ primeiro e depois toStringQ. Seja qual for o valor primitivo obtido, e utilizado diretamen¬ 
te sem ser convertido em um numero ou em uma string. 

+, ==, ! = e os operadores relacionais sao os unicos que realizam esses tipos especiais de conversoes 
de string para valores primitivos. Os outros operadores convertem mais explicitamente para um 
tipo especificado e nao tem qualquer caso especial para objetos Date. O operador -, por exemplo, 
converte seus operandos em numeros. O codigo a seguir demonstra o comportamento de +, -, == e 
> com objetos Date: 

var now = new DateQ; // Cria um objeto Date 

typeof (now + l) // => "string": + converte datas em strings 

typeof (now - l) // => "number": - usa conversao de objeto para numero 
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now == now.toString() // => verdadeiro: conversoes de string implicitas e explicitas 
now > (now -l) // => verdadeiro: > converte um objeto Date em numero 


3.9 Dedara^aode variavel 

Antes de utilizar uma variavel em um programa JavaScript, voce deve declara-la. As variaveis sao 
declaradas com a palavra-chave var, como segue: 



Tambem e possivel declarar varias variaveis com a mesma palavra-chave var: 


E pode-se combinar a declarapio da variavel com sua inicializa^ao: 
var message = "hello"; 
var i = 0, j = 0, k = 0; 

Se nao for especificado um valor inicial para uma variavel com a instrupio var, a variavel sera decla- 
rada, mas seu valor sera undefined ate que o codigo armazene um valor nela. 

Note que a instrupio var tambem pode aparecer como parte dos lapis for e for/in (apresentados no 
Capitulo 5), permitindo declarar a variavel do lap> sucintamente como parte da propria sintaxe do 
lap>. Por exemplo: 

for(var i = 0; i < 10; i++) console.log(i); 

for(var i = 0, j=i0; i < 10; i++,j--) console.log(i*j); 

for(var p in o) console.log(p); 

Se voce esta acostumado com linguagens tipadas estaticamente, como C ou Java, tera notado que 
nao existe tipo algum associado as declara?6es de variavel em JavaScript. Uma variavel em JavaScript 
pode conter um valor de qualquer tipo. Por exemplo, em JavaScript e perfeitamente valido atribuir 
um numero a uma variavel e posteriormente atribuir uma string a essa variavel: 
var i = 10; 


3.9.1 Dedara^oes repetidas e omitidas 

E valido e inofensivo declarar uma variavel mais de uma vez com a instrupio var. Se a declarapio 
repetida tern um inicializador, ela atua como se fosse simplesmente uma instrupio de atribuipio. 

Se voce tenta ler o valor de uma variavel nao declarada, JavaScript gera um erro. No modo restrito 
de ECMAScript 5 (Sepio 5.7.3), tambem e um erro atribuir um valor a uma variavel nao declarada. 
Elistoricamente, contudo, e no modo nao restrito, se voce atribui um valor a uma variavel nao de¬ 
clarada, JavaScript cria essa variavel como uma propriedade do objeto global e ela funciona de forma 
muito parecida (mas nao exatamente igual, consulte a Sepio 3.10.2) a uma variavel global declarada 
corretamente. Isso significa que voce pode deixar suas variaveis globais sem declarapio. No entanto, 
esse e um habito ruim e uma fonte de erros - voce sempre deve declarar suas variaveis com var. 
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3.10 Escopo de variavel 

O escopo de uma variavel e a regiao do codigo-fonte de seu programa em que ela esta definida. Uma 
variavel global tem escopo global; ela esta definida em toda parte de seu codigo JavaScript. Por ou- 
tro lado, as variaveis declaradas dentro de uma firn^ao estao definidas somente dentro do corpo da 
funijao. Elas sao variaveis locais e tem escopo local. Os parametros de fiin^ao tambem contam como 
variaveis locais e estao definidos somente dentro do corpo da fiinqao. 


Dentro do corpo de uma fun^ao, uma variavel local tem precedencia sobre uma variavel global com 
o mesmo nome. Se voce declara uma variavel local ou um parametro de funijao com o mesmo nome 
de uma variavel global, ela efetivamente oculta a variavel global: 


var scope = "global"; 
function checkscopeQ { 
var scope = "local"; 
return scope; 

} 

checkscopeQ 


// Declara uma variavel global 

// Declara uma variavel local com o mesmo nome 
// Retorna o valor local, nao o global 


Embora seja possivel nao utilizar a instru^ao var ao escrever codigo no escopo global, var sempre 
deve ser usada para declarar variaveis locais. Considere o que acontece se voce nao faz isso: 


scope = "global"; 
function checkscope2() { 
scope = "local"; 
myscope = "local"; 
return [scope, myscope]; 

} 

checkscope2() 

myscope 


// Declara uma variavel global, mesmo sem var. 

// Opa! Simplesmente alteramos a variavel global. 

// Isso declara uma nova variavel global implicitamente. 
// Retorna dois valores. 

// => ["local", "local"]: tem efeitos colaterais! 

// => "local": a variavel global mudou. 

// => "local": namespace global desordenado. 


As defini^oes de furuQo podem ser aninhadas. Cada fiinfao tem seu proprio escopo local; portanto, 
e possivel ter varias camadas de escopo local aninhadas. Por exemplo: 


var scope = "global scope"; 
function checkscopeQ { 

var scope = "local scope"; 
function nestedQ { 

var scope = "nested scope"; 
return scope; 

} 

return nestedQ; 

} 

checkscopeQ 


// Uma variavel global 

// Uma variavel local 

// Um escopo aninhado de variaveis locais 
// Retorna o valor em scope aqui 


3.10.1 Escopo defun$aoei$amento 

Em algumas linguagens de programa^ao semelhantes ao C, cada bloco de codigo dentro de chaves 
tem seu escopo proprio e as variaveis nao sao visiveis fora do bloco em que sao declaradas. Isso e 
chamado de escopo de bloco e JavaScript nao tem esse conceito. Em vez disso, JavaScript utiliza escopo 
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de fimpdo: as variaveis sao visi'veis dentro da funpio em que sao definidas e dentxo de qualquer funpio 
que esteja aninhada dentro dessa funpio. 


No codigo a seguir, as variaveis i, j e k sao declaradas em diferentes pontos, mas todas tem o mesmo 
escopo - todas as tres estao definidas para todo o corpo da funcao: 


function test(o) { 
var i = 0; 

if (typeof o == "object") { 
var j = o; 

for(var k=0; k < 10; k++) { 
console.log(k); 

} 

console.log(k); 

} 

console.log(j); 


// i esta definida para toda a funcao 

// j esta definida por toda parte e nao apenas no 
// bloco 

// k esta definida por toda parte e nao apenas no 

// imprime os numeros de 0 a 9 

// k ainda esta definida: imprime 10 

// j esta definida, mas nao pode ser inicializada 


O escopo de funcao em JavaScript significa que todas as variaveis declaradas dentro de uma fun$ao 
sao visiveis por todo o corpo da funpio. Curiosamente, isso significa que as variaveis sao visiveis mesmo 
antes de serem declaradas. Essa caracterfstica de JavaScript e informalmente conhecida como ipamento: 
o codigo JavaScript se comporta como se todas as declarapies de variavel em uma funpio (mas nao em 
qualquer atribuipio associada) fossem “ipidas” para o topo da funpio. Considere o codigo a seguir: 
var scope = "global"; 
function f() { 

console.log(scope); // Imprime "undefined" e nao "global" 

var scope = "local"; // Variavel inicializada aqui, mas definida por toda 

// parte console.log(scope); 

// Imprime "local" 

} 


Voce poderia pensar que a primeira linha da funpio imprimiria “global”, pois a instrupio var que de- 
clara a variavel local ainda nao foi executada. Contudo, devido as regras de escopo de funcao, nao e 
isso que acontece. A variavel local esta definida em todo o corpo da funpio, ou seja, a variavel global 
de mesmo nome fica oculta por toda a funcao. Embora a variavel local seja definida em toda parte, 
ela nao e inicializada ate que a instrupio var seja executada. Assim, a funpio anterior e equivalente a 
seguinte, na qual a declarapio da variavel e “ipida” para o topo e a inicializapio da variavel e deixada 
onde esta: 


function f() { 

console.log(scope); 
scope = "local"; 
console.log(scope); 


// A variavel local e declarada no topo da funcao 
// Ela existe aqui, mas ainda tem valor "indefinido" 
// Agora a inicializamos e fornecemos a ela urn valor 
// E aqui ela tem o valor que esperamos 


Nas linguagens de programapio com escopo de bloco, geralmente e considerada uma boa pratica de 
programapio declarar as variaveis o mais proximo possivel de onde elas sao usadas e com o escopo 
mais limitado possivel. Como JavaScript nao tem escopo de bloco, alguns programadores fazem 
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questao de declarar todas as suas variaveis no inicio da funijao, em vez de tentar declara-las mais 
proximas ao ponto em que sao utilizadas. Essa tecnica faz o codigo-fonte refletir precisamente o 
verdadeiro escopo das variaveis. 


3.10.2 Variaveis como propriedades 


Quando se declara uma variavel global em JavaScript, o que se esta fazendo realmente e definindo 
uma propriedade do objeto global (Se^ao 3.5). Se var e utilizada para declarar a variavel, a proprie- 
dade criada nao pode ser configurada (consulte a Secjao 6.7), ou seja, nao pode ser excluida com o 
operador delete. Ja observamos que, se o modo restrito nao esta sendo usado e um valor e atribuido 
a uma variavel nao declarada, JavaScript cria uma variavel global automaticamente. As variaveis cria- 
das dessa maneira sao propriedades normais e configuraveis do objeto global e podem ser excluidas: 


r truevar = 


fakevar = 2; 
this.fakevar2 = 3; 
delete truevar 
delete fakevar 
delete this.fakevar2 


// Uma variavel global declarada corretamente e que nao pode ser 
// excluida. 

// Cria uma propriedade que pode ser excluida do objeto global. 
// Isso faz a mesma coisa. 

// => falso: a variavel nao e excluida 
// => verdadeiro: a variavel e excluida 
// => verdadeiro: a variavel e excluida 


As variaveis globais em JavaScript sao propriedades do objeto global e isso e imposto pela especifi- 
ca^ao ECMAScript. Nao existe esse requisito para variaveis locais, mas voce pode imaginar as varia¬ 
veis locais como propriedades de um objeto associado a cada chamada de funcjao. A especifica<jao 
ECMAScript 3 se referia a esse objeto como “objeto de chamada” e a especificacjao ECMAScript 5 
o chama de “registro declarado do ambiente de execu^ao”. JavaScript nos permite fazer referenda ao 
objeto global com a palavra-chave this, mas nao nos fornece qualquer maneira de referenciar o obje¬ 
to no qual as variaveis locais sao armazenadas. A natureza precisa desses objetos que content variaveis 
locais e um detalhe da implementaQo que nao precisa nos preocupar. Contudo, a ideia de que esses 
objetos de variavel local existem e importante e isso sera mais bem explicado na proxima secjao. 


3.10.3 0 encadeamento de escopo 

JavaScript e uma linguagem com escopo lexico\ o escopo de uma variavel pode ser considerado como 
o conjunto de linhas de codigo-fonte para as quais a variavel esta definida. As variaveis globais estao 
definidas para todo o programa. As variaveis locais estao definidas para toda a fun^ao na qual sao 
declaradas e tambem dentro de qualquer ftunjao aninhada dentro dessa fiunjao. 

Se pensarmos nas variaveis locais como propriedades de algum tipo de objeto definido pela imple- 
menta^ao, entao ha outro modo de considerarmos o escopo das variaveis. Cada trecho de codigo 
JavaScript (codigo ou fun (joes globais) tern um encadeamento de escopo associado. Esse encadeamento 
de escopo e uma lista ou encadeamento de objetos que define as variaveis que estao “no escopo” para 
esse codigo. Quando JavaScript precisa pesquisar o valor de uma variavel x (um processo chamado 
solugao de variavel ), ela comeija examinando o primeiro objeto do encadeamento. Se esse objeto tern 
uma propriedade chamada x, o valor dessa propriedade e usado. Se o primeiro objeto nao tern uma 
propriedade chamada x, JavaScript continua a busca no proximo objeto do encadeamento. Se o se- 
gundo objeto nao tem uma propriedade chamada x, a busca passa para o objeto seguinte e assim por 
diante. Se x nao for uma propriedade de nenhum dos objetos do encadeamento de escopo, entao x 
nao esta no escopo desse codigo e ocorre um ReferenceError. 
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No codigo JavaScript de nfvel superior (isto e, codigo nao contido dentro de qualquer definipio de 
funpio), o encadeamento de escopo consiste em um unico objeto, o objeto global. Em uma fun¬ 
pio nao aninhada, o encadeamento de escopo consiste em dois objetos. O primeiro e o objeto que 
define os parametros e as variaveis locais da funpio e o segundo e o objeto global. Em uma funpio 
aninhada, o encadeamento de escopo tern tres ou mais objetos. E importante entender como esse 
encadeamento de objetos e criado. Quando uma fun^ao e definida, ela armazena o encadeamento de 
escopo que esta em vigor. Quando essa funpio e chamada, ela cria um novo objeto para armazenar 
suas variaveis locais e adiciona esse novo objeto no encadeamento de escopo armazenado para criar 
um novo encadeamento maior, representando o escopo dessa chamada de funpio. Isso se torna mais 
interessante para fun pies aninhadas, pois sempre que a funpio externa e chamada, a funpio interna 
e novamente definida. Como o encadeamento de escopo e diferente em cada chamada da funQo 
externa, a funpio interna vai ser ligeiramente diferente cada vez que for definida - o codigo da fun¬ 
pio interna vai ser identico em cada chamada da fun^ao externa, mas o encadeamento de escopo 
associado a esse codigo vai ser diferente. 

Essa ideia de encadeamento de escopo e util para se entender a instrupio with (Sepio 5.7.1) e funda¬ 
mental para se entender os fechamentos (Sepio 8.6). 




Capi'tulo 4 

Expressoes e operadores 


Uma expressao e uma frase de codigo JavaScript que um interpretador JavaScript pode avaliar para 
produzir um valor. Uma constante literalmente incorporada em seu programa e um tipo de expres¬ 
sao muito simples. Um nome de variavel tambem e uma expressao simples, avaliada com o valor 
atribuido a essa variavel. Expressoes complexas sao formadas a partir de expressoes mais simples. 
Uma expressao de acesso a array, por exemplo, consiste em uma expressao avaliada como um array, 
seguida de um colchete de abertura, uma expressao avaliada como um inteiro e um colchete de 
fechamento. Essa nova expressao mais complexa e avaliada com o valor armazenado no indice espe- 
cificado do array especificado. Da mesma forma, uma expressao de chamada de funqao consiste em 
uma expressao avaliada como um objeto de funqao e zero ou mais expressoes adicionais, utilizadas 
como argumentos da funqao. 

A maneira mais comum de construir uma expressao complexa a partir de expressoes mais sim¬ 
ples e com um operador. Um operador combina os valores de seus operandos (normalmente, dois 
deles) de algum modo e e avaliada como um novo valor. O operador de multiplicafao * e um 
exemplo simples. A expressao x * ye avaliada como o produto dos valores das expressoes x e y. 
Por simplicidade, as vezes dizemos que um operador retoma um valor, em vez de “e avaliado como” 
um valor. 

Este capitulo documenta todos os operadores JavaScript e tambem explica as expressoes (como in- 
dexa^ao de array e chamada de funfao) que nao utilizam operadores. Se voce ja conhece outra lin- 
guagem de programa?ao que utiliza sintaxe estilo C, vai ver que a sintaxe da maioria das expressoes 
e operadores em JavaScript e familiar. 


4.1 Expressoes primarias 

As expressoes mais simples, conhecidas como expressoes primarias, sao autonomas - elas nao incluem 
outras expressoes mais simples. Em JavaScript, as expressoes primarias sao valores constantes ou 
literals, certas palavras-chave da linguagem e referencias a variaveis. 
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Os literais sao valores constantes incorporados diretamente em seu programa. Sao como segue: 

1.23 // Urn numero literal 

"hello" // Uma string literal 

/pattern/ // Uma expressao regular literal 


A sintaxe de JavaScript para numeros literais foi abordada na Secjao 3.1. As strings literais foram do- 
cumentadas na Secjao 3.2. A sintaxe da expressao regular literal foi apresentada na Se^ao 3.2.4 e sera 
documentada em detalhes no Capitulo 10. 



Algumas das palavras reservadas de JavaScript sao expressoes primarias: 


false 

null 

this 


// E avaliado 
// E avaliado 
// E avaliado 
// E avaliado 


valor booleano true 
valor booleano false 
valor null 
objeto "atual" 


Aprendemos sobre true, false e null na Se^ao 3.3 e na Se^ao 3.4. Ao contrario das outras palavras- 
-chave, this nao e uma constante - ela e avaliada como diferentes valores em diferentes lugares no 
programa. A palavra-chave this e utilizada na programa?ao orientada a objetos. Dentro do corpo de 
um metodo, this e avaliada como o objeto no qual o metodo foi chamado. Consulte a Se^ao 4.5, o 
Capitulo 8 (especialmente a Se^ao 8.2.2) e o Capitulo 9 para mais informaqdes sobre this. 


Por fim, o terceiro tipo de expressao primaria e a referenda a variavel simples: 

i lit avaliada como o valor da variavel i. 

sum // E avaliada como o valor da variavel sum. 

undefined // undefined e uma variavel global e nao uma palavra-chave como null. 


Quando qualquer identificador aparece sozinho em um programa, JavaScript presume que se trata 
de uma variavel e procura seu valor. Se nao existe variavel alguma com esse nome, a expressao e 
avaliada com o valor undefined. No modo restrito de ECMAScript 5, entretanto, uma tentativa de 
avaliar com uma variavel inexistente lanija um ReferenceError. 


4.2 Inicializadores de objeto e array 

Os inicializadores de objeto e array sao expressoes cujo valor e um objeto ou array recem-criado. 
Essas expressoes inicializadoras as vezes sao chamadas de “objetos literais” e “array literais.” Contudo, 
ao contrario dos verdadeiros literais, elas nao sao expressoes primarias, pois incluem varias subex- 
pressoes que especificam valores de propriedade e elemento. Os inicializadores de array tern uma 
sintaxe um pouco mais simples e vamos come^ar com eles. 

Um inicializador de array e uma lista de expressoes separadas com virgulas e contidas em colchetes. 
O valor de um inicializador de array e um array recem-criado. Os elementos desse novo array sao 
inicializados com os valores das expressoes separadas com virgulas: 

[] // Um array vazio: nenhuma expressao dentro dos colchetes significa nenhum 

// elemento 

[1+2,3+4] // Um array de 2 elementos. 0 primeiro elemento e 3, o segundo e 7 
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As expressoes de elemento em um inicializador de array podem ser elas proprias inicializadoras de 
array, ou seja, essas expressoes podem criar arrays aninhados: 
var matrix = [[1,2,3], [4,5,6], [7,8,9]]; 

As expressoes de elementos em um inicializador de array sao avaliadas sempre que o inicializador de 
array e avaliado. Isso significa que o valor de uma expressao inicializadora de array pode ser diferente 
a cada vez que for avaliada. 

Elementos indefinidos podem ser incluidos em um array literal simplesmente omitindo-se um valor 
entre virgulas. Por exemplo, o array a seguir content cinco elementos, incluindo tres indefinidos: 
var sparseArray = [l,,,,5]; 

Uma unica virgula a direita e permitida apos a ultima expressao em um inicializador de array e ela 
nao cria um elemento indefinido. 

As expressoes inicializadoras de objeto sao como as expressoes inicializadoras de array, mas os col- 
chetes sao substitufdos por chaves e cada subexpressao e prefixada com um nome de propriedade e 
dois-pontos: 

var p = { x:2.3, y:-1.2 }; // Um objeto com 2 propriedades 

var q = {}; // Um objeto vazio sem propriedades 

q.x = 2.3; q.y = -1.2; // Agora q tern as mesmas propriedades de p 

Objetos literals podem ser aninhados. Por exemplo: 

var rectangle = { upperLeft: { x: 2, y: 2 }, 
lowerRight: { x: 4, y: 5 } }; 

As expressoes de um inicializador de objeto sao avaliadas sempre que o inicializador e avaliado e nao 
precisam ter valores constantes - podem ser expressoes JavaScript arbitrarias. Alem disso, os nomes 
de propriedade em objetos literals podem ser strings, em vez de identificadores (isso e util para espe- 
cificar nomes de propriedades que sao palavras reservadas ou que sao identificadores invalidos por 
algum motivo): 

var square = { "upperLeft": { x: p.x, y: p.y }, 

'lowerRight': { x: p.x + side, y: p.y + side}}; 

Vamos ver os inicializadores de objeto e de array novamente nos capitulos 6 e 7. 

4.3 Expressoes de defini^ao de fun^ao 

Uma expressao de definifao de funfao define uma funijao JavaScript e o valor de tal expressao e a 
funfao recem-definida. De certo modo, uma expressao de defini^ao de funfao e uma “funijao lite¬ 
ral”, da mesma maneira que um inicializador de objeto e um “objeto literal”. Normalmente, uma 
expressao de definifao de fun^ao consiste na palavra-chave function seguida de uma lista separada 
com virgulas de zero ou mais identificadores (os nomes de parametro) entre parenteses e um bloco 
de codigo JavaScript (o corpo da funfao) entre chaves. Por exemplo: 

// Esta funqao retorna o quadrado do valor passado a ela. 
var square = function(x) { return x * x; } 
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Uma expressao de definipio de funijao tambem pode incluir um nome para a funijao. As fun foes 
tambem podem ser definidas com uma instrufao de funfao, em vez de uma expressao de funijao. 
Detalhes completos sobre definifao de fun910 aparecem no Capftulo 8. 


4.4 Expressoes de acesso a propriedade 

Uma expressao de acesso a propriedade e avaliada com o valor de uma propriedade de objeto ou de 
um elemento de array. JavaScript define duas sintaxes para acesso a propriedade: 

expressao . identificador 
expressao [ expressao ] 


O primeiro estilo de acesso a propriedade e uma expressao seguida de um ponto-final e um identi¬ 
ficador. A expressao especifica o objeto e o identificador especifica o nome da propriedade desejada. 
O segundo estilo de acesso a propriedade tern outra expressao entre colchetes apos a primeira (o 
objeto ou array). Essa segunda expressao especifica o nome da propriedade desejada ou o fndice do 
elemento do array desejado. Aqui estao alguns exemplos concretos: 


var 0 = {x:l,y:{z:3}}; // Um 

var a = [0,4,[5,6]]; // Um 

o.y.z // => 

o[" x "] // => 

a[i] // => 

a[2]["i"] // => 

a[0].x // => 


exemplo de objeto 

exemplo de array que contem 0 objeto 
1: propriedade x da expressao 0 
3: propriedade z da expressao o.y 
1: propriedade x do objeto 0 
4: elemento no indice 1 da expressao a 
6: elemento no indice 1 da expressao a[2] 
1: propriedade x da expressao a[0] 


Com um ou outro tipo de expressao de acesso a propriedade, a expressao anterior ao . ou ao [ e ava¬ 
liada primeiro. Se o valor e null ou undefined, a expressao lanrja uma excefao TypeError, pois esses 
sao os dois valores de JavaScript que nao podem ter propriedades. Se o valor nao e um objeto (ou ar¬ 
ray), ele e convertido em um (consulte a Sefao 3.6). Se a expressao do objeto e seguida por um ponto 
e um identificador, o valor da propriedade nomeada por esse identificador e pesquisada e se torna 
o valor global da expressao. Se a expressao do objeto e seguida por outra expressao entre colchetes, 
essa segunda expressao e avaliada e convertida em uma string. Entao, o valor global da expressao e o 
valor da propriedade nomeada por essa string. Em um ou outro caso, se a propriedade nomeada nao 
existe, o valor da expressao de acesso a propriedade e undefined. 


A sintaxe . identificador e a mais simples das duas opfoes de acesso a propriedade, mas note que 
ela so pode ser usada quando a propriedade que se deseja acessar tem um nome que e um iden¬ 
tificador valido e quando se sabe o nome ao escrever o programa. Se o nome da propriedade e 
uma palavra reservada ou contem espa?os ou caracteres de pontua^ao, ou quando e um numero 
(para arrays), deve-se usar a notafao de colchetes. Os colchetes tambem sao usados quando o 
nome da propriedade nao e estatico, mas sim o resultado de um calculo (consulte a Se^ao 6.2.1 
para ver um exemplo). 


Os objetos e suas propriedades sao abordados em detalhes no Capftulo 6 e os arrays e seus ele- 
mentos sao abordados no Capftulo 7. 




60 Parte I JavaScript basica 


4.5 Expressoes de invoca^ao 


Uma expressao de invocagao e uma sintaxe de JavaScript para chamar (ou executar) uma fun^ao ou 
um metodo. Ela come^a com uma expressao de fungio que identifica a fungio a ser chamada. A 
expressao de furujao e seguida por um parentese de abertura, uma lista separada com vfrgulas de zero 
ou mais expressoes de argumento e um parentese de fechamento. Alguns exemplos: 


f(0) 

Math.max(x,y,z) 
a.sort() 


// f e a expressao de funcaoj 0 e a expressao de argumento. 
// Math.max e a fun^ao; x, y e z sao os argumentos. 

// a.sort e a fun<;ao; nao ha argumentos. 


Quando uma expressao de invocagao e avaliada, a expressao de fun^ao e avaliada primeiro e depois 
as expressoes de argumento sao avaliadas para produzir uma lista de valores de argumento. Se o valor 
da expressao de fungio nao e um objeto que possa ser chamado, e langido um TypeError. (Todas as 
funfoes podem ser chamadas. Objetos hospedeiros tambem podem ser chamados, mesmo que nao 
sejam funqdes. Essa distingio e explorada na Segio 8.7.7.) Em seguida, os valores de argumento sao 
atribufdos, em ordem, aos nomes de parametro especificados quando a fungio foi definida e, entao, 
o corpo da funfao e executado. Se a funfao utiliza uma instru^ao return para retornar um valor, 
entao esse valor se torna o valor da expressao de invoca^ao. Caso contrario, o valor da expressao de 
invoca$ao e undefined. Detalhes completos sobre invoca^ao de funijao, incluindo uma explica^ao 
sobre o que acontece quando o numero de expressoes de argumento nao corresponde ao niimero de 
parametros na definiijao da funijao, estao no Capitulo 8. 

Toda expressao de invoca?ao contem um par de parenteses e uma expressao antes do parentese de 
abertura. Se essa expressao e uma expressao de acesso a propriedade, entao a chamada e conhecida 
como invocagao de metodo. Nas invoca^oes de metodo, o objeto ou array sujeito ao acesso a pro¬ 
priedade se torna o valor do parametro this enquanto o corpo da fun^ao esta sendo executado. Isso 
permite um paradigma de program agio orientada a objetos no qual as fun^oes (conhecidas por seus 
nomes na OO, “metodos”) operam sobre o objeto do qual fazem parte. Consulte o Capitulo 9 para 
ver os detalhes. 

As expressoes de invoca^oes que nao sao invoca^oes de metodo normalmente utilizam o objeto glo¬ 
bal como valor da palavra-chave this. Em ECMAScript 5, contudo, as fumjoes definidas no modo 
restrito sao invocadas com undefined como valor de this, em vez do objeto global. Consulte a Segio 
5.7.3 para mais informafoes sobre o modo restrito. 


4.6 Expressoes de cria^ao de objeto 


Uma expressao de criagdo de objeto gera um novo objeto e chama uma fungio (denominada constru- 
tora) para inicializar as propriedades desse objeto. As expressoes de criagio de objeto sao como as 
expressoes de chamada, exceto que sao prefixadas com a palavra-chave new: 

new ObjectQ 
new Point(2,3) 
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Se nenhum argumento e passado para a fun^ao construtora em uma expressao de cria^ao de objeto, 
o par de parenteses vazio pode ser omitido: 
new Object 
new Date 

Quando uma expressao de cria?ao de objeto e avaliada, JavaScript cria primeiro um novo objeto va¬ 
zio, exatamente como aquele criado pelo inicializador de objetos {}. Em seguida, ela chama a fun^ao 
especificada com os argumentos especificados, passando o novo objeto como valor da palavra-chave 
this. Entao, a fun<;ao pode usar this para inicializar as propriedades do objeto recem-criado. As fun- 
foes escritas para uso como construtoras nao retornam um valor e o valor da expressao de cria^ao de 
objeto e o objeto recem-criado e inicializado. Se uma fun^ao construtora retorna um valor de objeto, 
esse valor se torna o valor da expressao de cria^ao de objeto e o objeto recem-criado e descartado. 

As construtoras estao explicadas com mais detalhes no Capitulo 9. 

4.7 Visao geral dos operadores 

Os operadores sao utilizados em JavaScript para expressoes aritmeticas, expressoes de compara^ao, 
expressoes logicas, expressoes de atribui^ao e muito mais. ATabela 4-1 resume os operadores e serve 
como uma conveniente referenda. 

Note que a maioria dos operadores e representada por caracteres de pontua^ao, como + e =. Al- 
guns, entretanto, sao representados por palavras-chave como delete e instanceof. Os operadores de 
palavra-chave sao operadores regulares, assim como aqueles expressos com pontua^ao; eles apenas 
tern uma sintaxe menos sucinta. 

ATabela 4-1 esta organizada por precedencia de operador. Os operadores listados primeiro tern pre¬ 
cedence mais alta do que os listados por ultimo. Os operadores separados por uma linha horizontal 
tem nfveis de precedencia diferentes. A coluna A mostra a associatividade do operador, a qual pode 
ser E (esquerda para a direita) ou D (direita para a esquerda) e a coluna N especifica o numero de 
operandos. A coluna Tipos lista os tipos esperados dos operandos e (apos o simbolo —») o tipo de 
resultado do operador. As subse^oes apos a tabela explicam as no?6es de precedencia, associatividade 
e tipo de operando. Os operadores estao documentados individualmente depois dessa discussao. 


Tabela 4-1 Operadores em JavaScript 
Operador Opera^ao 

++ Pre- ou pos-incremento 

Pre- ou pos-decremento 
Nega o numero 

+ Converte para numero 

Inverte bits 

! Inverte valor booleano 


A N Tipos 

D 1 lval->num 

D 1 lval->num 

D 1 num->num 

D 1 num->num 

D 1 int->int 

D 1 bool->bool 
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Tabela4-1 Operadores da JavaScript (Continuatfo) 

Operador 

Operacao 

A 

N Tipos 

delete 

Remove uma propriedade 

D 

l lval->bool 

typeof 

Determina o tipo de operando 

D 

1 qualquer->str 

void 

Retorna valor indefinido 

D 

1 qualquer-nndef 

*, /, % 

Multiplica, divide, resto 

E 

2 num,num->num 

+, - 

Soma, subtrai 

E 

2 num,num->num 

+ 

Concatena strings 

E 

2 str, str->str 

« 

Desloca para a esquerda 

E 

2 int,int->int 


Desloca para a direita com 
extensao de sinal 

E 

2 int,int->int 

»> 

Desloca para a direita com 
extensao zero 

E 

2 int,int-»int 

<, <=,>, >= 

Compara em ordem numerica 

E 

2 num,num->bool 

<, <=,>, >= 

Compara em ordem alfabetica 

E 

2 str,str->bool 

instanceof 

Testa classe de objeto 

E 

2 obj,-fun->bool 

in 

Testa se a propriedade existe 

E 

2 str,obj->bool 

== 

Testa a igualdade 

E 

2 qualquer,qualquer->bool 

! = 

Testa a desigualdade 

E 

2 qualquer,qualquer->bool 

=== 

Testa a igualdade restrita 

E 

2 qualquer,qualquer->bool 

!== 

Testa a desigualdade restrita 

E 

2 qualquer,qualquer->bool 

& 

Calcula E bit a bit 

E 

2 int,int->int 

* 

Calcula XOR bit a bit 

E 

2 int,int->int 

1 

Calcula OU bit a bit 

E 

2 int,int->int 

&& 

Calcula E logico 

E 

2 qualquer,qualquer->qualquer 

II 

Calcula OU logico 

E 

2 qualquer,qualquer->qualquer 

?: 

Escolhe 22 ou 3 s operando 

D 

3 bool, qualquer,qualquer->qualquer 

= 

Atribui a uma variavel ou 
propriedade 

D 

2 lval,qualquer->qualquer 

*=, /=, %=, +=, 

Opera e atribui 

D 

2 lval,qualquer->qualquer 


Descarta l 2 operando, retorna 
o segundo 

E 

2 qualquer,qualquer-»qualquer 
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4.7.1 Numerode operandos 

Os operadores podem ser classificados de acordo com o mimero de operandos que esperam (sua ari- 
dade). A maioria dos operadores JavaScript, como o operador de multiplica^ao *, e de operadores bi- 
narios, que combinam duas expressoes em uma mais complexa. Isto e, eles esperam dois operandos. 
JavaScript tambem aceita diversos operadores unarios, os quais convertem uma expressao em uma 
outra mais complexa. O operador - na expressao -x e um operador unario que efetua a opera^ao de 
nega?ao no operando x. Por fim, JavaScript aceita um operador ternario, o operador conditional ?:, 
que combina tres expressoes em uma. 

4.7.2 Tipode operando ederesultado 

Alguns operadores trabalham com valores de qualquer tipo, mas a maioria espera que seus operan¬ 
dos sejam de um tipo especffico. E a maioria retorna (ou e avaliada como) um valor de um tipo 
especffico. A colunaTipos daTabela 4-1 especifica os tipos de operando (antes da seta) e o tipo do 
resultado (apos a seta) dos operadores. 

Os operadores JavaScript normalmente convertem o tipo (consulte a Secjao 3.8) de seus operandos 
conforme o necessario. O operador de multiplica^ao * espera operandos numericos, mas a expressao 
"3" * "5" e valida, pois JavaScript pode converter os operandos em niimeros. O valor dessa expressao 
e o mimero 15 e nao a string “15”, evidentemente. Lembre-se tambem de que todo valor em JavaS¬ 
cript e “verdadeiro” ou “falso”; portanto, os operadores que esperam operandos booleanos fiinciona- 
rao com um operando de qualquer tipo. 

Alguns operadores se comportam de formas diferentes, dependendo do tipo dos operandos utiliza- 
dos. Mais notadamente, o operador + soma operandos numericos, mas concatena operandos string. 
Da mesma forma, os operadores de compara$ao, como <, fazem a compara^ao em ordem numerica 
ou alfabetica, dependendo do tipo dos operandos. As describes dos operadores individuals explicam 
suas dependences de tipo e especificam as conversoes de tipo que realizam. 


4.7.3 Lvalues 

Observe que os operadores de atribui^ao e alguns dos outros operadores listados na Tabela 4-1 
esperam um operando do tipo lval. lvalue e um termo historico que significa “uma expressao que 
pode aparecer de forma valida no lado esquerdo de uma expressao de atribui^ao”. Em JavaScript, 
variaveis, propriedades de objetos e elementos de arrays sao lvalues. A especifica?ao ECMAScript 
permite que funijoes internas retornem lvalues, mas nao define qualquer funfao que se comporte 
dessa maneira. 

4.7.4 Efeitos colaterais dos operadores 

Avaliar uma expressao simples como 2*3 nunca afeta o estado de seu programa, sendo que qual¬ 
quer calculo futuro que o programa efetue nao vai ser afetado por essa avalia^ao. Contudo, algumas 
expressoes tern efeitos colaterais e sua avalia^ao pode afetar o resultado de futuras avalia?6es. Os 
operadores de atribui^ao sao o exemplo mais evidente: se voce atribui um valor a uma variavel ou 
propriedade, isso altera o valor de qualquer expressao que utilize essa variavel ou propriedade. Os 
operadores ++ e -- de incremento e decremento sao semelhantes, pois realizam uma atribui^ao im- 
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plfcita. O operador delete tambem tem efeitos colaterais: excluir uma propriedade e como (mas nao 
o mesmo que) atribuir undefined a propriedade. 

Nenhum outro operador JavaScript tem efeitos colaterais, mas as expressoes de chamada de funpao e 
de criapao de objeto vao ter efeitos colaterais se qualquer um dos operadores utilizados no corpo da 
funpao ou da construtora tiver efeitos colaterais. 

4.7.5 Precedence dos operadores 

Os operadores listados na Tabela 4-1 estao organizados em ordem de precedencia alta para baixa, 
com linhas horizontais separando os grupos de operadores com o mesmo nivel de precedencia. A 
precedencia dos operadores controla a ordem na qual as operates sao efetuadas. Os operadores com 
precedencia mais alta (mais proximos ao initio da tabela) sao executados antes daqueles com prece¬ 
dencia mais baixa (mais proximos ao fim). 

Considere a expressao a seguir: 

O operador de multiplicapao * tem precedencia mais alta do que o operador de adipao +; portanto 
a multiplicapio e efetuada antes da adipio. Alem disso, o operador de atribuipao = tem a preceden¬ 
cia mais baixa; portanto, a atribuipio e realizada depois que todas as operates no lado direito sao 
concluidas. 

A precedencia dos operadores pode ser anulada com o uso expb'cito de parenteses. Para forpir que a 
adipio do exemplo anterior seja efetuada primeiro, escreva: 
w = (x + y)*z; 

Note que as expressoes de acesso a propriedade e de chamada tem precedencia mais alta do que qual¬ 
quer um dos operadores listados na Tabela 4-1. Considere a seguinte expressao: 
typeof my.functions[x](y) 

Embora typeof seja um dos operadores de prioridade mais alta, a operapao typeof e efetuada no 
resultado dos dois acessos a propriedade e na chamada de funpao. 

Na pratica, se voce nao tiver certeza da precedencia de seus operadores, o mais simples a fazer e utili- 
zar parenteses para tornar a ordem de avaliapao explicita. As regras importantes para se conhecer sao 
estas: multiplicapio e divisao sao efetuadas antes de adipio e subtrapao e a atribuipio tem preceden¬ 
cia muito baixa, sendo quase sempre realizada por ultimo. 

4.7.6 Associatividade de operadores 

Na Tabela 4-1, a coluna A especifica a associatividade do operador. Um valor E especifica associativi¬ 
dade da esquerda para a direita e um valor D especifica associatividade da direita para a esquerda. A 
associatividade de um operador define a ordem em que operapoes de mesma precedencia sao efetua¬ 
das. Associatividade da esquerda para a direita significa que as operapoes sao efetuadas nessa ordem. 
Por exemplo, o operador de subtrapao tem associatividade da esquerda para a direita; portanto: 



Capftulo4 Expressoes e operadores 65 


w = «x - y) - z); 

Por outro lado, as expressoes a seguir: 


e o mesmo que: 




x = y = z; 


q = a?b:c?d:e?-f:g; 
sao equivalentes a: 

x = ~(-y); w = (x = (y = z)); q = 
a?b:(c?d:(e?f:g)); 

pois os operadores condicionais unarios, de atribui^ao e ternarios tem associatividade da direita para 
a esquerda. 

4.7.7 Ordem deavalia^ao 

A precedencia e a associatividade dos operadores especificam a ordem em que as operates sao 
efetuadas em uma expressao complexa, mas nao especificam a ordem em que as subexpressoes sao 
avaliadas. JavaScript sempre avalia expressoes rigorosamente na ordem da esquerda para a direita. 
Na expressao w=x+y*z, por exemplo, a subexpressao w e avaliada primeiro, seguida de x, y e z. Entao, 
os valores de y e z sao multiplicados, somados ao valor de x e atribufdos a variavel ou propriedade 
especificada pela expressao w. A inclusao de parenteses nas expressoes pode alterar a ordem relativa da 
multiplica^ao, adi^ao e atribui^ao, mas nao a ordem da esquerda para a direita da avaliaqao. 

A ordem de avaliaq:ao so faz diferen^a se uma das expressoes que estao sendo avaliadas tem efeitos 
colaterais que afetam o valor de outra expressao. Se a expressao x incrementa uma variavel utilizada 
pela expressao z, entao o fato de x ser avaliada antes de z e importante. 


4.8 Expressoes aritmeticas 


Esta se^ao aborda os operadores que efetuam operates aritmeticas ou outras manipulates nume- 
ricas em seus operandos. Os operadores de multiplicaipao, divisao e subtra?ao sao simples e serao 
abordados primeiro. O operador de adi^ao tem sua propria subsei;ao, pois tambem pode realizar 
concatenaq:ao de strings e tem algumas regras de conversao de tipo incomuns. Os operadores unarios 
e os operadores bit a bit tambem sao abordados em suas proprias subse$oes. 

Os operadores aritmeticos basicos sao * (multiplica^ao), / (divisao), % (modulo: resto de uma divi¬ 
sao), + (adiq:ao) e - (subtra^ao). Conforme observado, vamos discutir o operador + em uma se<jao 
exclusiva. Os outros quatro operadores basicos simplesmente avaliam seus operandos, convertem os 
valores em numeros, se necessario, e entao calculam o produto, quociente, resto ou a diferen^a entre 
os valores. Operandos nao numericos que nao podem ser convertidos em numeros sao convertidos 
no valor NaN. Se um dos operandos e (ou e convertido em) NaN, o resultado da opera^ao tambem e 
NaN. 

O operador / divide seu primeiro operando pelo segundo. Caso voce esteja acostumado com lingua- 
gens de programato que fazem diferenciafao entre numeros inteiros e de ponto flutuante, talvez 
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espere obter um resultado inteiro ao dividir um inteiro por outro. Em JavaScript, contudo, todos 
os numeros sao em ponto flutuante, de modo que todas as operates de divisao tem resultados em 
ponto flutuante: 5/2 e avaliado como 2.5 e nao como 2. A divisao por zero produz infinito positivo 
ou negativo, enquanto 0/0 e avaliado como NaN - nenhum desses casos gera erro. 

O operador % calcula o primeiro operando modulo segundo operando. Em outras palavras, ele re- 
torna o resto apos a divisao de niimero inteiro do primeiro operando pelo segundo operando. O 
sinal do resultado e o mesmo do primeiro operando. Por exemplo, 5 % 2 e avaliado como 1 e -5 % 2 
e avaliado como - 1 . 

Embora o operador modulo seja normalmente utilizado com operandos inteiros, tambem funciona 
com valores em ponto flutuante. Por exemplo, 6.5 % 2 .1 e avaliado como 0.2. 


4.8.1 0 operador + 

O operador binario + soma operandos numericos ou concatena operandos string: 

1+2 II => 3 

''hello" + " " + "there" // => "hello there" 

"1” + "2" // => "12" 


Quando os valores dos dois operandos sao numeros ou ambos sao strings, e evidente o que o ope¬ 
rador + faz. No entanto, em qualquer outro caso a conversao de tipo e necessaria e a opera^ao a ser 
efetuada depende da conversao feita. As regras de conversoes para + dao prioridade para a concate- 
na^ao de strings: se um dos operandos e uma string ou um objeto que e convertido em uma string, 
o outro operando e convertido em uma string e e feita a concatenacao. A adicao e efetuada somente 
se nenhum dos operandos e uma string. 


Tecnicamente, o operador + se comporta como segue: 


Se um de seus valores de operando e um objeto, ele o convene em um valor primitivo utili- 
zando o algoritmo de objeto para valor primitivo descrito na Secjao 3.8.3: os objetos Date sao 
convertidos por meio de seus metodos toString( ) e todos os outros objetos sao convertidos via 
valueOf (), caso esse metodo retorne um valor primitivo. Contudo, a maioria dos objetos nao 
tem um metodo valueOfQ util; portanto, tambem sao convertidos via toStringQ. 

Apos a conversao de objeto para valor primitivo, se um ou outro operando e uma string, o 
outro e convertido em uma string e e feita a concatena^ao. 

Caso contrario, os dois operandos sao convertidos em numeros (ou em NaN) e e efetuada a 


Aqui estao alguns exemplos: 

1 + 2 // 

" 1 " + " 2 " // 

" 1 " +2 // 



2 + null // 

2 + undefined // 


3: adi^ao 

” 12 ": concatenacao 

” 12 ": concatenacao apos numero para string 

"ljobject Object]": concatenacao apos objeto para string 

2: adicao apos booleano para numero 

2: adicao apos null converte em 0 

NaN: adicao apos undefined converte em NaN 



Capftulo4 Expressoes e operadores 67 


Por fim, e importante notar que, quando o operador + e usado com strings e numeros, pode nao 
ser associativo. Isto e, o resultado pode depender da ordem em que as operates sao efetuadas. Por 
exemplo: 

l + 2 + " blind mice"; // => "3 blind mice" 

l + (2 + ” blind mice"); // => "12 blind mice" 

A primeira linha nao tem parenteses e o operador + tem associatividade da esquerda para a direita, 
de modo que os dois numeros sao primeiro somados e a soma e concatenada com a string. Na se- 
gunda linha, os parenteses alteram a ordem das operates: o niimero 2 e concatenado com a string 
para produzir uma nova string. Entao, o numero 1 e concatenado com a nova string para produzir 
o resultado final. 



4.8.2 Operadores aritmeticos unarios 

Os operadores unarios modificam o valor de um unico operando para produzir um novo valor. Em 
JavaScript, todos os operadores unarios tem precedencia alta e todos sao associativos a direita. Todos 
operadores aritmeticos unarios descritos nesta seQo (+, -, ++ e --) convertem seu unico operando 
em um numero, se necessario. Note que os caracteres de pontua^ao + e - sao usados tanto como 
operadores unarios como binarios. 

Os operadores aritmeticos unarios sao os seguintes: 

Mais unario (+) 

O operador mais unario converte seu operando em um numero (ou em NaN) e retorna esse valor 
convertido. Quando usado com um operando que ja e um numero, ele nao faz nada. 

Menos unario (-) 

Quando - e usado como operador unario, ele converte seu operando em um numero, se neces¬ 
sario, e depois troca o sinal do resultado. 

Incremento (++) 

O operador ++ incrementa (isto e, soma um ao) seu unico operando, o qual deve ser um lvalue 
(uma variavel, um elemento de um array ou uma propriedade de um objeto). O operador 
converte seu operando em um numero, soma 1 a esse numero e atribui o valor incrementado 
a variavel, elemento ou propriedade. 

O valor de retorno do operador ++ depende de sua posi?ao relativa ao operando. Quando usa¬ 
do antes do operando, onde e conhecido como operador de pre-incremento, ele incrementa 
o operando e e avaliado com o valor incrementado desse operando. Quando usado apos o 
operando, onde e conhecido como operador de pos-incremento, ele incrementa seu operando, 
mas e avaliado com o valor nao incrementado desse operando. Considere a diferenija entre as 
duas linhas de codigo a seguir: 

var i = 1, j = ++i; // i e j sao ambos 2 

var i = 1, j = i++; // i e 2, j e 1 
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Note que a expressao ++x nem sempre e igual a x=x+i. O operador ++ nunca faz concatenaQo 
de strings: ele sempre converte seu operando em um numero e o incrementa. Sexea string 
“1”, ++x e o numero 2, mas x+1 e a string “11”. 

Note tambem que, por causa da inser^ao automatica de ponto e virgula de JavaScript, voce 
nao pode inserir uma quebra de linha entre o operador de pos-incremento e o operando que 
o precede. Se fizer isso, JavaScript vai tratar o operando como uma instru^ao completa e vai 
inserir um ponto e virgula antes dele. 

Esse operador, tanto na forma de pre-incremento como na de pos-incremento, e mais comu- 
mente usado para incrementar um contador que controla um lai;o for (Se^ao 5.5.3). 

Decremento (—) 

O operador - - espera um operando lvalue. Ele converte o valor do operando em um numero, 
subtrai 1 e atribui o valor decrementado ao operando. Assim como o operador ++, o valor de 
retorno de - - depende de sua posi^ao relativa ao operando. Quando usado antes do operando, 
ele decrementa e retorna o valor decrementado. Quando usado apos o operando, ele decre- 
menta o operando, mas retorna o valor nao decrementado. Quando usado apos seu operando, 
nenhuma quebra de linha e permitida entre o operando e o operador. 


4.8.3 Operadoresbitabit 

Os operadores bit a bit fazem manipulaQo de baixo nivel dos bits na representaQo binaria de nume- 
ros. Embora nao efetuem operates aritmeticas tradicionais, eles sao classificados como operadores 
aritmeticos aqui porque atuam sobre operandos numericos e retornam um valor numerico. Esses 
operadores nao sao utilizados comumente em programaqao JavaScript e, caso voce nao conhe^a a 
represen taqao binaria de inteiros decimais, provavelmente pode pular esta seQo. Quatro desses ope¬ 
radores efetuam algebra booleana nos bits individuals dos operandos, comportando-se como se cada 
bit de cada operando fosse um valor booleano (l=verdadeiro, 0=falso). Os outros tres operadores bit 
a bit sao usados para deslocar bits a esquerda e a direita. 

Os operadores bit a bit esperam operandos inteiros e se comportam como se esses valores fossem 
representados como inteiros de 32 bits, em vez de valores em ponto flutuante de 64 bits. Esses ope¬ 
radores convertem seus operandos em numeros, se necessario, e entao for^am os valores numericos 
a ser inteiros de 32 bits, eliminando qualquer parte fracionaria e quaisquer bits alem do 32°. Os 
operadores de deslocamento exigent no lado direito um operando entre 0 e 31. Apos converter esse 
operando em um inteiro de 32 bits sem sinal, eles eliminam todos os bits alem do 5°, o que gera um 
numero no intervalo apropriado. Surpreendentemente, NaN, Infinity e -Infinity sao todos conver- 
tidos em 0 quando usados como operandos desses operadores bit a bit. 

E bit a bit (&) 

O operador & executa uma operaQo E booleana em cada bit de seus argumentos inteiros. Um 
bit so se torna 1 no resultado se o bit correspondente for 1 nos dois operandos. Por exemplo, 
0xl2B4 & OxOOFF e avaliado como 0x0034. 



Capftulo4 Expressoes e operadores 69 


OU bit a bit(\) 

O operador | executa uma opera^ao OU booleana em cada bit de seus argumentos inteiros. 
Um bit se torna 1 no resultado se o bit correspondente for 1 em um ou nos dois operandos. 
Por exemplo, 0xi2B4 | OxOOFF e avaliado como 0xi2FF. 

XOR bit a bit (*) 

O operador A executa uma opera?ao OU exclusivo booleana em cada bit de seus argumentos 
inteiros. OU exclusivo significa que o operando um e true ou o operando dois e true, mas 
nao ambos. Um bit se torna 1 no resultado dessa opera^ao se um bit correspondente for 1 em 
um (mas nao em ambos) dos dois operandos. Por exemplo, OxFFOO A OxFOFO e avaliado como 
OxOFFO. 

NAO bit a bit (~) 

O operador ~ e um operador unario que aparece antes de seu unico operando inteiro. Ele fun- 
ciona invertendo todos os bits do operando. Devido a maneira como os inteiros com sinal sao 
representados em JavaScript, aplicar o operador - em um valor e equivalente a trocar seu sinal 
e subtrair 1. Por exemplo -OxOF e avaliado como OxFFFFFFFO ou -16. 

Deslocamento a esquerda («) 

O operador « move todos os bits de seu primeiro operando para a esquerda pelo numero de 
casas especificadas no segundo operando, o qual deve ser um inteiro entre 0 e 31. Por exemplo, 
na opera^ao a « l, o primeiro bit (o bit dos uns) de a se torna o segundo bit (o bit dos dois), 
o segundo bit de a se torna o terceiro, etc. Um zero e usado para o novo primeiro bit e o valor 
do 32° bit e perdido. Deslocar um valor para a esquerda por uma posi^ao e equivalente a mul- 
tiplicar por 2, deslocar por duas posi?6es e equivalente a multiplicar por 4 e assim por diante. 
Por exemplo, 7 « 2 e avaliado como 28. 

Deslocamento a direita com sinal (») 

O operador >> move todos os bits de seu primeiro operando para a direita pelo numero de 
casas especificadas no segundo operando (um inteiro entre 0 e 31). Os bits deslocados mais 
a direita sao perdidos. Os bits preenchidos a esquerda dependem do bit de sinal do operando 
original, a fim de preservar o sinal do resultado. Se o primeiro operando e positivo, o resultado 
tern valores zero colocados nos bits de ordem mais alta; se o primeiro operando e negativo, o 
resultado tem valores um colocados nos bits de ordem mais alta. Deslocar um valor uma casa 
para a direita e equivalente a dividir por 2 (descartando o resto), deslocar duas casas para a 
direita e equivalente a divisao inteira por 4 e assim por diante. Por exemplo, 7 » le avaliado 
como 3 e -7 >> le avaliado como -4. 

Deslocamento a direita com preenchimento de zero (»>) 

O operador »> e exatamente como o operador », exceto que os bits deslocados a esquerda 
sao sempre zero, independente do sinal do primeiro operando. Por exemplo, -l » 4 e avaliado 
como -1, mas -l »> 4 e avaliado como OxOFFFFFFF. 
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4.9 Expressoes relacionais 

Esta se^ao descreve os operadores relacionais de JavaScript. Esses operadores testam uma rela^ao 
(como “igual a”, “menor que” ou “propriedade de”) entre dois valores e retornam true ou false, 
dependendo da existencia dessa rela^ao. As expressoes relacionais sempre sao avaliadas com um valor 
booleano e frequentemente esse valor e utilizado para controlar o fluxo da execu^ao do programa em 
instrufoes if, while e for (consulte o Capitulo 5). As subseqdes a seguir documentam os operadores 
de igualdade e desigualdade, os operadores de compara^ao e outros dois operadores relacionais de 
JavaScript, in e instanceof. 

4.9.1 Operadores de igualdade e desigualdade 

Os operadores == e === verificam se dois valores sao os mesmos utilizando duas defini^oes diferentes 
de semelhanfa. Os dois operadores aceitam operandos de qualquer tipo e ambos retornam true se 
seus operandos sao os mesmos e false se sao diferentes. O operador === e conhecido como operador 
de igualdade restrita (ou, as vezes, como operador de identidade) e verifica se seus dois operandos sao 
“identicos”, usando uma defini^ao restrita de semelhan^a. O operador == e conhecido como opera¬ 
dor de igualdade; ele verifica se seus dois operandos sao “iguais” usando uma definiijao mais relaxada 
de semelhanqa que permite conversoes de tipo. 

JavaScript aceita os operadores =, == e ===. Certifique-se de entender as diferen$as entre esses opera¬ 
dores de atribuiqao, igualdade e igualdade restrita e tome o cuidado de usar o correto ao codificar! 
Embora seja tentador ler todos os tres operadores como “igual a”, talvez ajude a diminuir a confusao 
se voce ler “obtem ou e atribuido” para =, “e igual a” para == e “e rigorosamente igual a” para ===. 

Os operadores ! = e ! == testam exatamente o oposto dos operadores == e ===. O operador de desi¬ 
gualdade != retorna false se dois valores sao iguais de acordo com == e, caso contrario, retorna true. 
O operador !== retorna false se dois valores sao rigorosamente iguais; caso contrario, retorna true. 
Conforme vamos ver na Se^ao 4.10, o operador ! calcula a opera^ao booleana NAO. Isso torna facil 
lembrar que ! = e ! == significant “nao igual a” e “nao rigorosamente igual a”. 

Conforme mencionado na Se$ao 3.7, os objetos em JavaScript sao comparados por referenda e nao 
por valor. Um objeto e igual a si mesmo, mas nao a qualquer outro objeto. Se dois objetos distintos 
tern o mesmo numero de propriedades, com os mesmos nomes e valores, eles ainda nao sao iguais. 
Dois arrays que tenham os mesmos elementos na mesma ordem nao sao iguais. 

O operador de igualdade restrita === avalia seus operandos e, entao, compara os dois valores como 
segue, nao fazendo conversao de tipo: 

• Se os dois valores tern tipos diferentes, eles nao sao iguais. 

• Se os dois valores sao null ou sao undefined, eles sao iguais. 

• Se os dois valores sao o valor booleano true ou ambos sao o valor booleano false, eles sao 
iguais. 



Capftulo4 Expressoes e operadores 71 


• Se um ou os dois valores sao NaN, eles nao sao iguais. O valor NaN nunca e igual a qualquer 
outro valor, incluindo ele mesmo! Para verificar se um valor x e NaN, use x ! == x. NaN e o unico 
valor de x para o qual essa expressao sera verdadeira. 

• Se os dois valores sao mimeros e tem o mesmo valor, eles sao iguais. Se um valor e 0 e o outro 
e -0, eles tambem sao iguais. 

• Se os dois valores sao strings e content exatamente os mesmos valores de 16 bits (consulte o 
quadro na Se^ao 3.2) nas mesmas posi^oes, eles sao iguais. Se as strings diferem no compri- 
mento ou no conteudo, eles nao sao iguais. Duas strings podem ter o mesmo significado e a 
mesma aparencia visual, mas ainda serem codificadas usando diferentes sequencias de valores 
de 16 bits. JavaScript nao faz normaliza?ao alguma de Unicode e duas strings como essas nao 
sao consideradas iguais para os operadores === ou ==. Consulte String.localeCompareQ na 
Parte III para ver outro modo de comparar strings. 

• Se os dois valores se referem ao mesmo objeto, array ou funjao, eles sao iguais. Se eles se referem 
a objetos diferentes, nao sao iguais, mesmo que os dois objetos tenham propriedades identicas. 

O operador de igualdade == e como o operador de igualdade restrita, mas e menos restrito. Se os 
valores dos dois operandos nao sao do mesmo tipo, ele procura fazer algumas conversoes de tipo e 
tenta fazer a compara^ao novamente: 

• Se os dois valores tem o mesmo tipo, testa-os quanto a igualdade restrita, conforme descrito 
anteriormente. Se eles sao rigorosamente iguais, eles sao iguais. Se eles nao sao rigorosamente 
iguais, eles nao sao iguais. 

• Se os dois valores nao tem o mesmo tipo, o operador == ainda pode considera-los iguais. Ele 
usa as seguintes regras e conversoes de tipo para verificar a igualdade: 

— Se um valor e null e o outro e undefined, eles sao iguais. 

— Se um valor e um numero e o outro e uma string, converte a string em um numero e tenta 
a compara^ao novamente, usando o valor convertido. 

— Se um ou outro valor e true, o converte para 1 e tenta a compara?ao novamente. Se um ou 
outro valor e false, o converte para 0 e tenta a compara^ao novamente. 

— Se um valor e um objeto e o outro e um numero ou uma string, converte o objeto em um 
valor primitivo usando o algoritmo descrito na Seqao 3.8.3 e tenta a comparaQo novamen¬ 
te. Um objeto e convertido em um valor primitivo por meio de seu metodo toStringQ ou 
de seu metodo valueOf (). As classes internas de JavaScript basica tentam a conversao com 
value0f() antes da conversao com toStringQ, exceto para a classe Date, que faz a conversao 
de toStringQ. Os objetos que nao fazem parte de JavaScript basica podem ser convertidos 
em valores primitivos de acordo com o que for definido na implementa^ao. 

— Qualquer outra combinaQo de valor nao e igual. 

Como exemplo de teste de igualdade, considere a comparaQo: 

"l" == true 

Essa expressao e avaliada como true, indicando que esses valores de aparencia muito diferente na 
verdade sao iguais. Primeiramente, o valor booleano true e convertido no numero lea comparaQo 
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e feita novamente. Em seguida, a string "a" e convertida no numero 1. Como agora os dois valores 
sao iguais, a compara^ao retorna true. 

4.9.2 Operadores de compara^ao 

Os operadores de compara^ao testam a ordem relativa (numerica ou alfabetica) de seus dois operan- 


Menor que (<) 

O operador < e avaliado como true se o primeiro operando e menor do que o segundo; caso 
contrario, e avaliado como false. 

Maior que (>) 

O operador > e avaliado como true se o primeiro operando e maior do que o segundo; caso 
contrario, e avaliado como false. 

Menor ou igual a (<=) 

O operador <= e avaliado como true se o primeiro operando e menor ou igual ao segundo; 
caso contrario, e avaliado como false. 

Maior ou igual a (>=) 

O operador >= e avaliado como true se o primeiro operando e maior ou igual ao o segundo; 
caso contrario, e avaliado como false. 

Os operandos desses operadores de compara^ao podem ser de qualquer tipo. Contudo, a compara- 
fao so pode ser feita com numeros e strings; portanto, os operandos que nao sao numeros ou strings 
sao convertidos. A compara^ao e a conversao ocorrem como segue: 

• Se um ou outro operando e avaliado como um objeto, esse objeto e convertido em um valor 
primitivo, conforme descrito no final da Se<jao 3.8.3: se seu metodo valueOfQ retorna um 
valor primitivo, esse valor e usado. Caso contrario, e usado o valor de retorno de seu metodo 
toString(). 

• Se, apos qualquer conversao de objeto para valor primitivo exigida, os dois operandos sao 
strings, as duas strings sao comparadas usando a ordem alfabetica, onde a “ordem alfabetica” e 
definida pela ordem numerica dos valores Unicode de 16 bits que compoem as strings. 

• Se, apos a conversao de objeto para valor primitivo, pelo menos um operando nao e uma 
string, os dois operandos sao convertidos em numeros e comparados numericamente. 0 e -0 
sao considerados iguais. Infinity e maior do que qualquer numero que nao seja ele mesmo e 
-Infinity e menor do que qualquer numero que nao seja ele mesmo. Se um ou outro operan¬ 
do e (ou e convertido em) NaN, entao o operador de comparaqao sempre retorna false. 

Lembre-se de que as strings de JavaScript sao sequencias de valores inteiros de 16 bits e que a compa- 
ra^ao de strings e apenas uma comparaqao numerica dos valores das duas strings. A ordem de codifi- 
ca?ao numerica definida pelo Unicode pode nao corresponder a ordem de cotejo tradicional utiliza- 
da em qualquer idioma ou localidade em especial. Note especificamente que a compara^ao de strings 
diferencia letras maiusculas e minusculas e todas as letras ASCII maiusculas sao “menores que” todas 
as letras ASCII minusculas. Essa regra pode causar resultados confusos, se voce nao esperar por isso. 
Por exemplo, de acordo com o operador <, a string “Zoo” vem antes da string “aardvark”. 
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Para ver um algoritmo de comparacao de strings mais robusto, consulte o metodo String.locale- 
Compare(), que tambem leva em conta as definifoes de ordem alfabetica especfficas da localidade. 
Para compara^oes que nao diferenciam letras maiusculas e minusculas, voce deve primeiro converter 
todas as strings para minusculas ou todas para maiusculas, usando String.toLowerCaseQ ou String. 
tolIpperCaseQ. 


Tanto o operador + como os operadores de comparacao se comportam diferentemente para operan- 
dos numericos e de string. + privilegia as strings: ele faz a con cate napio se um ou outro operando e 
uma string. Os operadores de comparacao privilegiam os niimeros e so fazem comparacao de strings 
se os dois operandos sao strings: 


1+2 // Adicao. 0 resultado e S. 

"l" + "2" // Concatenacao. 0 resultado e " 12 ". 

"1" +2 // Concatenacao. 2 e convertido em "2". 0 resultado e "12". 

11 < 3 // Comparacao numerica. 0 resultado e false. 

" 11 " < "3" // Comparacao de strings. 0 resultado e true. 

"11" <3 // Comparacao numerica. "li" e convertido em 11 . 0 resultado e false, 

"one" <3 // Comparacao numerica. "one" e convertido em NaN. 0 resultado e false. 


Por fim, note que os operadores <= (menor ou igual a) e >= (maior ou igual a) nao contam com os 
operadores de igualdade ou igualdade restrita para determinar se dois valores sao “iguais”. Em vez 
disso, o operador menor ou igual a e simplesmente definido como “nao maior que” e o operador 
maior ou igual a e definido como “nao menor que”. A unica exce^ao ocorre quando um ou outro 
operando e (ou e convertido em) NaN, no caso em que todos os quatro operadores de comparacao 
retornam false. 


4.9.3 0 operador in 


O operador in espera um operando no lado esquerdo que seja ou possa ser convertido em uma 
string. No lado direito, ele espera um operando que seja um objeto. Ele e avaliado como true se o 
valor do lado esquerdo e o nome de uma propriedade do objeto do lado direito. Por exemplo: 


var point = { x:l, y:l }; // Define um objeto 

"x" in point // => verdadeiro: o objeto tern uma propriedade chamada 

//"x" 


"z" in point // => falso: o objeto nao tern propriedade "z". 

"toString" in point // => verdadeiro: o objeto herda o metodo toString 


var data = [7,8,9]; 
"0" in data 
l in data 
3 in data 


// Um array com elementos 0, l e 2 

// => verdadeiro: o array tern um elemento "0" 

// => verdadeiro: niimeros sao convertidos em strings 
// => falso: nenhum elemento 3 


4.9.4 0 operador instanceof 

O operador instanceof espera um objeto para o operando no lado esquerdo e um operando no lado 
direito que identifique uma classe de objetos. O operador e avaliado como true se o objeto do lado 
esquerdo e uma instancia da classe do lado direito e e avaliado como false caso contrario. O Capitu- 
lo 9 explica que em JavaScript as classes de objetos sao definidas pela fun<;ao construtora que as ini- 
cializa. Assim, o operando do lado direito de instanceof deve ser uma funijao. Aqui estao exemplos: 
var d = new Date(); // Cria um novo objeto com a construtora DateQ 




74 Parte I JavaScript basica 


d instanceof Date; 
d instanceof Object; 
d instanceof Number; 
var a = [i, 2, J]j 
a instanceof Array; 
a instanceof Object; 
a instanceof RegExp; 


// E avaliado como true; d foi criado com Date() 

// E avaliado como true; todos os objetos sao instancias de Object 

// E avaliado como false; d nao e urn objeto Number 

// Cria urn array com sintaxe de array literal 

// E avaliado como true; a e um array 

// E avaliado como true; todos os arrays sao objetos 

// E avaliado como false; os arrays nao sao expressoes regulares 


Note que todos os objetos sao instancias de Object. instanceof considera as “superclasses” ao decidir 
se um objeto e uma instancia de uma classe. Se o operando do lado esquerdo de instanceof nao e 
um objeto, instanceof retorna false. Se o lado direito nao e uma funijao, ele lan$a um TypeError. 

Para entender como o operador instanceof funciona, voce deve entender o “encadeamento de pro¬ 
totipos”. Trata-se de um mecanismo de heran^a de JavaScript e esta descrito na Se^ao 6.2.2. Para 
avaliar a expressao o instanceof f, JavaScript avalia f. prototype e depois procura esse valor no enca¬ 
deamento de prototipos de o. Se o encontra, entao o e uma instancia de f (ou de uma superclasse de 
f) e o operador retorna true. Se f. prototype nao e um dos valores no encadeamento de prototipos 
de o, entao o nao e uma instancia de f e instanceof retorna false. 


4.10 Expressoes logicas 

Os operadores logicos &&, 11 e ! efetuam algebra booleana e sao frequentemente usados em conjunto 
com os operadores relacionais para combinar duas expressoes relacionais em outra mais complexa. 
Esses operadores estao descritos nas subsefoes a seguir. Para entende-los completamente, talvez voce 
queira rever a no$ao de valores “verdadeiros” e “falsos” apresentada na Secjao 3.3. 

4.10.1 E logico (&&) 

O operador && pode ser entendido em tres nfveis diferentes. No nivel mais simples, quando utilizado 
com operandos booleanos, && efetua a opera?ao E booleana nos dois valores: ele retorna true se, e 
somente se, seu primeiro operando e seu segundo operando sao true. Se um ou os dois operandos 
sao false, ele retorna false. 

&& e frequentemente usado como conjunfao para unir duas expressoes relacionais: 
x == 0 && y == o // verdadeiro se, e somente se, x e y sao ambos 0 

As expressoes relacionais sao sempre avaliadas como true ou false; portanto, quando usado desse 
modo, o proprio operador && retorna true ou false. Os operadores relacionais tern precedencia 
mais alta do que && (e 11); portanto, expressoes como essas podem ser escritas seguramente sem os 
parenteses. 

Mas && nao exige que seus operandos sejam valores booleanos. Lembre-se de que todos os valores 
de JavaScript sao “verdadeiros” ou “falsos”. (Consulte a Se^ao 3.3 para ver os detalhes. Os valores 
falsos sao false, null, undefined, 0, -0, NaN e Todos os outros valores, incluindo todos os objetos, 
sao verdadeiros.) O segundo nivel no qual && pode ser entendido e como operador E booleano para 
valores verdadeiros e falsos. Se os dois operandos sao verdadeiros, o operador retorna um valor ver¬ 
dadeiro. Caso contrario, um ou os dois operandos devem ser falsos, e o operador retorna um valor 
falso. Em JavaScript, qualquer expressao ou instru^ao que espera um valor booleano vai trabalhar 
com um valor verdadeiro ou falso; portanto, o fato de que && nem sempre retorna true ou false nao 
causa problemas praticos. 
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Observe que a descri^ao anterior diz que o operador retorna “urn valor verdadeiro” ou “urn valor 
falso”, mas nao especifica qual e esse valor. Por isso, precisamos descrever && no terceiro e ultimo 
nivel. Esse operador come^a avaliando seu primeiro operando, a expressao a sua esquerda. Se o valor 
a esquerda e falso, o valor da expressao inteira tambem deve ser falso; portanto, && simplesmente 
retorna o valor da esquerda e nem mesmo avalia a expressao da direita. 

Por outro lado, se o valor a esquerda e verdadeiro, entao o valor global da expressao depende do 
valor do lado direito. Se o valor da direita e verdadeiro, entao o valor global deve ser verdadeiro; e 
se o valor da direita e falso, entao o valor global deve ser falso. Assim, quando o valor da direita e 
verdadeiro, o operador && avalia e retorna o valor da direita: 

var o = { x : 1 }; 

o && o.x // => 1: o e verdadeiro; portanto, retorna o valor de o.x 

p && p.x // => null: p e falso; portanto, retorna-o e nao avalia p.x 

E importante entender que && pode ou nao avaliar o operando de seu lado direito. No codigo ante¬ 
rior, a variavel p e configurada como null e a expressao p.x, se fosse avaliada, lan^aria uma exce^ao 
TypeError. Mas o codigo utiliza && de maneira idiomatica, de modo que p.xe avaliado somente se p 
e verdadeiro - nao null ou undefined. 

As vezes o comportamento de && e chamado de “curto-circuito” e as vezes voce pode ver codigo que 
explora esse comportamento propositalmente, para executar codigo condicionalmente. Por exem- 
plo, as duas linhas de codigo JavaScript a seguir tern efeitos equivalentes: 

if (a == b) stop(); // Chama stop() somente se a == b 
(a == b) && stop(); // Isto faz a mesma coisa 

De modo geral, voce deve tomar cuidado ao escrever uma expressao com efeitos colaterais (atri- 
bui^oes, incrementos, decrementos ou chamadas de fun^ao) no lado direito de &&. Se esses efeitos 
colaterais ocorrem ou nao depende do valor do lado esquerdo. 

Apesar do funcionamento um tanto complexo desse operador, ele e mais comumente usado como 
operador de algebra booleana simples, que trabalha com valores verdadeiros e falsos. 

4.10.2 OU logico (||) 

O operador | | efetua a opera^ao OU booleana em seus dois operandos. Se um ou os do is operandos 
sao verdadeiros, ele retorna um valor verdadeiro. Se os dois operandos sao falsos, ele retorna um 
valor falso. 

Embora o operador 11 seja mais frequentemente utilizado apenas como um operador OU booleano, 
assim como o operador && ele tern comportamento mais complexo. Ele comep avaliando o primeiro 
operando, a expressao a sua esquerda. Se o valor desse primeiro operando e verdadeiro, ele retorna 
esse valor verdadeiro. Caso contrario, ele avalia o segundo operando, a expressao a sua direita, e 
retorna o valor dessa expressao. 

Assim como no operador &&, voce deve evitar operandos no lado direito que contenham efeitos co¬ 
laterais, a nao ser que queira propositalmente utilizar o fato de que a expressao do lado direito pode 
nao ser avaliada. 
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Uma utiliza^ao idiomatica desse operador e selecionar o primeiro valor verdadeiro em um conjunto 
de alternativas: 

// Se max_width e definido, usa isso. Caso contrario, procura um valor 

// no objeto preferences. Se isso nao estiver definido, usa uma constante codificada. 

var max = max_width || preferences.max_width || 500; 

Esse idioma e frequentemente utilizado em corpos de fun^ao para fornecer valores padrao para 
parametros: 

II Copia as propriedades de o em p e retorna p 
function copy(o, p) { 

p = p | | {}; II Se nenhum objeto e passado para p, usa um objeto recem-criado. 

// o corpo da funcao fica aqui 

} 

4.10.3 NAO logico (!) 

O operador ! e um operador unario - ele e colocado antes de um unico operando. Seu objetivo e 
inverter o valor booleano de seu operando. Por exemplo, se x e verdadeiro !x e avaliado como false. 
Se x e falso, entao ! x e true. 

Ao contrario dos operadores && e 11, o operador ! converte seu operando em um valor booleano 
(usando as regras descritas no Capitulo 3) antes de inverter o valor convertido. Isso significa que 
! sempre retorna true ou false e que e possfvel converter qualquer valor x em seu valor booleano 
equivalente aplicando esse operador duas vezes: ! !x (consulte a Segio 3.8.2). 

Como um operador unario, ! tern precedencia alta e se vincula fortemente. Se quiser inverter o valor 
de uma expressao como p && q, voce precisa usar parenteses: ! (p && q). E interessante notar dois 
teoremas da algebra booleana aqui, que podemos expressar usando sintaxe JavaScript: 

// Estas duas igualdades valem para qualquer valor de p e q 
!(P && q) === !p || !q 

!(p II q) === ip && !q 

4.11 Expressoes de atribui^ao 

A JavaScript usa o operador = para atribuir um valor a uma variavel ou propriedade. Por exemplo: 

i = 0 II Configura a variavel i com o. 

o.x =1 // Configura a propriedade x do objeto o com 1. 

O operador = espera que o operando de seu lado esquerdo seja um lvalue: uma variavel ou proprie¬ 
dade de objeto (ou elemento de array). Ele espera que o operando de seu lado direito seja um valor 
arbitrario de qualquer tipo. O valor de uma expressao de atribui^ao e o valor do operando do lado 
direito. Como efeito colateral, o operador = atribui o valor da direita a variavel ou propriedade da 
esquerda; portanto, futuras referencias a variavel ou propriedade sao avaliadas com o valor. 

Embora as expressoes de atribui^ao normalmente sejam muito simples, as vezes voce podera ver o 
valor de uma expressao de atribui^ao utilizado como parte de uma expressao maior. Por exemplo, e 
possfvel atribuir e testar um valor na mesma expressao com o codigo a seguir: 

(a = b) == 0 



Capftulo4 Expressoes e operadores 77 


Se fizer isso, certifique-se de saber claramente a diferen^a entre os operadores = e ==! Note que = 
tem precedencia muito baixa e que parenteses normalmente sao necessarios quando o valor de uma 
atribui^ao vai ser usado em uma expressao maior. 

O operador de atribuifao tem associatividade da direita para a esquerda, ou seja, quando varios 
operadores de atribui^ao aparecem em uma expressao, eles sao avaliados da direita para a esquerda. 
Assim, e possivel escrever codigo como o seguinte para atribuir um unico valor a diversas variaveis: 
i = j = k = 0; // Inicializa 3 variaveis com 0 



4.11.1 Atribuigao com opera^ao 

Alem do operador de atribuifao = normal, a JavaScript aceita varios outros operadores de atribui^ao 
que fornecem atalhos por combinar atribui^ao com alguma outra opera^ao. Por exemplo, o opera¬ 
dor += efetua adi^ao e atribuifao. A expressao a seguir: 

total += sales_tax 
e equivalente a esta: 

total = total + sales_tax 

Como seria de se esperar, o operador += funciona com niimeros ou strings. Para operandos numeri- 
cos, ele efema adifao e atribui^ao; para operandos string, ele faz concatena^ao e atribuiqao. 

Operadores semelhantes incluem -=, *=, &= etc. ATabela 4-2 lista todos eles. 


Tabela 4-2 Operadores de atribuigao 


Operador 

Exemplo 

Equivalente 

+= 

a += b 

a -= b 

a = a + b 

a = a - b 

/= 

%= 

a /= b 

a %= b 

a «= b 

a = a / b 

a = a % b 

a = a « b 

&= 

1 = 

a »>= b 

a &= b 

a |= b 

a = a »> b 

a = a & b 

a = a * b 


Na maioria dos casos, a expressao: 
a op= b 
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onde op e um operador, e equivalente a expressao: 
a = a op b 

Na primeira linha, a expressao a e avaliada uma vez. Na segunda, ela e avaliada duas vezes. Os dois 
casos vao diferir somente se a incluir efeitos colaterais, como em uma chamada de fungao ou um 
operador de incremento. As duas atribuigoes a seguir, por exemplo, nao sao iguais: 

data[i++] *= 2; 
data[i++] = data[i++] * 2; 

4.12 Expressoes de avalia^ao 

Assim como muitas linguagens interpretadas, JavaScript tern a capacidade de interpretar strings de 
codigo-fonte, avaliando-as para produzir um valor. JavaScript faz isso com a fungao global eval(): 
eval("B+2") II => 5 

A avaliagao dinamica de strings de codigo-fonte e um recurso poderoso da linguagem que quase 
nunca e necessario na pratica. Se voce se encontrar usando eval(), deve considerar com atengao se 
realmente precisa usa-la. 

As subsegoes a seguir explicam o uso basico de eval() e, em seguida, explicam duas versoes restritas 
que tern menos impacto sobre o otimizador. 


eval() e uma fungao ou um operador? 

eval() e uma fungao, mas foi indufda nas expressoes deste capitulo porque na verdade deveria ser um 
operador. As primeiras versoes da linguagem definiam uma fungao eval() e desde entao os projetistas 
da linguagem e os escritores de interpretador vem impondo restrigoes a ela que a tornam cada vez mais 
parecida com um operador. Os interpretadores de JavaScript modernos fazem muita analise e otimizagao 
de codigo. 0 problema de eval() e que o codigo avaliado por ela geralmente nao pode ser decomposto. 
De modo geral, se uma funpio chama eval(), o interpretador nao pode otimizar essa fungao. 0 problema 
de definir eval() como uma fungao e que ela pode receber outros nomes: 

var f = eval; 
var g = f; 

Se isso for permitido, o interpretador nao podera otimizar com seguranga nenhuma fungao que chame 
g(). Esse problema poderia ser evitado se eval fosse um operador (e uma palavra reservada). Vamos 
aprender a seguir (na Segao 4.12.2 e na Segao 4.12.3) sobre as restrigoes impostas a eval() para torna-la 
mais parecida com um operador. 


4.12.1 eval() 

eval() espera um unico argumento. Se for passado qualquer valor que nao seja uma string, ela 
simplesmente retorna esse valor. Se for passada uma string, ela tenta analisar a string como codigo 
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JavaScript, lanpindo uma exceQo SyntaxError em caso de falha. Se conseguir analisar a string, entao 
ela avalia o codigo e retorna o valor da ultima expressao ou instru^ao da string ou undefined, caso a 
ultima expressao ou instrupio nao tenha valor algum. Se a string avaliada lan^a uma excepio, essa 
excepio e propagada a partir da chamada a eval(). 

O principal a saber sobre eval() (quando chamada desse modo) e que ela usa o ambiente da variavel 
do codigo que a chama. Isto e, ela pesquisa os valores das variaveis e define novas variaveis e fun^oes 
da mesma maneira como codigo local faz. Se uma funpio define uma variavel local x e, entao, chama 
eval("x"), ela obtem o valor da variavel local. Se chama eval("x=i"), ela altera o valor da variavel 
local. E se a funpio chama eval("var y = B;"), ela declarou uma nova variavel local y. Do mesmo 
modo, uma funpio pode declarar uma funpio local com codigo como o seguinte: 
eval("function f() { return x+1; }"); 

Se eval() e chamada a partir do codigo de nivel superior, ela opera sobre variaveis globais e fun^oes 
globais, evidentemente. 

Note que a string de codigo passado para eval() deve ter sentido sintatico - nao se pode usa-la 
para analisar fragmentos de codigo em uma funpio. Nao faz sentido escrever eval("return;"), por 
exemplo, pois return so vale dentro de funpies e o fato de a string avaliada usar o mesmo ambiente 
de variavel da funpio chamadora nao a torna parte dessa funpio. Se sua string faz sentido como um 
script independente (mesmo um muito curto, como x=o), e valido passa-la para eval(). Caso contra- 
rio, evalQ vai lanpir uma excepio SyntaxError. 

4.12.2 eval() global 

E a capacidade de eval() alterar variaveis locais que e tao problematica para os otimizadores de 
JavaScript. Contudo, como uma solupio de contorno, os interpretadores simplesmente fazem me- 
nos otimiza^ao em qualquer funpio que chame eval(). Mas o que um interpretador JavaScript deve 
fazer se um script define um alias para evalQ e depois chama essa funpio por outro nome? Para 
simplificar a tarefa dos implementadores de JavaScript, o padrao ECMAScript 3 declarava que os 
interpretadores nao precisavam permitir isso. Se a funpio evalQ fosse chamada por qualquer nome 
diferente de “eval”, era permitido lanpir uma excepio EvalError. 

Na pratica, a maioria dos implementadores fazia alguma coisa. Quando chamada por qualquer ou¬ 
tro nome, evalQ avaliava a string como se fosse codigo global de nivel superior. O codigo avaliado 
podia definir novas variaveis globais ou fun pies globais e podia configurar variaveis globais, mas nao 
podia utilizar nem modificar qualquer variavel local na firnfao chamadora e, portanto, nao interferia 
nas otimiza$oes locais. 

ECMAScript 5 desaprova EvalError e padroniza o comportamento de fato de evalQ. Uma “eval 
direta” e uma chamada da funpio evalQ com uma expressao que utiliza o nome “eval” exato, nao 
qualificado (que esta comepindo a se sentir uma palavra reservada). As chamadas diretas a evalQ 
utilizam o ambiente de variavel do contexto chamador. Qualquer outra chamada - uma chamada 
indireta - usa o objeto global como ambiente de variavel e nao pode ler, gravar nem definir variaveis 
ou fun pies locais. O codigo a seguir demonstra isso: 

var geval = eval; // Usar outro nome faz uma eval global 

var x = "global", y = "global"; // Duas variaveis globais 
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function f() { 

var x = "local"; 
eval(”x += 'changed';"); 

} r6tUrn X ’ 
function g() { 

geval(''y += 'changed';"); 
return y; 

} 

console.log(f(), x); 
console.log(g(), y); 


// Esta funijao faz uma eval local 
// Define uma variavel local 
// eval direta configura variavel local 
// Retorna variavel local alterada 

// Esta funijao faz uma eval global 
// Uma variavel local 

// eval indireta configura variavel global 
// Retorna variavel local inalterada 

// Variavel local alterada: imprime "localchanged 
// global”: 

// Variavel global alterada: imprime "local 
// globalchanged": 


Observe que a capacidade de fazer uma eval global nao e apenas uma adapta^ao as necessidades do 
otimizador; na verdade e um recurso tremendamente util: ele permite executar strings de codigo 
como se fossem scripts de nfvel superior independentes. Conforme observado no inicio desta se<jao, 
e raro precisar realmente avaliar uma string de codigo. Mas se voce achar necessario, e mais provavel 
que queira fazer um eval global do que um eval local. 


Antes do IE9, o IE e diferente dos outros navegadores: ele nao faz um eval global quando eval() e 
chamada por um nome diferente. (E tambem nao lantja uma exceQo EvalError - ele simplesmente 
faz um eval local.) Mas o IE define uma fun<jao global chamada execScript() que executa seu ar- 
gumento de string como se fosse um script de nfvel superior. (No entanto, ao contrario de eval(), 
execScriptQ sempre retorna null.) 


4.12.3 eval() restrito 

O modo restrito de ECMAScript 5 (consulte a Se<jao 5.7.3) impoe mais restri(joes sobre o comporta- 
mento da fun<jao eval() e ate sobre o uso do identificador “eval”. Quando eval() e chamada a partir 
de codigo de modo restrito ou quando a propria string de codigo a ser avaliada comeija com uma 
diretiva “use strict”, eval() faz um eval local com um ambiente de variavel privado. Isso significa 
que, no modo restrito, o codigo avaliado pode consultar e configurar variaveis locais, mas nao pode 
definir novas variaveis ou fun (joes no escopo local. 

Alem disso, o modo restrito torna eval() ainda mais parecida com um operador, transformando 
“eval” efetivamente em uma palavra reservada. Nao e permitido sobrescrever a funijao evalQ com 
um novo valor. E nao e permitido declarar uma variavel, funijao, parametro de fmujao ou parametro 
de bloco de captura com o nome “eval”. 


4.13 Operadores diversos 

JavaScript aceita diversos outros operadores, descritos nas seijoes a seguir. 

4.13.1 0 operador condicional (?:) 

O operador condicional e o unico operador ternario (tres operandos) de JavaScript e as vezes e 
chamado de operador ternario. Esse operador as vezes e escrito como ?:, embora nao apare<ja dessa 
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maneira em codigo. Como esse operador tem tres operandos, o primeiro flea antes de ?, o segundo 
flea entre ? e : e o terceiro flea depois de :. Ele e usado como segue: 
x > 0 ? x : -x // 0 valor absoluto de x 

Os operandos do operador conditional podem ser de qualquer tipo. O primeiro operando e ava- 
liado e interpretado como um valor booleano. Se o valor do primeiro operando e verdadeiro, entao 
o segundo operando e avaliado e seu valor e retornado. Caso contrario, se o primeiro operando e 
falso, entao o terceiro operando e avaliado e seu valor e retornado. Somente o segundo ou o terceiro 
operando e avaliado, nunca ambos. 

Embora seja possfvel obter resultados semelhantes usando a instru^ao if (Se^ao 5.4.1), o operador 
?: frequentemente oferece um atalho util. Aqui esta uma utiliza^ao tfpica, a qual verifica se uma va- 
riavel esta definida (e tem um valor verdadeiro significativo) e, se estiver, a utiliza ou, se nao estiver, 
fornece um valor padrao: 

greeting = "hello " + (username ? username : "there"); 

Isso e equivalente (mas mais compacto do que) a instru^ao if a seguir: 

greeting = "hello 
if (username) 

greeting += username; 

else 

greeting += "there"; 

4.13.2 0 operadortypeof 

typeof e um operador unario colocado antes de seu unico operando, o qual pode ser de qualquer 
tipo. Seu valor e uma string que especifica o tipo do operando. A tabela a seguir especifica o valor do 
operador typeof para qualquer valor de JavaScript: 


X typeof X 

undefined 


"indefinido" 

null 


"objeto" 

true ou false 


"booleano" 

qualquer numero ou NaN 


"numero" 

qualquer string 


"string" 

qualquer funcao 


"funqao" 

qualquer objeto nativo que na 

io seja 

"objeto" 

funqao 



qualquer objeto hospedeiro 


Uma string definida pela implementacao, mas nao 



"indefinido", "booleano", "numero" nem "string". 
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O operador typeof poderia ser usado em uma expressao como a seguinte: 

(typeof value == "string") ? " + value + : value 

O operador typeof tambem e util quando usado com a instru^ao switch (Se^ao 5.4.3). Note que 
voce pode colocar parenteses em torno do operando de typeof, o que faz typeof parecer ser o nome 
de uma funijao, em vez de uma palavra-chave de operador: 
typeof(i) 

Note que typeof retorna “objeto” se o valor do operando e null. Se quiser diferenciar null de objetos, 
sera necessario testar explicitamente esse valor de caso especial, typeof pode retornar uma string que 
nao seja “objeto” para objetos hospedeiros. Na pratica, contudo, a maioria dos objetos hospedeiros 
em JavaScript do lado do cliente tern o tipo “objeto”. 

Como typeof e avaliado como “objeto” para todos os valores de objeto e array que nao sejam fun- 
$oes, e util apenas para distinguir objetos de outros tipos primitivos. Para diferenciar uma classe de 
objetos de outra, devem ser usadas outras tecnicas, como o operador instanceof (consulte a Setjao 
4.9.4), o atributo class (consulte a Se^ao 6.8.2) ou a propriedade constructor (consulte a Setjao 6.8.1 
e a Se^ao 9.2.2). 

Embora em JavaScript as funijoes sejam um tipo de objeto, o operador typeof as considera suficien- 
temente diferentes para que tenham seus proprios valores de retorno. JavaScript faz uma distinijao 
sutil entre fun^oes e “objetos que podem ser chamados”. Todas as fun^oes podem ser chamadas, mas 
e possivel ter um objeto que pode ser chamado - exatamente como uma funi;ao - que nao seja uma 
fun^ao verdadeira. A especificasao ECMAScript 3 diz que o operador typeof retorna “funi;ao” para 
todo objeto nativo que possa ser chamado. A especifica^ao ECMAScript 5 amplia isso, exigindo que 
typeof retorne “fim^ao” para todos os objetos que possam ser chamados, sejam objetos nativos ou 
objetos hospedeiros. A maioria dos fornecedores de navegador utiliza objetos de funi;ao JavaScript na¬ 
tivos para os metodos de seus objetos hospedeiros. No entanto, a Microsoft sempre tern usado objetos 
que podem ser chamados nao nativos para seus metodos no lado do cliente, sendo que antes do IE 9 
o operador typeof retorna “objeto” para eles, mesmo que se comportem como funijoes. No IE9 esses 
metodos do lado do cliente sao agora verdadeiros objetos de fun$ao nativos. Consulte a Se$ao 8.7.7 
para mais informa^oes sobre a distin^ao entre fun^oes verdadeiras e objetos que podem ser chamados. 


4.13.3 0 operador delete 

delete e um operador unario que tenta excluir a propriedade do objeto ou elemento do array es- 
pecificado como operando 1 . Assim como os operadores de atribui^ao, incremento e decremento, 
delete e normalmente usado por seu efeito colateral de exclusao de propriedade e nao pelo valor que 
retorna. Alguns exemplos: 

var o = { x: 1, y: 2}; // Comeca com um objeto 

delete o.x; // Exclui uma de suas propriedades 

"x" in o // => falso: a propriedade nao existe mais 


Se voce e programador de C++, note que a palavra-chave delete em JavaScript nao tem nada a ver com a palavra-chave 
delete da C++. Em JavaScript, a desalocaqao de memoria e manipulada automaticamente pela coleta de lixo e nunca e 
preciso se preocupar em liberar memoria explicitamente. Assim, nao ha necessidade de um delete estilo C++ para excluir 
objetos inteiros. 




Capftulo4 Expressoes e operadores 83 


var a = [1,2,3]; // Comega com urn array 

delete a[2]; // Exclui o ultimo elemento do array 

2 in a // => falso: o elemento array 2 nao existe mais 

a.length // => 3: note que o comprimento do array nao muda 

Note que uma propriedade ou elemento de array exclufdo nao e simplesmente configurado com 
o valor undefined. Quando uma propriedade e excluida, ela deixa de existir. A tentativa de ler uma 
propriedade inexistente retorna undefined, mas e possivel testar a existencia de uma propriedade com 
o operador in (Sepio 4.9.3). 



delete espera que seu operando seja lvalue. Se nao for lvalue, o operador nao faz nada e retorna true. 
Caso contrario, delete tenta excluir o lvalue especificado. delete retorna true se tern exito em excluir 
o lvalue especificado. Contudo, nem todas as propriedades podem ser excluidas - algumas proprie- 
dades basicas internas e do lado do cliente sao imunes a exclusao e as variaveis definidas pelo usuario 
declaradas com a instrupio var nao podem ser excluidas. As funqAes definidas com a instrupio func¬ 
tion e os parametros de funpio declarados tambem nao podem ser excluidos. 


No modo restrito de ECMAScript 5, delete lanpi um SyntaxError se seu operando e um identifica- 
dor nao qualificado, como uma variavel, funpio ou parametro de funpio - ele so funciona quando o 
operando e uma expressao de acesso a propriedade (Sepio 4.4). O modo restrito tambem especifica 
que delete lanfa um TypeError se solicitado a excluir qualquer propriedade que nao possa ser con- 
figurada (consulte a Sepio 6.7). Fora do modo restrito nao ocorre qualquer excecao nesses casos e 
delete simplesmente retorna false para indicar que o operando nao pode ser exclufdo. 


Aqui estao alguns exemplos de uso do operador delete: 


delete o.x; 
typeof o.x; 
delete o.x; 
delete o; 

delete 1; 
this.x = 1; 
delete x; 


// Define uma variavel; a inicializa com um objeto 
// Exclui uma das propriedades do objeto; retorna true 
// A propriedade nao existe; retorna "indefinido" 

// Exclui uma propriedade inexistente; retorna true 
// Nao pode excluir uma variavel declarada; retorna false. 

// Lan^aria uma excecao no modo restrito. 

// 0 argumento nao e lvalue: retorna true 

// Define uma propriedade do objeto global a sem var 

// Tenta exclui-la: retorna true no modo nao restrito 

// Excecao no modo restrito. Use 'delete this.x' em vez disso 

// Erro de execucao: x nao esta definida 


Vamos ver o operador delete novamente na Sepio 6.3. 


4.13.4 0 operador void 

void e um operador unario que aparece antes de seu unico operando, o qual pode ser de qualquer 
tipo. Esse operador e incomum e pouco utilizado: ele avalia seu operando e, entao, descarta o valor 
e retorna undefined. Como o valor do operando e descartado, usar o operador void so faz sentido se 
o operando tiver efeitos colaterais. 

O uso mais comum desse operador e em um URL javascript: no lado do cliente, onde ele permite 
avaliar os efeitos colaterais de uma expressao sem que o navegador mostre o valor da expressao ava- 
liada. Por exemplo, voce poderia usar o operador void em uma marca <a> de HTML, como segue: 
<a href="javascript:void window.open();">0pen New Window</a> 
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Evidentemente, esse codigo HTML poderia ser escrito de forma mais limpa usando-se uma rotina 
de tratamento de evento onclick, em vez de um URL javascript sendo que, nesse caso, o operador 
void nao seria necessario. 

4.13.5 0 operador virgula (,) 

O operador vfrgula e um operador binario cujos operandos podem ser de qualquer tipo. Ele avalia o 
operando da esquerda, avalia o operando da direita e, entao, retorna o valor do operando da direita. 
Assim, a linha a seguir: 

1=0, j=i, k=2; 

e avaliada como 2 e e basicamente equivalente a: 
i = 0; j = l; k = 2; 

A expressao do lado esquerdo e sempre avaliada, mas seu valor e descartado, ou seja, so faz sentido 
utilizar o operador vfrgula quando a expressao do lado esquerdo tern efeitos colaterais. A unica si- 
tuaqao na qual o operador vfrgula costuma ser utilizado e em um la^o for (Se^ao 5.5.3) que tenha 
diversas variaveis: 

//A primeira virgula abaixo faz parte da sintaxe da instrucao var 
//A segunda virgula e o operador virgula: ele nos permite comprimir 
// duas expressoes (i++ e j--) em uma instrucao (o laco for) que espera uma. 
forfvar i=0,j=10; i < j; i++,j--) 

console.log(i+j); 




Capi'tulo 5 
Instru^oes 


O Capftulo 4 descreveu as expressoes em JavaScript como frases. De acordo com essa analogia, ins- 
trugoes sao sentences ou comandos em JavaScript. Assim como as senten^as nos idiomas humanos 
sao terminadas e separadas por pontos-finais, as instru^oes em JavaScript sao terminadas com ponto 
e virgula (Se^ao 2.5). As expressoes sao avaliadas para produzir um valor, mas as instnnjoes sao exe- 
cutadas para fazer algo acontecer. 

Uma maneira de “fazer algo acontecer” e avaliar uma expressao que tenha efeitos colaterais. As 
expressoes com efeitos colaterais, como as atribuifoes e as chamadas de funijao, podem aparecer 
sozinhas como instrufoes e, quando utilizadas dessa maneira, sao conbecidas como instrugoes de 
expressao. Uma categoria similar de instrugoes sao as instrugoes de declaragao, que declaram novas 
variaveis e definem novas fiin^oes. 

Os programas JavaScript nada mais sao do que uma sequencia de instrugoes a serem executadas. Por 
padrao, o interpretador JavaScript executa essas instrugoes uma apos a outra, na ordem em que sao 
escritas. Outro modo de “fazer algo acontecer” e alterar essa ordem de execuqao padrao, sendo que 
JavaScript tern varias instrugoes ou estruturas de controle que fazem justamente isso: 

• As condicionais sao instrugoes como if e switch que fazem o interpretador JavaScript executar 
ou pular outras instrugoes, dependendo do valor de uma expressao. 

• Lagos sao instrugoes como while e for que executant outras instrugoes repetidas vezes. 

• Saltos sao instrugoes como break, return e throw que fazem o interpretador pular para outra 
parte do programa. 

As se^oes a seguir descrevem as varias instrugoes de JavaScript e explicam sua sintaxe. ATabela 5-1, 
no final do capftulo, resume a sintaxe. Um programa JavaScript e simplesmente uma sequencia de 
instrugoes, separadas umas das outras com pontos e vfrgulas; portanto, uma vez que voce conhefa as 
instrugoes de JavaScript, pode come^ar a escrever programas em JavaScript. 



86 Parte I JavaScript basica 


5.1 lnstru{des de expressao 

Os tipos mais simples de instru^oes em JavaScript sao as expressoes que tem efeitos colaterais. (Mas 
consulte a Sepio 5.7.3 para ver uma importante instrupio de expressao sem efeitos colaterais.) Esse 
tipo de instrupio foi mostrado no Capitulo 4. As instrufoes de atribuipio sao uma categoria impor¬ 
tante de instrupio de expressao. Por exemplo: 
greeting = "Hello " + name; 
i *= 3; 

Os operadores de incremento e decremento, ++ e —, sao relacionados as instrucjoes de atribuipio. 
Eles tem o efeito colateral de alterar o valor de uma variavel, exatamente como se fosse feita uma 
atribuipio: 

counter++; 

O operador delete tem o importante efeito colateral de excluir uma propriedade de um objeto. 
Assim, ele e quase sempre utilizado como uma instru?ao e nao como parte de uma expressao maior: 
delete o.x; 

As chamadas de fun pro sao outra categoria importante de instrupio de expressao. Por exemplo: 

alert(greeting); 
window. closeQ; 

Essas chamadas de funfao no lado do cliente sao expressoes, mas tem efeitos colaterais que afetam 
o navegador Web e sao utilizadas aqui como instrufoes. Se uma funfao nao tem qualquer efeito 
colateral, nao tem sentido chama-la, a nao ser que fapi parte de uma expressao maior ou de uma 
instrupio de atribuipio. Por exemplo, voce nao calcularia um cosseno e simplesmente descartaria o 
resultado: 

Math.cos(x); 

Mas poderia calcular o valor e atribui-lo a uma variavel para uso futuro: 
cx = Math.cos(x); 

Note que cada linha de codigo de cada um desses exemplos e terminada com um ponto e virgula. 

5.2 lnstru{6escompostasevazias 

Assim como o operador virgula (Sepio 4.13.5) combina varias expressoes em uma, um bloco de 
instrugoes combina varias instru^oes em uma unica instrugao composta. Um bloco de instru^oes e 
simplesmente uma sequencia de instru^oes colocadas dentro de chaves. Assim, as linhas a seguir 
atuam como uma unica instrupio e podem ser usadas em qualquer lugar em que JavaScript espere 
uma unica instrupio: 

{ 

x = Math.PI; 

cx = Math.cos(x); 

console.log("cos(n) = " + cx); 

} 
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Existem algumas coisas a observar a respeito desse bloco de instru^oes. Primeiramente, ele nao ter- 
mina com um ponto e vfrgula. As instru^oes primitivas dentro do bloco terminam em pontos e 
vfrgulas, mas o bloco em si, nao. Segundo, as linhas dentro do bloco sao recuadas em rela^ao as 
chaves que as englobam. Isso e opcional, mas torna o codigo mais facil de ler e entender. Por fim, 
lembre-se de que JavaScript nao tern escopo de bloco e as variaveis declaradas dentro de um bloco de 
instrufoes nao sao privativas do bloco (consulte a Se^ao 3.10.1 para ver os detalhes). 

Combinar instru^oes em blocos de instnnjao maiores e extremamente comum na programa^ao 
JavaScript. Assim como as expressoes frequentemente content subexpressoes, muitas instrufoes 
JavaScript content subinstrufoes. Formalmente, a sintaxe de JavaScript em geral permite uma unica 
subinstruqao. Por exemplo, a sintaxe do lapt while inclui uma unica instru^ao que serve como corpo 
do la^o. Usando-se um bloco de instrufoes, e possivel colocar qualquer niimero de instru^oes dentro 
dessa unica subinstnnjao permitida. 

Uma instru^ao composta permite utilizar varias instru^oes onde a sintaxe de JavaScript espera uma 
unica instruqao. A instrugao vazia e o oposto: ela permite nao colocar nenhuma instrugao onde uma 
e esperada. A instrugao vazia e a seguinte: 


O interpretador JavaScript nao faz nada ao executar uma instrugao vazia. Ocasionalmente, a instru- 
qao vazia e util quando se quer criar um la^o com corpo vazio. Considere o la^o for a seguir (os la^os 
for vao ser abordados na Se<jao 5.5.3): 

// Inicializa um array a 

for(i = 0; i < a.length; a[i++] = 0) ; 

Nesse la<jo, todo o trabalho e feito pela expressao a[i++] = 0 e nenhum corpo e necessario no la?o. 
Conmdo, a sintaxe de JavaScript exige uma instrugao como corpo do la^o, de modo que e utilizada 
uma instrugao vazia - apenas um ponto e vfrgula. 

Note que a inclusao acidental de um ponto e vfrgula apos o parentese da direita de um la^o for, la^o 
while ou instrugao if pode causar erros frustrantes e diffceis de detectar. Por exemplo, o codigo a 
seguir provavelmente nao faz o que o autor pretendia: 

if ((a == 0) || (b == 0)); // Opa! Esta linha nao faz nada... 

o = null; // e esta linha e sempre executada. 

Ao se usar a instrugao vazia intencionalmente, e uma boa ideia comentar o codigo de maneira que 
deixe claro que isso esta sendo feito de proposito. Por exemplo: 
for(i = 0; i < a.length; a[i++] = 0) /* vazio */ ; 

5.3 Instrutdesdededara^ao 

var e function sao instrugdes de declaragao - elas declaram ou definem variaveis e fun (joes. Essas 
instrufoes definem identificadores (nomes de variavel e funfao) que podem ser usados em qual¬ 
quer parte de seu programa e atribuem valores a esses identificadores. As instnnjoes de declaragao 
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sozinhas nao fazem muita coisa, mas criando variaveis e funfoes, o que e importante, elas definem o 
significado das outras instrufoes de seu programa. 

As subse^oes a seguir explicam a instrufao var e a instrufao function, mas nao abordam as variaveis 
e funfoes amplamente. Consulte a Secjao 3.9 e a Sefao 3.10 para mais informafoes sobre variaveis. E 
consulte o Capitulo 8 para detalhes completos sobre fun foes. 


5.3.1 var 

A instrufao var declara uma (ou mais) variavel. Aqui esta a sintaxe: 
var nome_l [ = valoi_l] [ nome_n [= valoi_n ]] 

A palavra-chave var e seguida por uma lista separada com virgulas de variaveis a declarar; opcional- 
mente, cada variavel da lista pode ter uma expressao inicializadora especificando seu valor inicial. 
Por exemplo: 


var j = Oj 
var p, q; 

var greeting = "hello" + name; 

var x = 2.34, y = Math.cos(0.75), r, theta; 

var x = 2, y = x*x; 

f = function(x) { return x*x }, 

y = f(x)j 


// Uma variavel simples 

// Uma var, urn valor 

// Duas variaveis 

//Urn inicializador complexo 

// Muitas variaveis 

//A segunda variavel usa a primeira 

// Diversas variaveis... 

// cada uma em sua propria linha 


Se uma instrufao var aparece dentro do corpo de uma funfao, ela define variaveis locais com escopo 
nessa funfao. Quando var e usada em codigo de nivel superior, ela declara variaveis globais, visfveis 
em todo o programa JavaScript. Conforme observado na Sefao 3.10.2, as variaveis globais sao pro- 
priedades do objeto global. Contudo, ao contrario das outras propriedades globais, as propriedades 
criadas com var nao podem ser exclufdas. 

Se nenhum inicializador e especificado para uma variavel com a instrufao var, o valor inicial da 
variavel e undefined. Conforme descrito na Sefao 3.10.1, as variaveis sao definidas por todo o script 
ou funfao na qual sao declaradas - suas declarafoes sao “ifadas” para o inicio do script ou funfao. 
No entanto, a inicializafao ocorre no local da instrufao var e o valor da variavel e undefined antes 
desse ponto no codigo. 

Note que a instrufao var tambem pode aparecer como parte dos lafos for e for/in. (Essas variaveis 
sao ifadas, exatamente como as variaveis declaradas fora de um lafo.) Aqui estao exemplos, repetidos 
da Sefao 3.9: 

for(var i = 0; i < 10; i++) console.log(i); 

for(var i = 0, j=i0; i < 10; i++,j--) console.log(i*j); 

for(var i in o) console.log(i); 


Note que nao tern problema declarar a mesma variavel varias 
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5.3.2 function 

A palavra-chave function e usada para definir funijoes. Nos a vimos em expressoes de definipio de 
fun^ao, na Sepio 4.3. Ela tambem pode ser usada em forma de instru^ao. Considere as duas fun^oes 
a seguir: 

var f = function(x) { return x+1; } // Expressao atribuida a uma variavel 
function f(x) { return x+1; } //A instru<;ao inclui nome de variavel 

Uma instrupio de declarapio de funpio tern a seguinte sintaxe: 

function nomefun([argl [, arg2 [..., argn]]]) { 
instiugdes 

} 

nome fun e um identificador que da nome a funpio que esta sendo declarada. O nome da fun^ao e 
seguido por uma lista separada com virgulas de nomes de parametro entre parenteses. Esses iden- 
tificadores podem ser usados dentro do corpo da fun^ao para se referir aos valores de argumento 
passados quando a funpio e chamada. 

O corpo da funpio e composto de qualquer niimero de instru^oes JavaScript, contidas entre chaves. 
Essas instru^oes nao sao executadas quando a funpio e definida. Em vez disso, elas sao associadas 
ao novo objeto funpio, para execupio quando a funpio for chamada. Note que as chaves sao uma 
parte obrigatoria da instrupio function. Ao contrario dos blocos de instrupio utilizados com lap>s 
while e outras instnnjoes, o corpo de uma funpio exige chaves, mesmo que consista em apenas uma 
instrupio. 

Aqui estao mais alguns exemplos de declara^oes de funpio: 
function hypotenuse(x, y) { 

return Math.sqrt(x*x + y*y); // return esta documentado na proxima secao 

} 

function factorial(n) { // Uma fun<;ao recursiva 

if (n <= l) return 1; 
return n * factorial(n - l); 

} 

As instrupies de declarapio de funpio podem aparecer em codigo JavaScript de nivel superior ou 
estar aninhadas dentro de outras fun pies. Quando aninhadas, contudo, as declarapies de fun^ao so 
podem aparecer no nivel superior da funfao dentro da qual estao aninhadas. Isto e, defini^oes de 
funpio nao podem aparecer dentro de instrupies if, lap>s while ou qualquer outra instrupio. Por 
causa dessa restripio sobre onde as declarapies de funpio podem aparecer, a especificapio ECMAS- 
cript nao classifica as declarapies de funpio como verdadeiras instru^oes. Algumas implementa^oes 
de JavaScript permitem que declarapies de funpio aparepim onde quer que uma instrupio possa 
aparecer, mas diferentes implementapies tratam dos detalhes de formas diferentes e colocar declara- 
qoes de funpio dentro de outras instrupies nao e portavel. 

As instru$6es de declarapio de fun^ao diferem das expressoes de definipio de fun^ao porque 
incluem um nome de funpio. As duas formas criam um novo objeto funpio, mas a instrufao de 
declarafao de funpio tambem declara o nome da funpio como variavel e atribui o objeto fun¬ 
pio a ela. Assim como as variaveis declaradas com var, as funfoes definidas com instrupies de 
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definijao de funjao sao implicitamente “ijadas” para o topo do script ou funjao que as content, 
de modo que sejam visi'veis em todo o script ou funjao. Com var, somente a declarajao da va- 
riavel e ijada — o codigo de inicializajao da variavel permanece onde e colocado. Contudo, com 
instrujoes de declarajao de funjao, tanto o nome da funjao como o corpo da funjao sao ijados 
— todas as fun (joes de um script ou todas as fun joes aninhadas em uma funjao sao declaradas 
antes de qualquer outro codigo ser executado. Isso significa que e possivel chamar uma funjao 
em JavaScript antes de declara-la. 

Assim como a instrujao var, as instrujoes de declarajao de funjao criam variaveis que nao po- 
dem ser excluidas. Contudo, essas variaveis nao sao somente para leitura e seus valores podem 
ser sobrescritos. 

5.4 Condicionais 

As instrujoes condicionais executant ou pulam outras instrujoes, dependendo do valor de uma 
expressao especificada. Essas instrujoes sao os pontos de decisao de seu codigo e as vezes tambem 
sao conhecidas como “ramificajoes”. Se voce imaginar um interpretador JavaScript seguindo um 
caminho atraves de seu codigo, as instrujoes condicionais sao os lugares onde o codigo se ramifica 
em dois ou mais caminhos e o interpretador deve escolher qual caminho seguir. 

As subsejoes a seguir explicam a condicional basica de JavaScript, a instrujao if/else e tambem 
abordam switch, uma instrujao de ramificajao em multiplos caminhos, mais complicada. 


5.4.1 if 

A instrujao if e a instrujao de controle fundamental que permite a linguagem JavaScript tomar 
decisoes ou, mais precisamente, executar instrujoes condicionalmente. Essa instrujao tem duas for¬ 
mas. A primeira e: 

if ( expressao ) 
instrujao 

Nessa forma, a expressao e avaliada. Se o valor resultante e verdadeiro, a instrucao e executada. 
Se a expressao e falsa, a instrucao nao e executada. (Consulte a Sejao 3.3 para ver uma definijao 
de valores verdadeiros e falsos.) Por exemplo: 

if (username == null) // Se username e null ou undefined, 

username = "John Doe"; // o define 

Ou, de modo similar: 

// Se username e null, undefined, false, 0, "" ou NaN, fornece a ele um novo valor 
if (lusername) username = "John Doe"; 

Note que os parenteses em torno da expressao sao uma parte obrigatoria da sintaxe da instrujao if. 

A sintaxe de JavaScript exige uma instrujao apos a palavra-chave if e a expressao entre parenteses, 
mas pode-se usar um bloco de instrujoes para combinar varias instrujoes em uma so. Portanto, a 
instrujao if tambem poderia ser como segue: 
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if (laddress) { 

message = "Please specify a mailing address."; 

} 

A segunda forma da instru^ao if introduz uma clausula else, que e executada quando a expiessao e 
false. Sua sintaxe e: 

if ( expiessao) 
instrufaol 

else 

instrufdo2 

Essa forma da instruQo executa a instiucaol se a expiessao e verdadeira e executa a instrucao2 
se a expiessao e falsa. Por exemplo: 
if (n == 1) 

console.log("You have 1 new message."); 

else 

console.log("You have " + n + " new messages."); 

Quando instru^oes if com clausulas else forem aninhadas, e necessario um certo cuidado para 
garantir que a clausula else combine com a instruQo if apropriada. Considere as linhas a seguir: 

i = j = i; 

k = 2; 

if (i - j) 

if (j == k) 

console.logC'i equals k"); 

else 

console.log("i doesn't equal j"); // ERRADO!! 

Nesse exemplo, a instruQo if interna forma a instruQo unica permitida pela sintaxe da instruQo if 
externa. Infelizmente, nao esta claro (a nao ser pela dica dada pelo recuo) com qual if a clausula else 
esta relacionada. E, nesse exemplo, o recuo esta errado, pois um interpretador JavaScript interpreta 
o exemplo anterior como: 

if (i « j) { 
if (j == k) 

console.logC'i equals k"); 

else 

console.log("i doesn't equal j"); // OPA! 

} 

A regra em JavaScript (assim como na maioria das linguagens de programa^ao) e que, por padrao, 
uma clausula else faz parte da instruQo if mais proxima. Para tornar esse exemplo menos ambiguo 
e mais facil de ler, entender, man ter e depurar, deve-se usar chaves: 


if 


} 


(i == j) { 
if (j == k) { 

console.log(": 

} 


k"); 
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else { // Oue diferenca faz a posicao de uma chave! 

console.log("i doesn't equal j"); 

} 


Embora nao seja o estilo utilizado neste livro, muitos programadores se habituam a colocar os cor- 
pos de instrufoes if e else (assim como outras instnujoes compostas, como la^os while) dentro de 
chaves, mesmo quando o corpo consiste em apenas uma instru^ao. Fazer isso sistematicamente pode 
evitar o tipo de problema que acabamos de ver. 


5.4.2 else if 

A instruqao if/else avalia uma expressao e executa um codigo ou outro, dependendo do resultado. 
Mas e quando e necessario executar um entre varios codigos? Um modo de fazer isso e com a instru- 
?ao else if. else if nao e realmente uma instru?ao JavaScript, mas apenas um idioma de programa- 
?ao frequentemente utilizado que resulta da repetiqao de instru^oes if/else: 

if (n == 1) { 

// Executa o bloco de codigo #1 

} 

else if (n == 2) { 

// Executa o bloco de codigo #2 

} 

else if (n == 3) { 

// Executa o bloco de codigo #3 

} 

else { 

// Se tudo falhar, executa o bloco #4 

} 

Nao ha nada de especial nesse codigo. Trata-se apenas de uma serie de instru^oes if, onde cada if su- 
cessivo faz parte da clausula else da instru^ao anterior. Usar o idioma else if e preferfvel e mais legi- 
vel do que escrever essas instru^oes em sua forma totalmente aninhada e sintaticamente equivalente: 

if (n == 1) { 

// Executa o bloco de codigo #1 

} 

else { 


// Executa o bloco de codigo #2 

} 

else { 


// Executa o bloco de codigo #3 

} 

else { 


// Se tudo falhar, executa o bloco #4 


} 


} 


} 
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5.4.3 switch 

Uma instruqao if causa uma ramifica^ao no fluxo de execu^ao de um programa e e possivel usar o 
idioma else if para fazer uma ramificaqao de varios caminhos. Contudo, essa nao e a melhor soluqao 
quando todas as ramifica?6es dependem do valor da mesma expressao. Nesse caso, e um desperdfcio 
avaliar essa expressao repetidamente em varias instrufoes if. 

A instru^ao switch trata exatamente dessa situa^ao. A palavra-chave switch e seguida de uma expres¬ 
sao entre parenteses e de um bloco de codigo entre chaves: 

switch(expressdo) { 
instrufdes 

} 


Conmdo, a sintaxe completa de uma instru^ao switch e mais complexa do que isso. Varios locais no 
bloco de codigo sao rotulados com a palavra-chave case, seguida de uma expressao e dois-pontos. 
case e como uma instru^ao rotulada, exceto que, em vez de dar um nome a instru^ao rotulada, ela 
associa uma expressao a instru^ao. Quando uma instruQo switch e executada, ela calcula o valor da 
expressao e, entao, procura um rotulo case cuja expressao seja avaliada com o mesmo valor (onde 
a semelhan^a e determinada pelo operador ===). Se encontra um, ela come^a a executar o bloco de 
codigo da instruQo rotulada por case. Se nao encontra um case com um valor correspondente, ela 
procura uma instruQo rotulada com default :. Se nao houver um rotulo default :, a instruQo switch 
pula o bloco de codigo completamente. 


switch e uma instruQo confusa para explicar; seu funcionamento se torna muito mais claro com 
um exemplo. A instruQo switch a seguir e equivalente as instru^oes if /else repetidas, mostradas na 
seQo anterior: 


switch(n) { 

// Executa 




} 


// Executa 
default: 


// Come$a aqui se n === l 
bloco de codigo #1. 

// Para aqui 

// Come$a aqui se n === 2 
bloco de codigo #2. 

// Para aqui 

// Come^a aqui se n === 3 
bloco de codigo #3. 

// Para aqui 
// Se tudo falhar... 
bloco de codigo #4. 

// Para aqui 


Observe a palavra-chave break utilizada no final de cada case no codigo anterior. A instruQo bre¬ 
ak, descrita posteriormente neste capi'tulo, faz o interpretador pular para o final (ou “escapar”) da 
instruQo switch e continuar na instruQo seguinte. As clausulas case em uma instruQo switch espe- 
cificam apenas o ponto departida do codigo desejado; elas nao especificam ponto final algum. Na 
ausencia de instru^oes break, uma instruQo switch comefa a executar seu bloco de codigo no rotulo 
case correspondente ao valor de sua expressao e continua a executar as instru^oes ate atingir o final 
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do bloco. Em raras ocasioes, e util escrever codigo como esse, que “passa” de um rotulo case para 
o seguinte, mas 99% das vezes deve-se tomar o cuidado de finalizar cada case com uma instru^ao 
break. (Entretanto, ao usar switch dentro de uma funpio, pode-se utilizar uma instrupio return, em 
vez de uma instrupio break. Ambas servem para finalizar a instrupio switch e impedir que a execupio 
passe para o proximo case.) 

Aqui esta um exemplo mais realista da instrupio switch; ele converte um valor em uma string de um 
modo que depende do tipo do valor: 

function convert(x) { 
switch(typeof x) { 
case 'number': 

return x.toString(l6) 

return "" + x + ; 

default: 

return String(x); 

} 

} 

Note que, nos dois exemplos anteriores, as palavras-chave case sao seguidas por literals numericas e 
strings literals, respectivamente. E assim que a instrupio switch e mais frequentemente utilizada na 
pratica, mas note que o padrao ECMAScript permite que cada case seja seguido por uma expressao 
arbitraria. 

A instru?ao switch avalia primeiro a expressao que vem apos a palavra-chave switch e depois avalia 
as expressoes case, na ordem em que aparecem, ate encontrar um valor que coincida 1 . O case coin- 
cidente e determinado usando-se o operador de identidade === e nao o operador de igualdade ==, de 
modo que as expressoes devem coincidir sem qualquer conversao de tipo. 

Como nem todas as expressoes case sao avaliadas sempre que a instrupio switch e executada, voce 
deve evitar o uso de expressoes case que contenham efeitos colaterais, como chamadas de fun^ao 
ou atribuifoes. O caminho mais seguro e simplesmente limitar suas expressoes case as expressoes 
constantes. 

Conforme explicado anteriormente, se nenhuma das expressoes case corresponde a expressao 
switch, a instru?ao switch comefa a executar seu corpo na instru^ao rotulada como default:. 
Se nao ha rotulo default:, a instru^ao switch pula seu corpo completamente. Note que, nos 
exemplos anteriores, o rotulo default: aparece no final do corpo de switch, apos todos os rotulos 
case. Esse e um lugar logico e comum para ele, mas pode aparecer em qualquer lugar dentro do 
corpo da instruqao. 


// Converte o numero para um inteiro hexadecimal 
// Retorna a string colocada entre apostrofos 
// Converte qualquer outro tipo da maneira usual 


O fato de as expressoes case serem avaliadas em tempo de execupio torna a instrufao switch de JavaScript muito dife- 
rente (e menos eficiente) da instru?ao switch de C, C++ e Java. Nessas linguagens, as expressoes case devem ser constantes 
definidas em tempo de compiia^ao e devem ser do mesmo tipo, sendo que as instrufoes switch frequentemente podem ser 
compiladas em tabelas de salto altamente eficientes. 
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5.5 La^os 

Para entendermos as instruqoes condicionais, imaginamos o interpretador JavaScript seguindo 
um caminho de ramificaqao em seu codigo-fonte. As instrugoes de lago sao aquelas que desviam 
esse caminho para si mesmas a fim de repetir partes de seu codigo. JavaScript tem quatro instru- 
qoes de laqo: while, do/while, for e for/in. As subseqoes a seguir explicam cada uma delas, uma 
por vez. Um uso comum para laqos e na iteraqao pelos elementos de um array. A Seqao 7.6 dis¬ 
cute esse tipo de laqo em detalhes e aborda metodos de laqo especiais definidos pela classe Array. 

5.5.1 while 

Assim como a instruqao if e a condicional basica de JavaScript, a instruqao while e o laqo basico 
da linguagem. Ela tem a seguinte sintaxe: 

while ( expiessao) 
instrugao 

Para executar uma instruqao while, o interpretador primeiramente avaba a expiessao. Se o valor 
da expressao e falso, o interpretador pula a instrugao que serve de corpo do laqo e vai para a 
instruqao seguinte no programa. Se, por outro lado, a expiessao e verdadeira, o interpretador 
executa a instrugao e repete, pulando de volta para o inicio do laqo e avaliando a expressao 
novamente. Outra maneira de dizer isso e que o interpretador executa a instrugao repetidamen- 
te enquanto a expiessao e verdadeira. Note que e possfvel criar um laqo inflnito com a sintaxe 
while(true). 

Em geral, voce nao quer que JavaScript execute exatamente a mesma operaqao repetidamente. 
Em quase todo laqo, uma ou mais variaveis mudam a cada iteragao. Como as variaveis mudam, 
as aqoes realizadas pela execuqao da instrugao podem diferir a cada passagem pelo laqo. Alem 
disso, se a variavel (ou variaveis) que muda esta envolvida na expiessao, o valor da expressao pode 
ser diferente a cada passagem pelo laqo. Isso e importante; caso contrario, uma expressao que 
comeqasse verdadeira nunca mudaria e o laqo nunca terminaria! Aqui esta um exemplo de laqo 
while que imprime os numeros de 0 a 9: 

var count = 0; 
while (count < 10) { 
console.log(count); 
count++; 

} 

Como voce pode ver, a variavel count comeqa em 0 e e incrementada cada vez que o corpo do 
laqo e executado. Quando o laqo tiver executado 10 vezes, a expressao se torna false (isto e, a 
variavel count deixa de ser menor do que 10), a instruqao while termina e o interpretador pode 
passar para a proxima instruqao do programa. Muitos laqos tem uma variavel contadora como 
count. Os nomes de variavel i, j e k sao comumente utilizados como contadores de laqo, embora 
voce deva usar nomes mais descritivos se isso tornar seu codigo mais facil de entender. 
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5.5.2 do/while 

O lafo do/while e como um lafo while, exceto que a expressao do la^o e testada no final e nao no intcio 
do la$o. Isso significa que o corpo do lafo sempre e executado pelo menos uma vez. A sintaxe e: 

do 

instrugao 
while ( expiessao ); 

O la?o do/while e menos comumente usado do que seu primo while - na pratica, e um tanto inco- 
mum ter certeza de que se quer executar um la?o pelo menos uma vez. Aqui esta um exemplo de 
lapa do/while: 

function printArray(a) { 

var len = a.length, i = 0; 
if (len == 0) 

console.log("Empty Array"); 
else { 
do { 

console.log(a[i]); 

} while (++i < len); 

} 

} 

Existem duas diferen^as sintaticas entre o la^o do/while e o la^o while normal. Primeiramente, o 
la^o do exige a palavra-chave do (para marcar o imcio do la$o) e a palavra-chave while (para marcar 
o fim e introduzir a condiqao do la^o). Alem disso, o la?o do sempre deve ser terminado com um 
ponto e vfrgula. O la<jo while nao precisa de ponto e vfrgula se o corpo do la^o estiver colocado 
entre chaves. 

5.5.3 for 

A instru^ao for fornece uma constru^ao de la^o frequentemente mais conveniente do que a instru- 
9ao while. A instru^ao for simplifica os la^os que seguem um padrao comum. A maioria dos la?os 
tern uma variavel contadora de algum tipo. Essa variavel e inicializada antes que o la^o comece e e 
testada antes de cada iteraqao do la^o. Por fim, a variavel contadora e incrementada ou atualizada de 
algum modo no final do corpo do la^o, imediatamente antes que a variavel seja novamente testada. 
Nesse tipo de la$o, a inicializa^ao, o teste e a atualiza^ao sao as tres manipulates fundamentals de 
uma variavel de la^o. A instru^ao for codifica cada uma dessas tres manipulates como uma expres¬ 
sao e torna essas expressoes uma parte explicita da sintaxe do la$o: 

for (inicializacao ; teste ; inciemento) 
instzucao 

inicializacao, teste e inciemento sao tres expressoes (separadas com pontos e vfrgulas) que sao res- 
ponsaveis por inicializar, testar e incrementar a variavel de la^o. Colocar todas elas na primeira linha 
do la^o facilita entender o que um la^o for esta fazendo e evita erros, como esquecer de inicializar ou 
incrementar a variavel de la$o. 
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O modo mais simples de explicar o funcionamento de um la^o for e mostrando o la^o while equi¬ 
valente 2 : 

inicializacao; 
while(teste) { 
instiucao 
incremento ; 

} 

Em outras palavras, a expressao inicializacao e avaliada uma vez, antes que o la^o comece. Para 
ser util, essa expressao deve ter efeitos colaterais (normalmente uma atribui^ao). JavaScript tambem 
permite que inicializacao seja uma instru^ao de declara^ao de variavel var, de modo que e possivel 
declarar e inicializar um contador de laqx) ao mesmo tempo. A expressao teste e avaliada antes de 
cada itera^ao e controla se o corpo do latjo e executado. Se teste e avaliada como um valor ver- 
dadeiro, a instiucao que e o corpo do latjo e executada. Por fim, a expressao incremento e avaliada. 
Novamente, para ser util ela deve ser uma expressao com efeitos colaterais. De modo geral, ou ela e 
uma expressao de atribui^ao, ou ela utiliza os operadores ++ ou 

Podemos imprimir os numeros de 0 a 9 com um la?o for, como segue. Compare isso com o la$o 
while equivalente mostrado na se^ao anterior: 

for(var count = 0; count < 10; count++) 
console.log(count); 

E claro que os la<jos podem se tornar muito mais complexos do que esse exemplo simples e, as vezes, 
diversas variaveis sao alteradas em cada itera^ao do la^o. Essa situa^ao e o unico lugar em que o ope- 
rador virgula e comumente usado em JavaScript; ele oferece uma maneira de combinar varias expres- 
soes de inicializacao e incremento em uma unica expressao conveniente para uso em um la^o for: 

for(i = 0, j = 10 ; i < 10 ; i++, j--) 
sum += i * j; 

Em todos os nossos exemplos de laqx) ate aqui, a variavel de la^o era numerica. Isso e muito comum, 
mas nao necessario. O codigo a seguir usa um laqx) for para percorrer uma estrutura de dados tipo 
lista encadeada e retornar o ultimo objeto da lista (isto e, o primeiro objeto que nao tern uma pro- 
priedade next): 

function tail(o) { // Retorna a cauda da lista encadeada o 

for(; o.next; o = o.next) /* vazio */ ; II Percorre enquanto o.next e verdadeiro 

} retUr " °’ 

Note que o codigo anterior nao tern qualquer expressao inicializacao. Qualquer uma das tres 
expressoes pode ser omitida de um la^o for, mas os dois pontos e virgulas sao obrigatorios. Se voce 
omite a expressao teste, o loop se repete para sempre e for(;;) e outra maneira de escrever um la?o 
infinito, assim como while(true). 


Quando considerarmos a instru^ao continue, na Secao 5.6.3, vamos ver que esse lafo while nao e um equivalente exato 
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5.5.4 for/in 

A instru^ao for/ in utiliza a palavra-chave for, mas e um tipo de hqo completamente diferente do 
lafo for normal. Um lafo for/ in e como segue: 
for (variavel in objeto) 
instrugao 

variavel normalmente nomeia uma variavel, mas pode ser qualquer expressao que seja avaliada 
como lvalue (Se^ao 4.7.3) ou uma instru^ao var que declare uma unica variavel - deve ser algo 
apropriado para o lado esquerdo de uma expressao de atribui^ao. objeto e uma expressao avaliada 
como um objeto. Como sempre, instrucao e a instrucao ou bloco de instru^oes que serve como 
corpo do la$o. 

E facil usar um lai;o for normal para iterar pelos elementos de um array: 

for(var i = 0; i < a.length; i++) // Atribui indices do array a variavel i 

console.log(a[i]); // Imprime o valor de cada elemento do array 

O la$o for/in torna facil fazer o mesmo para as propriedades de um objeto: 

for(var p in o) // Atribui nomes de propriedade de o a variavel p 

console.log(o[p]); // Imprime o valor de cada propriedade 

Para executar uma instrucao for/in, o interpretador JavaScript primeiramente avalia a expressao 
objeto. Se for avaliada como null ou undefined, o interpretador pula o la?o e passa para a instrucao 
seguinte. Se a expressao e avaliada como um valor primitivo, esse valor e convertido em seu objeto 
empacotador equivalente (Sefao 3.6). Caso contrario, a expressao ja e um objeto. Agora o interpreta¬ 
dor executa o corpo do la^o, uma vez para cada propriedade enumeravel do objeto. Contudo, antes 
de cada itera^ao, o interpretador avalia a expressao variavel e atribui o nome da propriedade (um 
valor de string) a ela. 

Note que a variavel no laq:o for/in pode ser uma expressao arbitraria, desde que seja avaliada como 
algo adequado ao lado esquerdo de uma atribui^ao. Essa expressao e avaliada em cada passagem pelo 
lafo, ou seja, ela pode ser avaliada de forma diferente a cada vez. Por exemplo, e possfvel usar codigo 
como o seguinte para copiar os nomes de todas as propriedades de objeto em um array: 

var o = {x:l, y:2, z:3); 
var a = [], i = 0; 
for(a[i++] in o) /* vazio */; 

Os arrays em JavaScript sao simplesmente um tipo de objeto especializado e os indices de array sao 
propriedades de objeto que podem ser enumeradas com um la^o for/in. Por exemplo, colocar a 
linha a seguir no codigo anterior enumera os indices 0, 1 e 2 do array: 
for(i in a) console.log(i); 

O laq:o for/in nao enumera todas as propriedades de um objeto, mas somente as que sao enumeraveis 
(consulte a Se^ao 6.7). Os varios metodos internos definidos por JavaScript basica nao sao enume- 


As implementa<;6es ECMAScript 3 podem, 


: disso, lan<;ar um TypeError i 
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raveis. Todos os objetos tem um metodo toString(), por exemplo, mas o la<jo for/in nao enumera 
essa propriedade toString. Alem dos metodos internos, muitas outxas propriedades dos objetos in¬ 
terims nao sao enumeraveis. Contudo, todas as propriedades e metodos definidos pelo seu codigo 
sao enumeraveis. (Mas, em ECMAScript 5, e possivel torna-los nao enumeraveis usando as tecnicas 
explicadas na Se^ao 6.7.) As propriedades herdadas definidas pelo usuario (consulte a Secjao 6.2.2) 
tambem sao enumeradas pelo laps for/in. 



Se o corpo de um lap) for/ in exclui uma propriedade que ainda nao foi enumerada, essa proprie¬ 
dade nao vai ser enumerada. Se o corpo do lap> define novas propriedades no objeto, essas proprie¬ 
dades geralmente nao vao ser enumeradas. (No entanto, algumas implementafoes podem enumerar 
propriedades herdadas, adicionadas depois que o lap> comep.) 


5.5.4.1 Ordem de enumera^ao de propriedades 

A especificapio ECMAScript nao define a ordem na qual o lap> for/in enumera as propriedades de 
um objeto. Na pratica, contudo, as implementaffies de JavaScript de todos os principals fornece- 
dores de navegador enumeram as propriedades de objetos simples de acordo como foram definidas, 
com as propriedades mais antigas enumeradas primeiro. Se um objeto foi criado como objeto literal, 
sua ordem de enumerapio e a mesma das propriedades que aparecem no literal. Existem sites e bi- 
bliotecas na Web que contain com essa ordem de enumerapo e e improvavel que os fornecedores de 
navegador a alterem. 

O paragrafo anterior especifica uma ordem de enumerapo de propriedade que serve indistintamen- 
te para objetos “simples”. A ordem de enumerapo se torna dependente da implementapo (e nao 
serve indistintamente) se: 

• o objeto herda propriedades enumeraveis; 

• o objeto tem propriedades que sao indices inteiros de array; 

• delete foi usado para excluir propriedades existentes do objeto; ou 

• Object.defineProperty() (Sepo 6.7) ou metodos semelhantes foram usados para alterar atri- 
butos da propriedade do objeto. 

Normalmente (mas nao em todas as implementapes), as propriedades herdadas (consulte a 
Sepo 6.2.2) sao enumeradas depois de todas as propriedades “proprias” nao herdadas de um 
objeto, mas tambem sao enumeradas na ordem em que foram definidas. Se um objeto herda 
propriedades de mais de um “prototipo” (consulte a Se?ao 6.1.3) - isto e, se ele tem mais de um 
objeto em seu “encadeamento de prototipos” -, entao as propriedades de cada objeto prototipo 
do encadeamento sao enumeradas na ordem de cria?ao, antes da enumera?ao das propriedades 
do objeto seguinte. Algumas implementa?6es (mas nao todas) enumeram propriedades de array 
na ordem numerica, em vez de usar a ordem de cria^ao, mas revertem a ordem de criaqao se o 
array tambem receber outras propriedades nao numericas ou se o array for esparso (isto e, se estao 
faltando alguns indices do array). 
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5.6 Saltos 

Outra categoria de instrufoes de JavaScript sao as instrugoes de salto. Conforme o nome lembra, elas 
fazem o interpretador JavaScript saltar para um novo local no codigo-fonte. A instru^ao break faz 
o interpretador saltar para o final de um lafo ou para outra instnnjao. continue faz o interpretador 
pular o restante do corpo de um lafo e voltar ao initio de um la^o para comeqar uma nova itera^ao. 
JavaScript permite que as instrufoes sejam nomeadas (ou rotuladas), sendo que break e continue 
podem identificar o la^o de destino ou outro rotulo de instru^ao. 

A instru^ao return faz o interpretador saltar de uma chamada de funqtio de volta para o codigo 
que a chamou e tambem fornece o valor para a chamada. A instru^ao throw provoca (ou “lan<;a”) 
uma exce?ao e foi projetada para trabalhar com a instru^ao try/catch/finally, a qual estabelece 
um bloco de codigo de tratamento de exce?ao. Esse e um tipo complicado de instruqao de salto: 
quando uma exceqao e lan^ada, o interpretador pula para a rotina de tratamento de exce?ao cir- 
cundante mais proxima, a qual pode estar na mesma fun$ao ou acima na pilha de chamada, em 
uma fun^ao invocadora. 

Os detalhes de cada uma dessas instru^oes de salto estao nas se^oes a seguir. 

5.6.1 Instru^oes rotuladas 

Qualquer instrufao pode ser rotulada por ser precedida por um identificador e dois-pontos: 
identificador: instrucao 

Rotulando uma instrucao, voce da a ela um nome que pode ser usado para se referir a ela em qual¬ 
quer parte de seu programa. E possivel rotular qualquer instrucao, embora so seja util rotular ins- 
tru^oes que tenham corpos, como la?os e condicionais. Dando um nome a um la^o, voce pode usar 
instru^oes break e continue dentro do corpo do la?o para sair dele ou para pular diretamente para o 
seu initio, a fim de come^ar a proxima itera^ao. break e continue sao as unicas instru^oes em JavaS¬ 
cript que utilizam rotulos; elas sao abordadas posteriormente neste capitulo. Aqui esta um exemplo 
de la^o while rotulado e de uma instrucao continue que utiliza o rotulo. 
mainloop: while(token != null) { 

// Codigo omitido... 

continue mainloop; // Pula para a proxima iteracao do laco nomeado 

// Mais codigo omitido... 

} 

O identificador utilizado para rotular uma instrucao pode ser qualquer identificador JavaScript 
valido, que nao seja uma palavra reservada. O espa?o de nomes para rotulos e diferente do espa- 
?o de nomes para variaveis e funfoes; portanto, pode-se usar o mesmo identificador como rotulo 
de instrucao e como nome de variavel ou funqtio. Os rotulos de instrucao sao definidos somente 
dentro da instrucao na qual sao aplicados (e dentro de suas subinstrufoes, evidentemente). Uma 
instrucao pode nao ter o mesmo rotulo de uma instrucao que a contem, mas duas instru?oes po¬ 
dem ter o mesmo rotulo, desde que nenhuma delas esteja aninhada dentro da outra. As proprias 
instru?oes rotuladas podem ser rotuladas. Efetivamente, isso significa que qualquer instrucao 
pode ter varios rotulos. 
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5.6.2 break 

A instru^ao break, utilizada sozinha, faz com que o la^o ou instruqao switch circundante mais inter¬ 
na seja abandonada imediatamente. Sua sintaxe e simples: 
break; 

Como ela e usada para sair de um lapa ou switch para sair, essa forma da instrupio break e valida 
apenas dentro de uma dessas instrufoes. 



Ja vimos exemplos da instruqao break dentro de uma instrupio switch. Em la^os, ela e normalmente 
utilizada para sair prematuramente, quando, por qualquer motivo, nao ha mais qualquer necessida- 
de de completar o laps. Quando um lap) tern condi^oes de termino complexas, frequentemente e 
mais facil implementar algumas dessas condi^oes com instrufoes break do que tentar expressar todas 
elas em uma unica expressao de lap). O codigo a seguir procura um valor especffico nos elementos 
de um array. O lap) termina normalmente ao chegar no fim do array; ele termina com uma instru- 
pio break se encontra o que esta procurando no array: 
for(var i = 0; i < a.length; i++) { 
if (a[i] == target) break; 

} 


JavaScript tambem permite que a palavra-chave break seja seguida por um rotulo de instrupio (ape¬ 
nas o identificador, sem os dois-pontos): 
break nomerotulo ; 


Quando a instrupio break e usada com um rotulo, ela pula para o final (ou termina) da instrupio 
circundante que tern o rotulo especificado. Se nao houver qualquer instrupio circundante com o 
rotulo especificado, e um erro de sintaxe usar break dessa forma. Nessa forma da instruQo break, 
a instrupio nomeada nao precisa ser um lap) ou switch: break pode “sair de” qualquer instrupio 
circundante. Essa instrupio pode ate ser um bloco de instruqdes agrupadas dentro de chaves, com o 
unico objetivo de nomear o bloco com um rotulo. 

Nao e permitido um caractere de nova linha entre a palavra-chave break e nomeiotulo. Isso e resulta- 
do da inserijao automatica de pontos e virgulas omitidos de JavaScript: se um terminador de linha e 
colocado entre a palavra-chave break e o rotulo que se segue, JavaScript presume que se quis usar a 
forma simples, nao rotulada, da instruQo e trata o terminador de linha como um ponto e vfrgula. 
(Consulte a SeQo 2.5.) 

A forma rotulada da instruQo break e necessaria quando se quer sair de uma instruQo que nao e o 
lap) ou uma instruQo switch circundante mais proxima. O codigo a seguir demonstra isso: 

var matrix = getDataQ; // Obtem um array 2D de numeros de algum lugar 

// Agora soma todos os numeros da matriz. 
var sum = 0, success = false; 

// Comeca com uma instrugao rotulada da qual podemos sair se ocorrerem erros 
compute_sum: if (matrix) { 

for(var x = 0; x < matrix.length; x++) { 
var row = matrixfx]; 
if (!row) break compute_sum; 
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for(var y = 0; y < row.length; y++) { 
var cell = row[y]; 
if (isNaN(cell)) break compute_sum; 
sum += cell; 

} 

} 

} 

// As instru^oes break pulam para ca. Se chegamos aqui com success == false, 

// entao algo deu errado com a matriz que recebemos. 

// Caso contrario, sum contem a soma de todas as celulas da matriz. 

Por fim, note que uma instrupio break, com ou sem rotulo, nao pode transferir o controle para alem 
dos limites da funpio. Nao se pode rotular uma instrupio de definipio de fun^ao, por exemplo, e 
depois usar esse rotulo dentro da funpio. 

5.6.3 continue 

A instrupio continue e semelhante a instru^ao break. No entanto, em vez de sair de um lap), conti¬ 
nue reinicia um lap) na proxima itera$ao. A sintaxe da instrupao continue e tao simples quanto a da 
instrupao break: 
continue; 

A instrupio continue tambem pode ser usada com um rotulo: 
continue nomeiotulo ; 

A instrupio continue, tanto em sua forma rotulada como na nao rotulada, so pode ser usada dentro 
do corpo de um lap). Utiliza-la em qualquer outro lugar causa erro de sintaxe. 

Quando a instrupio continue e executada, a iterapio amal do lap) circundante e terminada e a proxi¬ 
ma iterapio comep. Isso significa coisas diferentes para diferentes tipos de lapas: 

• Em um lap) while, a expressao especificada no inicio do lap) e testada novamente e, se for 
true, o corpo do lap) e executado desde o inicio. 

• Em um lap) do/while, a execupio pula para o final do lap), onde a condipro de lap) e nova¬ 
mente testada, antes de recomepar o lapo desde o inicio. 

• Em um la<;o for, a expressao de inciemento e avaliada e a expressao de teste e novamente testa¬ 
da para determinar se deve ser feita outra iterapao. 

• Em um lapo for/in, o lap) comepa novamente com o proximo nome de propriedade sendo 
atribuido a variavel especificada. 

Note a diferenpa no comportamento da instrupao continue nos lapos while e for: um lapo while re- 
torna diretamente para sua condipao, mas um lapo for primeiramente avalia sua expressao de incie¬ 
mento e depois retorna para sua condipio. Anteriormente, consideramos o comportamento do laps 
for em termos de um lap) while “equivalente”. Contudo, como a instrupao continue se comporta 
diferentemente para esses dois lapos, nao e possivel simular perfeitamente um lap) for com um lap) 
while sozinho. 
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O exemplo a seguir mostra uma instruqao continue nao rotulada sendo usada para pular o restante 
da iteraQo atual de um lapo quando ocorre um erro: 
for(i = 0; i < data.length; i++) { 

if (!data[i]) continue; // Nao pode prosseguir com dados indefinidos 

total += data[i]; 

} 

Assim como a instru<jao break, a instru^ao continue pode ser usada em sua forma rotulada dentro 
de laq:os aninhados, quando o la<jo a ser reiniciado nao e o la^o imediatamente circundante. Alem 
disso, assim como na instruQo break, nao sao permitidas quebras de linha entre a instrufao continue 
e seu nomerotulo. 

5.6.4 return 

Lembre-se de que as chamadas de funqtio sao expressoes e de que todas as expressoes tern valores. 
Uma instru^ao return dentro de uma funfao especifica o valor das chamadas dessa funijao. Aqui esta 
a sintaxe da instru^ao return: 
return expressao ; 

A instru^ao return so pode aparecer dentro do corpo de uma fun^ao. E erro de sintaxe ela aparecer 
em qualquer outro lugar. Quando a instruQo return e executada, a funQo que a content retorna o 
valor de expressao para sua chamadora. Por exemplo: 

function square(x) { return x*x; } // Uma fun^ao que tem instruqao return 

square(2) // Esta chamada e avaliada como 4 

Sem uma instruQo return, uma chamada de funQo simplesmente executa cada uma das instru?oes 
do corpo da funqao ate chegar ao fim da funQo e, entao, retorna para sua chamadora. Nesse caso, 
a expressao de invocaQo e avaliada como undefined. A instrufao return aparece frequentemente 
como a ultima instruQo de uma funijao, mas nao precisa ser a ultima: uma funijao retorna para sua 
chamadora quando uma instruQo return e executada, mesmo que ainda restem outras instrufoes 
no corpo da funijao. 

A instruQo return tambem pode ser usada sem uma expressao, para fazer a funQo retornar unde¬ 
fined para sua chamadora. Por exemplo: 
function display_objeto(o) { 

// Retorna imediatamente se o argumento for null ou undefined, 
if (!o) return; 

// 0 restante da fun^ao fica aqui... 

} 

Por causa da inserQo automatica de ponto e virgula em JavaScript (Se^ao 2.5), nao se pode incluir 
uma quebra de linha entre a palavra-chave return e a expressao que a segue. 

5.6.5 throw 

Uma excegao e um sinal indicando que ocorreu algum tipo de condiQo exceptional ou erro. Disparar 
uma excegao e sinalizar tal erro ou condiQo exceptional. Capturar uma excegao e tratar dela - execu- 
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tar as afoes necessarias ou apropriadas para se recuperar da excepio. Em JavaScript, as exceedes sao 
lanpidas quando ocorre um erro em tempo de execupio e quando o programa lan^a uma explicita- 
mente, usando a instrupio throw. As exce^oes sao capturadas com a instrupio try/catch/finally, a 
qual esta descrita na proxima sepio. 

A instrupio throw tern a seguinte sintaxe: 
throw expressao; 

expressao pode ser avaliada com um valor de qualquer tipo. Pode-se lanpir um numero representan- 
do um codigo de erro ou uma string contendo uma mensagem de erro legivel para seres humanos. A 
classe Error e suas subclasses sao usadas quando o proprio interpretador JavaScript lanpi um erro, e 
voce tambem pode usa-las. Um objeto Error tern uma propriedade name que especifica o tipo de erro 
e uma propriedade message que contem a string passada para a fun^ao construtora (consulte a classe 
Error na sepio de referenda). Aqui esta um exemplo de funpio que lanpi um objeto Error quando 
chamada com um argumento invalido: 
function factorial(x) { 

// Se o argumento de entrada e invalido, dispara uma excefao! 
if (x < 0) throw new Error("x must not be negative"); 

// Caso contrario, calcula um valor e retorna normalmente 
for(var f = 1; x > 1; f *= x, x--) /* vazio */ ; 
return f; 

} 

Quando uma excepio e disparada, o interpretador JavaScript interrompe imediatamente a execupio 
normal do programa e pula para a rotina de tratamento de excepio mais proxima. As rotinas de 
tratamento de excepio sao escritas usando a clausula catch da instrupio try/catch/finally, que esta 
descrita na proxima sepio. Se o bloco de codigo no qual a excepio foi lanpida nao tern uma clausula 
catch associada, o interpretador verifica o proximo bloco de codigo circundante mais alto para ver se 
ele tern uma rotina de tratamento de excepio associada. Isso continua ate uma rotina de tratamento 
ser encontrada. Se uma excepio e lanpida em uma funpio que nao contem uma instrupio try/catch/ 
finally para tratar dela, a excepio se propaga para o codigo que chamou a funpio. Desse modo, as 
exce^oes se propagam pela estrutura lexica de metodos de JavaScript e para cima na pilha de chama- 
das. Se nenhuma rotina de tratamento de excepio e encontrada, a excepio e tratada como erro e o 
usuario e informado. 

5.6.6 try/catch/finally 

A instrupio try/catch/finally e o mecanismo de tratamento de excepio de JavaScript. A clausula 
try dessa instrupio simplesmente define o bloco de codigo cujas exce$oes devem ser tratadas. O 
bloco try e seguido de uma clausula catch, a qual e um bloco de instrufoes que sao chamadas quan¬ 
do ocorre uma exce^ao em qualquer lugar dentro do bloco try. A clausula catch e seguida por um 
bloco finally contendo o codigo de limpeza que e garantidamente executado, independente do que 
acontepi no bloco try. Os blocos catch e finally sao opcionais, mas um bloco try deve estar acom- 
panhado de pelo menos um desses blocos. Os blocos try, catch e finally comepim e terminam com 
chaves. Essas chaves sao uma parte obrigatoria da sintaxe e nao podem ser omitidas, mesmo que uma 
clausula contenha apenas uma instrupio. 
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O codigo a seguir ilustra a sintaxe e o objetivo da instrupio try/catch/finally: 


try { 


// Normalmente, este codigo e executado do inicio ao fim do bloco 
// sem problemas. Mas as vezes pode disparar uma exceqao 
// diretamente, com uma instrucao throw, ou indiretamente, pela 
// chamada de urn metodo que lanca uma exceqao. 

} 

catch (e) { 

// As instruqoes deste bloco sao executadas se, e somente se, o bloco 
// try dispara uma exceqao. Essas instruqoes podem usar a variavel local 
// e se referir ao objeto Error ou a outro valor que foi lancado. 

// Este bloco pode tratar da excecao de algum modo, pode ignora-la 
// nao fazendo nada ou pode lancar a exceqao novamente com throw. 

} 

finally { 

// Este bloco contem instrucoes que sao sempre executadas, independente 
// do que aconteca no bloco try. Elas sao executadas se o bloco 
// try terminar: 

// l) normalmente, apos chegar ao final do bloco 

// 2) por causa de uma instruqao break, continue ou return 

// 3) com uma exceqao que e tratada por uma clausula catch anterior 

// 4) com uma exceqao nao capturada que ainda esta se propagando 

} 



Note que a palavra-chave catch e seguida por um identiflcador entre parenteses. Esse identificador 
e como um parametro de funpio. Quando uma excecao e capturada, o valor associado a excecao 
(um objeto Error, por exemplo) e atribufdo a esse parametro. Ao contrario das variaveis normals, o 
identificador associado a uma clausula catch tern escopo de bloco - ele e definido apenas dentro do 
bloco catch. 


Aqui esta um exemplo realista da instrucao try/catch. Ele usa o metodo factorialQ definido na 
sepio anterior e os metodos JavaScript do lado do cliente promptQ e alertQ para entrada e saida: 
try { 

// Pede para o usuario inserir um numero 

var n = Number(prompt("Please enter a positive integer", 

// Calcula o fatorial do numero, supondo que a entrada seja valida 
var f = factorial(n); 

// Mostra o resultado 
alert(n +"!="+ f); 

} 

catch (ex) { // Se a entrada do usuario nao foi valida, terminamos aqui 

alert(ex); // Informa ao usuario qual e o erro 

} 

Esse exemplo e uma instrucao try/catch sem qualquer clausula finally. Embora finally nao seja 
usada tao frequentemente quanto catch, ela pode ser util. Contudo, seu comportamento exige mais 
explicates. E garantido que a clausula finally e executada se qualquer parte do bloco try e exe- 
cutada, independente de como o codigo do bloco try termina. Ela e geralmente usada para fazer a 
limpeza apos o codigo na clausula try. 
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No caso normal, o interpretador JavaScript chega ao final do bloco try e entao passa para o bloco 
finally, o qual faz toda limpeza necessaria. Se o interpretador sai do bloco try por causa de uma 
instrupio return, continue ou break, o bloco finally e executado antes que o interpretador pule para 
seu novo destino. 

Se ocorre uma excepio no bloco try e existe um bloco catch associado para tratar da excepio, o in¬ 
terpretador primeiramente executa o bloco catch e depois o bloco finally. Se nao ha qualquer bloco 
catch local para tratar da excepio, o interpretador primeiramente executa o bloco finally e depois 
pula para a clausula catch circundante mais proxima. 

Se o proprio bloco finally causa um salto com uma instrupio return, continue, break ou throw, ou 
chamando um metodo que lanpi uma excepio, o interpretador abandona o salto que estava pen¬ 
dente e realiza o novo salto. Por exemplo, se uma clausula finally lanp uma excepo, essa excepio 
substitui qualquer outra que estava no processo de ser lanpida. Se uma clausula finally executa uma 
instrupio return, o metodo retorna normalmente, mesmo que uma excepo tenha sido lanpida e 
ainda nao tratada. 

try e finally podem ser usadas juntas, sem uma clausula catch. Nesse caso, o bloco finally e sim- 
plesmente codigo de limpeza que garantidamente e executado, independente do que acontep no 
bloco try. Lembre-se de que nao podemos simular completamente um lap for com um lap) whi¬ 
le, pois a instrupo continue se comporta diferentemente para os dois laps. Se adicionamos uma 
instrupio try/finally, podemos escrever um loop while que funciona como um lap) for e que trata 
instrupes continue corretamente: 

// Simula o corpo de for( inicializacao ; teste ; inciemento ); 
inicializacao ; 
while ( teste ) { 
try { corpo ; } 
finally { inciemento ; } 

} 

Note, entretanto, que um corpo que contem uma instrupio break se comporta de modo ligeira- 
mente diferente (causando um incremento extra antes de sair) no lap) while e no lap for; portanto, 
mesmo com a clausula finally, nao e possfvel simular completamente o lap for com while. 

5.7 lnstru{des diversas 

Esta sepio descreve as tres instrupes restantes de JavaScript - with, debugger e use strict. 


5.7.1 with 

Na Sepio 3.10.3, discutimos o encadeamento de escopo - uma lista de objetos que sao pesquisados, 
em ordem, para realizar a solupio de nomes de variavel. A instrupio with e usada para ampliar o 
encadeamento de escopo temporariamente. Ela tern a seguinte sintaxe: 

with ( objeto ) 
instrucao 
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Essa instru^ao adiciona objeto na frente do encadeamento de escopo, executa instiucao e, entao, 
restaura o encadeamento de escopo ao seu estado original. 

A insmnjao with e proibida no modo restrito (consulte a Secjao 5.7.3) e deve ser considerada desa- 
provada no modo nao restrito: evite usa-la, quando possivel. Um codigo JavaScript que utiliza with 
e dificil de otimizar e e provavel que seja executado mais lentamente do que um codigo equivalente 
escrito sem a instru^ao with. 

O uso comum da instruqao with e para facilitar o trabalho com hierarquias de objeto profimdamente 
aninhadas. Em JavaScript do lado do cliente, por exemplo, talvez seja necessario digitar expressoes 
como a seguinte para acessar elementos de um formulario HTML: 

document.forms[0].address.value 

Caso precise escrever expressoes como essa varias vezes, voce pode usar a instruqao with para adicio- 
nar o objeto formulario no encadeamento de escopo: 

with(document.forms[0]) { 

// Acessa elementos do formulario diretamente aqui. Por exemplo: 

address.value = 
email.value = 

} 

Isso reduz o volume de digita^ao necessaria: nao e mais preciso prefixar cada nome de propriedade 
do formulario com document.forms[0], Esse objeto faz parte do encadeamento de escopo tempora- 
riamente e e pesquisado automaticamente quando JavaScript precisa solucionar um identificador, 
como address. E claro que e muito simples evitar a instrufao with e escrever o codigo anterior como 
segue: 

var f = document.formsfO]; 

f.address.value = 
f.email.value = 

Lembre-se de que o encadeamento de escopo e usado somente ao se pesquisar identificadores e nao 
ao se criar outros novos. Considere este codigo: 

with(o) x = 1 ; 

Se o objeto o tern uma propriedade x, entao esse codigo atribui o valor l a essa propriedade. Mas 
se x nao esta definida em o, esse codigo e o mesmo que x = l sem a instru?ao with. Ele atribui 
a uma variavel local ou global chamada x ou cria uma nova propriedade do objeto global. Uma 
instruqao with fornece um atalho para ler propriedades de o, mas nao para criar novas proprie- 
dades de o. 

5.7.2 debugger 

A instru^ao debugger normalmente nao faz nada. No entanto, se um programa depurador estiver dis- 
ponivel e em execu^ao, entao uma implementa^ao pode (mas nao e obrigada a) executar algum tipo 
de aq:ao de depura^ao. Na pratica, essa instruqao atua como um ponto de interrup^ao: a execu^ao do 
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codigo JavaScript para e voce pode usar o depurador para imprimir valores de variaveis, examinar a 
pilha de chamada, etc. Suponha, por exemplo, que voce esteja obtendo uma exce^ao em sua funijao 
f () porque ela esta sendo chamada com um argumento indefinido e voce nao consegue descobrir de 
onde essa chamada esta vindo. Para ajudar na depura^ao desse problema, voce poderia alterar f () de 
modo que comefasse como segue: 
function f(o) { 

if (o === undefined) debugger; // Linha temporaria para propositos de depuracao 
... // 0 restante da funqao fica aqui. 

} 

Agora, quando f() for chamada sem argumentos, a execu^ao vai parar e voce podera usar o depu¬ 
rador para inspecionar a pilha de chamada e descobrir de onde esta vindo essa chamada incorreta. 

debugger foi adicionada formalmente na linguagem por ECMAScript 5, mas tern sido implemen- 
tada pelos principals fornecedores de navegador ha bastante tempo. Note que nao e suficiente ter 
um depurador disponivel: a instru^ao debugger nao vai iniciar o depurador para voce. No entanto, 
se um depurador ja estiver em execu^ao, essa instru^ao vai causar um ponto de interrup^ao. Se voce 
usa a extensao de depuracao Firebug para Firefox, por exemplo, deve ter o Firebug habilitado para a 
pagina Web que deseja depurar para que a instru^ao debugger funcione. 

5.7.3 "use strict" 

"use strict" e uma diretiva introduzida em ECMAScript 5. As diretivas nao sao instru^oes (mas sao 
parecidas o suficiente para que "use strict" seja documentada aqui). Existem duas diferen^as impor- 
tantes entre a diretiva "use strict" e as instrufoes normais: 

• Ela nao inclui qualquer palavra-chave da linguagem: a diretiva e apenas uma instnnjao de 
expressao que consiste em uma string literal especial (entre aspas simples ou duplas). Os inter- 
pretadores JavaScript que nao implementam ECMAScript 5 vao ver simplesmente uma ins- 
tnnjao de expressao sem efeitos colaterais e nao farao nada. E esperado que as fiituras versoes 
do padrao ECMAScript apresentem use como uma verdadeira palavra-chave, permitindo que 
as aspas sejam eliminadas. 

• Ela so pode aparecer no inicio de um script ou no inicio do corpo de uma fun^ao, antes que 
qualquer instru^ao real tenha aparecido. Contudo, nao precisa ser o primeiro item no script ou 
na fun^ao: uma diretiva "use strict" pode ser seguida ou precedida por outras instru^oes de 
expressao de string literal, sendo que as implementa^oes de JavaScript podem interpretar essas 
outras strings literais como diretivas definidas pela implementa?ao. As instru?6es de expressao 
de string literal que vem depois da primeira instru^ao normal em um script ou em uma fun^ao 
sao apenas instru^oes de expressao normais; elas nao podem ser interpretadas como diretivas 
e nao tern efeito algum. 

O objetivo de uma diretiva "use strict" e indicar que o codigo seguinte (no script ou funijao) e 
codigo restrito. O codigo de nivel superior (nao fun^ao) de um script e codigo restrito se o script tern 
uma diretiva "use strict". O corpo de uma funfao e codigo restrito se esta definido dentro de codi¬ 
go restrito ou se tern uma diretiva "use strict". Um codigo passado para o metodo eval() e codigo 
restrito se eval() e chamado a partir de codigo restrito ou se a string de codigo inclui uma diretiva 
"use strict". 
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Um codigo restrito e executado no modo restrito. O modo restrito de ECMAScript 5 e um subcon- 
junto restrito da linguagem que corrige algumas deficiencias importantes e fornece verificapio de 
erro mais forte e mais seguran^a. As diferenpis entre o modo restrito e o modo nao restrito sao as 
seguintes (as tres primeiras sao especialmente importantes): 

• A instrupio with nao e permitida no modo restrito. 



No modo restrito, todas as variaveis devem ser declaradas: um ReferenceError e lanpido se 
voce atribui um valor a um identificador que nao e uma variavel, fun^ao, parametro de fun¬ 
pio, parametro de clausula catch ou propriedade declarada do objeto global. (No modo nao 
restrito, isso declara uma variavel global implicitamente, pela adipio de uma nova propriedade 
no objeto global.) 

No modo restrito, as fun^oes chamadas como fun^oes (e nao como metodos) tern o valor de 
this igual a undefined. (No modo nao restrito, as funfoes chamadas como funfoes sao sempre 
passadas para o objeto global como seu valor de this.) Essa diferen^a pode ser usada para de- 
terminar se uma implementapio suporta o modo restrito: 

var hasStrictMode = (functionQ { "use strict"; return this===undefined}()); 


Alem disso, no modo restrito, quando uma funpio e chamada com call() ou apply(), o valor 
de this e exatamente o valor passado como primeiro argumento para call() ou applyQ. (No 
modo nao restrito, valores null e undefined sao substituidos pelo objeto global e valores que 
nao sao objeto sao convertidos em objetos.) 

No modo restrito, as atribuifoes para propriedades nao gravaveis e tentativas de criar novas 
propriedades em objetos nao extensiveis lanfam um TypeError. (No modo nao restrito, essas 
tentativas falham silenciosamente.) 


No modo restrito, um codigo passado para eval() nao pode declarar variaveis nem definir 
funples no escopo do chamador, como acontece no modo nao restrito. Em vez disso, as defini- 
foes de variavel e de fun^ao tern um novo escopo criado para eval(). Esse escopo e descartado 
quando eval() retorna. 

No modo restrito, o objeto arguments (Sepio 8.3.2) em uma fun^ao content uma copia esta- 
tica dos valores passados para a funpio. No modo nao restrito, o objeto arguments tern com- 
portamento “magico”, no qual os elementos do array e os parametros de funpio nomeados se 
referem ambos ao mesmo valor. 


No modo restrito, um SyntaxError e lanptda se o operador delete e seguido por um identi¬ 
ficador nao qualificado, como uma variavel, funpio ou parametro de funpio. (No modo nao 
restrito, tal expressao delete nao faz nada e e avaliada como false.) 

No modo restrito, uma tentativa de excluir uma propriedade que nao pode ser configurada 
lanpi um TypeError. (No modo nao restrito, a tentativa falha e a expressao delete e avaliada 
como false.) 

No modo restrito, e erro de sintaxe um objeto literal definir duas ou mais propriedades com o 
mesmo nome. (No modo nao restrito, nao ocorre erro.) 

No modo restrito, e erro de sintaxe uma declarapio de funpio ter dois ou mais parametros com 
o mesmo nome. (No modo nao restrito, nao ocorre erro.) 
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• No modo restrito, literais inteiros em octal (cometjando com um 0 que nao e seguido por um 
x) nao sao permitidas. (No modo nao restrito, algumas implementafoes permitem literais em 
octal.) 

• No modo restrito, os identificadores eval e arguments sao tratados como palavras-chave e nao 
e permitido alterar seus valores. Voce pode atribuir um valor a esses identificadores, declara-los 
como variaveis, utiliza-los como nomes de fiinfao, utiliza-los como nomes de parametro de 
funpio ou utiliza-los como o identificador de um bloco catch. 

• No modo restrito, a capacidade de examinar a pilha de chamada e restrita. arguments. caller 
e arguments. callee lan<jam ambos um TypeError dentro de uma fun<jao de modo restrito. As 
funijoes de modo restrito tambem tem propriedades caller e arguments que lanijam um Type- 
Error quando lidas. (Algumas implementa<j6es definem essas propriedades nao padronizadas 
em fun (joes nao restritas.) 

5.8 Resumo das instru0es JavaScript 

Este capitulo apresentou cada uma das instruijoes da linguagem JavaScript. A Tabela 5-1 as resume, 
listando a sintaxe e o objetivo de cada uma. 


Tabela 5-1 Sintaxe das instrujoes JavaScript 

Instrucao Sintaxe 

break break [ rotulo ]; 

case case expressao: 

continue continue [idtulo]; 

debugger debugger; 

default default: 

do/while do instrucao while ( expressao); 

for for(inic; teste; inci) instrucao 

for/in for (var in objeto) instrucao 

function function nome([param [,...]]) { 

if/else if ( expr) instrucaol [else 

instrucao2] 

label rotulo: instrufdo 

return return [ expressao ]; 


Objetivo 

Sai do laco ou switch mais interno 
ou da instrucao circundante 
nomeada 

Rotula uma instrucao dentro de 

Come^a a proxima iteracao do laco 
mais interno ou do la?o nomeado 
Ponto de interrup<;ao de depurador 
Rotula a instrucao padrao dentro 
de um switch 

Uma alternativa para o la?o while 

Nao faz nada 

Um la$o facil de usar 

Enumera as propriedades de objeto 

Declara uma funcao chamada nome 

Executa instrucaol ou instru0o2 

Da a instru(ao o nome rotulo 
Retorna um valor de uma funcao 
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Tabela 5-1 

Sintaxe das instru0es JavaScript (Continuagao) 


Instru^ao 

Sintaxe 

Objetivo 

switch 

switch ( expiessao ) 

Ramifica^ao de multiplos caminhos 


{ instiugoes } 

para rotulos case ou default: 

throw 

throw expiessao-, 

Lan<;a uma exce^ao 

try 

try { instiucoes } 

[catch { instill foes de lotina de 
tiatamento }] 

[finally { instiugoes de limpeza 
}] 

Trata excecoes 

use strict 

"use strict"; 

Aplica restri^oes do modo 
restrito em um script ou fun$ao 

var 

var nome [ = expi] [ ,... ]; 

Declara e inicializa uma ou mais 
variaveis 

while 

while ( expiessao ) instiucao 

Uma constru^ao de la^o basica 

with 

with ( objeto) instiucao 

Amplia o encadeamento de escopo 
(proibida no modo restrito) 







Capi'tulo 6 

Objetos 


O tipo fundamental de dados de JavaScript e o objeto. Um objeto e um valor composto: ele agrega 
diversos valores (valores primitivos ou outros objetos) e permite armazenar e recuperar esses valores 
pelo nome. Um objeto e um conjunto nao ordenado de propriedades, cada uma das quais tendo 
um nome e um valor. Os nomes de propriedade sao strings; portanto, podemos dizer que os ob¬ 
jetos mapeiam strings em valores. Esse mapeamento de string em valor recebe varios nomes: voce 
provavelmente ja conhece a estrutura de dados fundamental pelo nome “hash”, “tabela de hash”, 
“dicionario” ou “array associativo”. Contudo, um objeto e mais do que um simples mapeamento de 
strings para valores. Alem de manter seu proprio conjunto de propriedades, um objeto JavaScript 
tambem herda as propriedades de outro objeto, conhecido como seu “prototipo”. Os metodos de 
um objeto normalmente sao propriedades herdadas e essa “heran^a de prototipos” e um recurso 
importante de JavaScript. 

Os objetos JavaScript sao dinamicos - normalmente propriedades podem ser adicionadas e excluidas 
-, mas podem ser usados para simular os objetos e as “estruturas” estaticas das linguagens estatica- 
mente tipadas. Tambem podem ser usados (ignorando-se a parte referente ao valor do mapeamento 
de string para valor) para representar conjuntos de strings. 

Qualquer valor em JavaScript que nao seja uma string, um numero, true, false, null ou undefined, e 
um objeto. E mesmo que strings, numeros e valores booleanos nao sejam objetos, eles se comportam 
como objetos imutaveis (consulte a Se^ao 3.6). 

Lembre-se, da Se^ao 3.7, de que os objetos sao mutdveis e sao manipulados por referenda e nao por 
valor. Se a variavel x se refere a um objeto e o codigo var y = x; e executado, a variavel y contem uma 
referenda para o mesmo objeto e nao uma copia desse objeto. Qualquer modificaQo feita no objeto 
por meio da variavel y tambem e visivel por meio da variavel x. 

As coisas mais comuns feitas com objetos sao: cria-los e configurar, consultar, excluir, testar e enu- 
merar suas propriedades. Essas operates fundamentals estao descritas nas se^oes de abertura deste 
capi'tulo. As se$oes seguintes abordam temas mais avan^ados, muitos dos quais sao especificos de 
ECMAScript 5. 

Uma propriedade tern um nome e um valor. Um nome de propriedade pode ser qualquer string, 
incluindo a string vazia, mas nenhum objeto pode ter duas propriedades com o mesmo nome. O 
valor pode ser qualquer valor de JavaScript ou (em ECMAScript 5) uma funQo “getter” ou “setter” 
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(ou ambas). Vamos aprender sobre as fun^oes getter e setter na Se<jao 6.6. Alem de seu nome e valor, 
cada propriedade tem valores associados que chamamos de atributos depropriedade: 

• O atributo gravavel especifica se o valor da propriedade pode ser configurado. 

• O atributo enumeravel especifica se o nome da propriedade e retornado por um la<jo for/in. 

• O atributo configurdvel especifica se a propriedade pode ser excluida e se seus atributos podem 
ser alterados. 

Antes de ECMAScript 5, todas as propriedades dos objetos criados por seu codigo eram gravaveis, 
enumeraveis e configuraveis. Em ECMAScript 5 e possivel configurar os atributos de suas proprie¬ 
dades. A Se^ao 6.7 explica como se faz isso. 

Alem de suas propriedades, todo objeto tem tres atributos de objeto associados: 

• O prototipo de um objeto e uma referenda para outro objeto do qual as propriedades sao 
herdadas. 

• A classe de um objeto e uma string que classifica o tipo de um objeto. 

• O flag extensivel de um objeto especifica (em ECMAScript 5) se novas propriedades podem 
ser adicionadas no objeto. 

Vamos aprender mais sobre prototipos e heran^a de propriedade na Se^ao 6.1.3 e na Se^ao 6.2.2, e 
vamos abordar todos os tres atributos com mais detalhes na Se^ao 6.8. 

Por fim, aqui estao alguns termos que vamos usar para diferenciar entre tres categorias amplas de 
objetos de JavaScript e dois tipos de propriedades: 

• Um objeto nativo e um objeto ou uma classe de objetos definida pela especifica^ao ECMAScript. 
Arrays, fun^oes, datas e expressoes regulares (por exemplo) sao objetos nativos. 

• Um objeto hospedeiro e um objeto definido pelo ambiente hospedeiro (como um navega- 
dor Web) dentro do qual o interpretador JavaScript esta incorporado. Os objetos HTML- 
Element, que representam a estrutura de uma pagina Web em JavaScript do lado do clien- 
te, sao objetos hospedeiros. Os objetos hospedeiros tambem podem ser objetos nativos, 
como quando o ambiente hospedeiro define metodos que sao objetos Function normais 
de JavaScript. 

• Um objeto dejinidopelo usuario e qualquer objeto criado pela execu^ao de codigo JavaScript. 

• Uma propriedade propria e uma propriedade definida diretamente em um objeto. 

• Uma propriedade herdada e uma propriedade definida pelo objeto prototipo de um objeto. 

6.1 Criando objetos 

Os objetos podem ser criados com objetos literals, com a palavra-chave new e (em ECMAScript 5) 
com a funijao Object.create(). As subse$oes a seguir descrevem cada tecnica. 
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6.1.1 Objetos literals 

A maneira mais facil de criar um objeto e incluir um objeto literal no codigo JavaScript. Um objeto 
literal e uma lista separada com virgulas de pares nome:valor separados por dois-pontos, colocados 
entre chaves. Um nome de propriedade e um identificador JavaScript ou uma string literal (a string 
vazia e permitida). Um valor de propriedade e qualquer expressao JavaScript; o valor da expressao 
(pode ser um valor primitivo ou um valor de objeto) se torna o valor da propriedade. Aqui estao 
alguns exemplos: 

var empty = {}; 
var point = { x:0, y:0 }; 
var point2 = { x:point.x, y:point.y+l } 
var book = { 

"main title": "JavaScript", 

'sub-title': "The Definitive Guide' 

"for": "all audiences", 

author: { 

firstname: "David”, 
surname: "Flanagan" 

} 

}; 

Em ECMAScript 5 (e em algumas implementa^oes de ECMAScript 3), palavras reservadas podem 
ser usadas como nomes de propriedade sem as aspas. Em geral, contudo, os nomes de propriedade 
que sao palavras reservadas devem ser colocados entre aspas em ECMAScript 3. Em ECMAScript 5, 
uma virgula a direita apos a ultima propriedade em um objeto literal e ignorada. Virgulas a direita 
sao ignoradas na maioria das implementa^oes ECMAScript 3, mas o IE as considera um erro. 

Um objeto literal e uma expressao que cria e inicializa um objeto novo e diferente cada vez que e 
avaliada. O valor de cada propriedade e avaliado cada vez que o literal e avaliado. Isso significa que 
um unico objeto literal pode criar muitos objetos novos, caso apare^a dentro do corpo de um la?o 
em uma fun^ao que e chamada repetidamente, e que os valores de propriedade desses objetos podem 
diferir uns dos outros. 


// Um objeto sem propriedades 
// Duas propriedades 
// Valores mais complexos 

// Os nomes de propriedade incluem espa^os, 

// e hifens; portanto, usam strings literais 
// for e uma palavra reservada; portanto, usa 
// aspas 

// 0 valor dessa propriedade e 

// ele proprio um objeto. Note que 

// esses nomes de propriedade nao tern aspas. 


6.1.2 Criando objetos com new 


O operador new cria e inicializa um novo objeto. A palavra-chave new deve ser seguida de uma chama¬ 
da de fun^ao. Uma fun$ao usada dessa maneira e chamada de construtora e serve para inicializar um 
objeto recem-criado. JavaScript basica contem construtoras internas para tipos nativos. Por exemplo: 


var o = new ObjectQ; 

var a = new ArrayQ; 

var d = new Date(); 

var r = new RegExpC'js"); 


// Cria um objeto vazio: o mesmo que {}. 

// Cria um array vazio: o mesmo que []. 

// Cria um objeto Date representando a hora atual 
// Cria um objeto RegExp para comparacao de padroes. 


Alem dessas construtoras internas, e comum definir suas proprias fun^oes construtoras para iniciali¬ 
zar objetos recem-criados. Isso e abordado no Capitulo 9. 
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6.1.3 Prototipos 

Antes de podermos abordar a terceira tecnica de cria^ao de objeto, devemos fazer uma breve pausa 
para explicar os prototipos. Todo objeto JavaScript tem um segundo objeto JavaScript (ou null, mas 
isso e raro) associado. Esse segundo objeto e conhecido como prototipo e o primeiro objeto herda 
propriedades do prototipo. 

Todos os objetos criados por objetos literals tem o mesmo objeto prototipo e podemos nos referir 
a esse objeto prototipo em codigo JavaScript como Object.prototype. Os objetos criados com a 
palavra-chave new e uma chamada de construtora utilizam o valor da propriedade prototype da fun- 
$ao construtora como prototipo. Assim, o objeto criado por new Object ( ) herda de Object. prototype, 
exatamente como acontece com o objeto criado por {}. Da mesma forma, o objeto criado por new 
Array() usa Array.prototype como prototipo e o objeto criado por new DateQ usa Date.prototype 
como prototipo. 

Object.prototype e um dos raros objetos que nao tem prototipo: ele nao herda propriedade alguma. 
Outros objetos prototipos sao objetos normais que tem prototipo. Todas as construtoras internas (e 
a maioria das construtoras definidas pelo usuario) tem um prototipo que herda de Object. prototype. 
Por exemplo, Date.prototype herda propriedades de Object.prototype; portanto, um objeto Date 
criado por new DateQ herda propriedades de Date.prototype e de Object.prototype. Essa serie enca- 
deada de objetos prototipos e conhecida como encadeamento de prototipos. 

Uma explica?ao sobre o funcionamento da heranija de propriedades aparece na Seqao 6.2.2. Vamos 
aprender a consultar o prototipo de um objeto na Se^ao 6.8.1. E o Capitulo 9 explica a conexao 
entre prototipos e construtoras com mais detalhes: ele mostra como se define novas “classes” de ob¬ 
jetos escrevendo uma funijao construtora e configurando sua propriedade prototype com o objeto 
prototipo a ser utilizado pelas “instancias” criadas com essa construtora. 

6.1.4 Object.createO 

ECMAScript 5 define um metodo, Object.createQ, que cria um novo objeto, usando seu primeiro 
argumento como prototipo desse objeto. Object.createQ tambem recebe um segundo argumento 
opcional que descreve as propriedades do novo objeto. Esse segundo argumento e abordado na 
Se$ao 6.7. 

Object.createQ e uma funfao estatica e nao um metodo chamado em objetos individuals. Para usa- 
-la, basta passar o objeto prototipo desejado: 

var ol = Object.create({x:l, y:2}); // ol herda as propriedades x e y. 

Pode-se passar null para criar um novo objeto que nao tem prototipo, mas se voce fizer isso, o objeto 
recem-criado nao vai herdar nada, nem mesmo metodos basicos, como toString() (isso significa que 
tambem nao funcionaria com o operador +): 


o2 = Object.create(null); 


// o2 nao herda propriedades nem metodos. 
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Se quiser criar um objeto vazio normal (como o objeto retornado por {} ou por new ObjectQ), passe 
Object.prototype: 

var o3 = Object.create(Object.prototype); // o3 e como {} ou new ObjectQ. 

A capacidade de criar um novo objeto com um prototipo arbitrario (falando de outro modo: a capaci- 
dade de criar um “herdeiro” para qualquer objeto) e poderosa e podemos simula-la em ECMAScript 3 
com uma funi;ao como a do Exemplo 6-1 . 


Exemplo 6-1 Criando um novo objeto que herda de um prototipo 

// inheritQ retorna um objeto recem-criado que herda propriedades do 
// objeto prototipo p. Ele usa a funcao ECMAScript 5 Object.createQ s 
// estiver definida e, caso contrario, retrocede para uma tecnica mais 
function inherit(p) { 

if (p == null) throw TypeErrorQ; 
if (Object.create) 

return Object.create(p); 
var t = typeof p; 




if (t !== "object" 8 
function f() {}; 
f.prototype = p; 
return new f(); 


t !== "funct: 


// p deve ser um objeto nao null 
// Se Object.createQ esta definida... 

// entao basta usa-la. 

// Caso contrario, faz mais alguma verificaqao de 
// tipo 

>n") throw TypeErrorQ; 

// Define uma funqao construtora ficticia. 

// Configura sua propriedade prototype como p. 

// Usa f() para criar um "herdeiro" de p. 


O codigo da funqao inheritQ vai fazer mais sentido depois que abordarmos as construtoras, no 
Capftulo 9. Por enquanto, apenas aceite que ela retorna um novo objeto que herda as propriedades 
do objeto argumento. Note que inheritQ nao substitui Object.createQ totalmente: ela nao permite 
a criaqao de objetos com prototipos null e nao aceita o segundo argumento optional que Object. 
createQ aceita. Contudo, vamos usar inheritQ em varios exemplos neste capftulo e novamente no 
Capftulo 9. 

Um uso de nossa funqao inheritQ e quando voce quer se precaver contra a modificaqao nao inten¬ 
tional (mas nao mal-intencionada) de um objeto por uma funcao de biblioteca sobre a qual nao 
tern controle. Em vez de passar o objeto diretamente para a funqao, voce pode passar um herdeiro. 
Se a funqao le as propriedades do herdeiro, vai ver os valores herdados. No entanto, se ela configura 
propriedades, essas propriedades so vao afetar o herdeiro e nao seu objeto original: 
var o = { x: "don't change this value" }; 

library_function(inherit(o)); // Precave contra modificaqoes acidentais de o 

Para entender por que isso funciona, voce precisa saber como as propriedades sao consultadas e con- 
figuradas em JavaScript. Esses sao os temas da proxima seqao. 


Douglas Crockford e geralmente considerado o primeiro a propor uma funpio que cria objetos dessa mane 
http:!I'javascript, crockford. com/prototypal. html. 
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6.2 Consultando e configurando propriedades 

Para obter o valor de uma propriedade, use os operadores ponto (.) ou colchete ([]), descritos na 
Se^ao 4.4. O lado esquerdo deve ser uma expressao cujo valor e um objeto. Se for usado o operador 
ponto, o lado direito deve ser um identificador simples que de nome a propriedade. Se forem usados 
colchetes, o valor dentro deles deve ser uma expressao avaliada como uma string contendo o nome 
da propriedade desejada: 

var author = book.author; // Obtem a propriedade "author" de book, 

var name = author.surname // Obtem a propriedade "surname" de author, 

var title = bookf'main title"] // Obtem a propriedade "main title" de book. 

Para criar ou configurar uma propriedade, use um ponto ou colchetes, como faria para consultar a 
propriedade, mas coloque-os no lado esquerdo de uma expressao de atribui^ao: 

book.edition = 6; // Cria uma propriedade "edition" de book. 

book["main title"] = "ECMAScript"; // Configura a propriedade "main title". 

Em ECMAScript 3, o identificador que vem apos o operador ponto nao pode ser uma palavra reser- 
vada: voce nao pode escrever o.for ou o. class, por exemplo, pois for e uma palavra-chave da lingua- 
gem e class esta reservada para uso futuro. Se um objeto tern propriedades cujos nomes sao palavras 
reservadas, deve-se usar a nota^ao de colchetes para acessa-las: o["for"] e o["class"]. ECMAScript 
5 nao mantem essa restri^ao (assim como fazem algumas implementa^oes ECMAScript 3) e permite 
que palavras reservadas venham apos o ponto. 

Ao usarmos a nota?ao de colchetes, dizemos que a expressao dentro dos colchetes deve ser avaliada 
como uma string. Um enunciado mais preciso e que a expressao deve ser avaliada como uma string 
ou como um valor que possa ser convertido em uma string. No Capitulo 7, por exemplo, vamos ver 
que e comum usar niimeros dentro dos colchetes. 

6.2.1 Objetos como arrays associativos 

Conforme explicado, as duas expressoes JavaScript a seguir tern o mesmo valor: 

object.property 
object["property"] 

A primeira sintaxe, usando o ponto e um identificador, e como a sintaxe utilizada para acessar um 
campo estatico de uma estrutura ou um objeto em C ou Java. A segunda sintaxe, usando colchetes e 
uma string, parece acesso a array, mas a um array indexado por strings e nao por niimeros. Esse tipo 
de array e conhecido como array associativo (ou hash ou mapa ou dicionario). Os objetos JavaScript 
sao arrays associativos e esta se^ao explica por que isso e importante. 

Em C, C++, Java e linguagens fortemente tipadas semelhantes, um objeto so pode ter um numero 
fixo de propriedades e os nomes dessas propriedades devem ser definidos antecipadamente. Como 
JavaScript e uma linguagem pouco tipada, essa regra nao se aplica: um programa pode criar qualquer 
numero de propriedades em qualquer objeto. No entanto, quando se usa o operador . para acessar 
uma propriedade de um objeto, o nome da propriedade e expresso como um identificador. Os iden- 
tificadores devem ser digitados literalmente em seu programa JavaScript - eles nao sao um tipo de 
dados, de modo que nao podem ser manipulados pelo programa. 
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Por outro lado, ao se acessar uma propriedade de um objeto com a notapio de array [ ], o nome da 
propriedade e expresso como uma string. As strings sao tipos de dados de JavaScript, de modo que 
podem ser manipuladas e criadas enquanto um programa esta em execupio. Assim, por exemplo, 
voce pode escrever o seguinte codigo em JavaScript: 

var addr = 

for(i = 0; i < 4; i++) 

addr += customer["address" + i] + '\n'; 

Esse codigo le e concatena as propriedades addressO, addressi, address 2 e address3 do objeto customer. 

Esse breve exemplo demonstra a flexibilidade do uso da notapio de array para acessar propriedades 
de um objeto com expressoes de string. O codigo anterior poderia ser reescrito com a notapio de 
ponto, mas existem casos em que somente a notapio de array resolve. Suponha, por exemplo, que 
voce esteja escrevendo um programa que utiliza recursos de rede para calcular o valor atual dos inves- 
timentos no mercado de a^oes feitos pelo usuario. O programa permite que o usuario digite o nome 
de cada a?ao que possui, assim como o numero de quotas de cada apio. Voce poderia usar um objeto 
chamado portfolio para conter essas informaples. O objeto teria uma propriedade para cada apio. 
O nome da propriedade e o nome da apio e o valor da propriedade e o numero de quotas dessa apio. 
Assim, por exemplo, se um usuario tern 50 quotas de aples da IBM, a propriedade portfolio.ibm 
tern o valor 50. 


Parte desse programa poderia ser uma funpao para adicionar uma nova apio no portfolio: 

function addstock(portfolio, stockname, shares) { 
portfoliojstockname] = shares; 

} 


Como o usuario insere nomes de apio em tempo de execupio, nao ha como saber os nomes de pro¬ 
priedade antecipadamente. Como voce nao pode saber os nomes de propriedade ao escrever o pro¬ 
grama, nao ha como usar o operador . para acessar as propriedades do objeto portfolio. Contudo, 
e possfvel usar o operador [], pois ele utiliza um valor de string (que e dinamico e pode mudar em 
tempo de execupio), em vez de um identificador (que e estatico e deve ser codificado no programa), 
para nomear a propriedade. 


O Capitulo 5 apresentou o lap) for/ in (e vamos ve-lo brevemente outra vez na Sepio 6.5). O poder 
dessa instrupio JavaScript se torna claro quando se considera seu uso com arrays associativos. Aqui 
esta como voce o utilizaria ao calcular o valor total de um portfolio: 


function getvalue(portfolio) { 
var total = 0.0; 
for(stock in portfolio) { 

var shares = portfoliojstock]; 
var price = getquote(stock); 
total += shares * price; 

} 

return total; 


// Para cada acao no portfolio: 

// obtem o numero de quotas 
// pesquisa o preco da quota 
// soma o valor da acao no valor total 

// Retorna o valor total. 


} 
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6.2.2 Heranga 

Os objetos em JavaScript tem um conjunto de “propriedades proprias” e tambem herdam um con- 
junto de propriedades de seus objetos prototipos. Para entendermos isso, devemos considerar o 
acesso a propriedade com mais detalhes. Os exemplos desta se^ao utilizam a funfao inherit() do 
Exemplo 6-1 para criar objetos com prototipos especificados. 


Suponha que voce consulte a propriedade x do objeto o. Se o nao tem uma propriedade propria com 
esse nome, a propriedade x e consultada no objeto prototipo de o. Se o objeto prototipo nao tem 
uma propriedade propria com esse nome, mas ele proprio tem um prototipo, a consulta e feita no 
prototipo do prototipo. Isso continua ate que a propriedade x seja encontrada ou ate que seja pes- 
quisado um objeto com um prototipo null. Como voce pode ver, o atributo prototipo de um objeto 
cria um encadeamento ou lista encadeada das propriedades herdadas. 


var o = {} 

var p = inherit(o); 

p. y = 2; 

var q = inherit(p); 
q-z = 3; 

var s = q.toString(); 

q. x + q.y 


// o herda metodos de objeto de Object.prototype 
// e tem uma propriedade propria x. 

// p herda propriedades de o e Object.prototype 
// e tem uma propriedade propria y. 

// q herda propriedades de p, o e Object.prototype 
// e tem uma propriedade propria z. 

// toString e herdado de Object.prototype 
// => 3: x e y sao herdados de o e p 


Agora, suponha que voce atribua um valor a propriedade x do objeto o. Se o ja tem uma proprieda¬ 
de propria (nao herdada) chamada x, entao a atribui^ao simplesmente altera o valor dessa proprie¬ 
dade ja existente. Caso contrario, a atribuiqao cria uma nova propriedade chamada x no objeto o. Se 
o herdou a propriedade x anteriormente, essa propriedade herdada e agora oculta pela propriedade 
propria recem-criada de mesmo nome. 

A atribui^ao de propriedades examina o encadeamento de prototipos para determinar se a atribuiqao 
e permitida. Se o herda uma propriedade somente de leitura chamada x, por exemplo, entao a atri- 
bui^ao nao e permitida. (Detalhes sobre quando uma propriedade pode ser configurada aparecem 
na Se^ao 6.2.3.) Contudo, se a atribuiqao e permitida, ela sempre cria ou configura uma propriedade 
no objeto original e nunca modifica o encadeamento de prototipos. O fato de a heranija ocorre ao se 
consultar propriedades, mas nao ao configura-las, e um recurso importante de JavaScript, pois isso 
nos permite anular propriedades herdadas seletivamente: 

var unitcircle = { r:l }; // Um objeto para herdar 

var c = inherit(unitcircle); // c herda a propriedade r 

c.x = 1 ; c.y = 1 ; lie define duas propriedades proprias 

c.r =2; lie anula sua propriedade herdada 

unitcircle.r; // => 1 : o objeto prototipo nao e afetado 


Ha uma exce^ao a regra de que uma atribui^ao de propriedade falha ou cria (ou configura) uma 
propriedade no objeto original. Se o herda a propriedade x e essa propriedade e uma propriedade de 
acesso com um metodo setter (consulte a Se^ao 6.6), entao esse metodo setter e chamado, em vez 
de criar uma nova propriedade x em o. Note, entretanto, que o metodo setter e chamado no objeto 
o e nao no objeto prototipo que define a propriedade; portanto, se o metodo setter define qualquer 
propriedade, ele vai fazer isso em o e, novamente, vai deixar o encadeamento de prototipos intacto. 
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6.2.3 Erros de acesso a propriedade 

As expressoes de acesso a propriedade nem sempre retornam ou configuram um valor. Esta se^ao 
explica o que pode dar errado ao se consultar ou configurar uma propriedade. 

Nao e um erro consultar uma propriedade que nao existe. Se a propriedade x nao e encontrada como 
uma propriedade propria ou como uma propriedade herdada de o, a expressao de acesso a proprie¬ 
dade o.x e avaliada como undefined. Lembre-se de que nosso objeto book tern uma propriedade 
“sub-tide”, mas nao uma propriedade “subtitle”: 

book.subtitle; // => indefinida: a propriedade nao existe 

No entanto, e um erro tentar consultar um propriedade de um objeto que nao existe. Os valores null 
e undefined nao tern propriedades e e um erro consultar propriedades desses valores. Continuando 
o exemplo anterior: 

// Dispara um TypeError. undefined nao tern uma propriedade length 
var len = book.subtitle.length; 

A nao ser que voce tenha certeza de que book e book. subtitle sao (ou se comportam como) objetos, 
nao deve escrever a expressao book.subtitle.length, pois isso poderia disparar uma exce^ao. Aqui 
estao duas maneiras de se precaver contra esse tipo de excecjao: 

// Uma tecnica prolixa e explicita 
var len = undefined; 
if (book) { 

if (book.subtitle) len = book.subtitle.length; 

} 


// Uma alternativa concisa e idiomatica para obter o tamanho de subtitle ou undefined 
var len = book && book.subtitle && book.subtitle.length; 

Para entender por que essa expressao idiomatica funciona na prevenfao de TypeError, talvez voce 
queira rever o comportamento de “curto-circuito” do operador &&, na Se^ao 4.10.1. 

Tentar configurar uma propriedade em null ou undefined tambem causa um TypeError, e claro. 
A tentativa de configurar propriedades em outros valores tambem nem sempre e bem-sucedida: 
algumas propriedades sao somente para leitura e nao podem ser configuradas e alguns objetos nao 
permitem a adi?ao de novas propriedades. Curiosamente, contudo, essas tentativas malsucedidas de 
configurar propriedades em geral falham silenciosamente: 

//As propriedades prototype de construtoras internas sao somente para leitura. 

Object.prototype =0; // A atribuicao falha silenciosamente; Object.prototype inalterado 

Essa peculiaridade historica de JavaScript e corrigida no modo restrito de ECMAScript 5. No modo 
restrito, qualquer tentativa malsucedida de configurar uma propriedade dispara um TypeError. 

As regras que especificam quando uma atribuicao de propriedade e bem-sucedida e quando falha sao 
intuitivas, mas dificeis de expressar resumidamente. Uma tentativa de configurar uma propriedade p 
de um objeto o falha nas seguintes circunstancias: 
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o tem uma propriedade propria p que e somente para leitura: nao e possfvel configurar pro- 
priedades somente de leitura. (Contudo, consulte o metodo defineProperty() para ver uma 
exce^ao que permite configurar propriedades somente de leitura.) 

o tem uma propriedade herdada p que e somente para leitura: nao e possfvel ocultar uma pro¬ 
priedade somente de leitura herdada com uma propriedade propria de mesmo nome. 

o nao tem uma propriedade propria p; o nao herda uma propriedade p com um metodo setter 
e o atributo extensivel de o (consulte a Se^ao 6.8.3) e false. Se p ainda nao existe em o e se 
nao ha qualquer metodo setter para chamar, entao p deve ser adicionada em o. Mas se o nao e 
extensivel, entao nenhuma propriedade nova pode ser definida nele. 


6.3 Exduindo propriedades 

O operador delete (Secjao 4.13.3) remove uma propriedade de um objeto. Seu operando deve ser 
uma expressao de acesso a propriedade. Surpreendentemente, delete nao opera no valor da proprie¬ 
dade, mas na propria propriedade: 

delete book.author; // Agora o objeto book nao tem a propriedade author, 

delete book["main title"]; // Agora tambem nao tem "main title". 

O operador delete exclui apenas as propriedades proprias, nao as herdadas. (Para excluir uma pro¬ 
priedade herdada, voce deve excluf-la do objeto prototipo em que ela e definida. Fazer isso afeta todo 
objeto que herda desse prototipo.) 

Uma expressao delete e avaliada como true se a exclusao e bem-sucedida ou se a exclusao nao tem 
efeito (como a exclusao de uma propriedade inexistente). delete tambem e avaliada como true 
quando usada (sem sentido) com uma expressao que nao e uma expressao de acesso a propriedade: 

o = {x:l}; // o tem a propriedade propria x e herda a propriedade toString 

delete o.x; // Exclui x e retorna true 

delete o.x; // Nao faz nada (x nao existe) e retorna true 

delete o.toString; // Nao faz nada (toString nao e uma propriedade propria), retorna true 

delete l; // Nao tem sentido, mas e avaliada como true 

delete nao remove propriedades que tenham o atributo configuravel false. (Embora remova pro¬ 
priedades configuraveis de objetos nao extensfveis.) Certas propriedades de objetos internos nao 
sao configuraveis, como as propriedades do objeto global criado pela declara^ao de variavel e pela 
declara?ao de fun^ao. No modo restrito, a tentativa de excluir uma propriedade nao configuravel 
causa umTypeError. No modo nao restrito (e em ECMAScript 3), delete e simplesmente avaliado 
como false nesse caso: 

delete Object.prototype; // Nao pode excluir; a propriedade nao e configuravel 

var x = 1; // Declara uma variavel global 

delete this.x; // Nao pode excluir esta propriedade 

function f() {} // Declara uma fun^ao global 

delete this.f; // Tambem nao pode excluir esta propriedade 
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Ao excluir propriedades configuraveis do objeto global no modo nao restrito, voce pode omitir a 
referenda ao objeto global e simplesmente colocar o nome da propriedade apos o operador delete: 

this.x = l; // Cria uma propriedade global configuravel (sem var) 
delete x; // E a exclui 

No modo restrito, no entanto, delete dispara um SyntaxError se seu operando for um identificador 
nao qualificado, como x, e e preciso ser explfcito sobre o acesso a propriedade: 
delete x; // SyntaxError no modo restrito 

delete this.x; // Isto funciona 

6.4 Testando propriedades 

Os objetos em JavaScript podem ser considerados conjuntos de propriedades e frequentemente e 
util testar a participa?ao como membro do conjunto - verificar se um objeto tern uma proprieda¬ 
de com determinado nome. Isso e feito com o operador in, com os metodos hasOwnPropertyQ e 
propertyIsEnumerable() ou simplesmente consultando-se a propriedade. 

O operador in espera um nome de propriedade (como uma string) em seu lado esquerdo e um 
objeto a sua direita. Ele retorna true se o objeto tern uma propriedade propria ou uma propriedade 
herdada com esse nome: 
var o = { x: 1 } 

"x" in o; // verdadeiro: o tern uma propriedade propria "x" 

”y" in o; // falso: o nao tern uma propriedade "y" 

"toString" in o; // verdadeiro: o herda uma propriedade toString 

O metodo hasOwnPropertyQ de um objeto testa se esse objeto tern uma propriedade propria com o 
nome dado. Ele retorna false para propriedades herdadas: 
var o = { x: 1 } 

o.hasOwnPropertyC'x"); // verdadeiro: o tern uma propriedade propria x 

o.hasOwnPropertyC'y"); // falso: o nao tern uma propriedade y 

o.hasOwnPropertyC'toString''); // falso: toString e uma propriedade herdada 

O metodo propertylsEnumerableQ refina o teste de hasOwnPropertyQ. Ele retorna true somente se 
a propriedade nomeada e uma propriedade propria e seu atributo enumeravel e true. Certas pro¬ 
priedades internas nao sao enumeraveis. As propriedades criadas por codigo JavaScript normal sao 
enumeraveis, a menos que voce tenha usado um dos metodos de ECMAScript 5, mostrados poste- 
riormente, para torna-las nao enumeraveis. 
var o = inherit({ y: 2 }); 

o.propertyIsEnumerable("x"); // verdadeiro: o tern uma propriedade propria enumeravel x 

o.propertyIsEnumerable("y''); // falso: y e herdada e nao propria 

Object.prototype.propertyIsEnumerable("toString"); // falso: nao enumeravel 

Em vez de usar o operador in, em geral e suficiente apenas consultar a propriedade e usar ! == para 
certificar-se de que nao e indefinido: 
var o = { x: 1 } 

o.x !== undefined; // verdadeiro: o tern uma propriedade x 
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o.y !== undefined; // falso: o nao tem uma propriedade y 

o.toString !== undefined; // verdadeiro: o herda uma propriedade toString 


Ha uma coisa que o operador in pode fazer que a tecnica simples de acesso a propriedade mostrada 
anteriormente nao pode. in pode distinguir entre propriedades que nao existem e propriedades que 
existem mas foram configuradas como undefined. Considere este codigo: 


var o = { x: undefined } 
o.x !== undefined 
o.y !== undefined 

"y" in o 

delete o.x; 


// A propriedade e configurada explicitamente como undefined 

// falso: a propriedade existe, mas e undefined 

// falso: a propriedade nem mesmo existe 

// verdadeiro: a propriedade existe 

// falso: a propriedade nao existe 

// Exclui a propriedade x 

// falso: ela nao existe mais 



Note que o codigo anterior utiliza o operador !== em vez de !=. !== e === fazem distinijao entre un¬ 
defined e null. As vezes, contudo, voce nao quer fazer essa distinijao: 

// Se o tem uma propriedade x cujo valor nao e null ou undefined, duplica-o. 
if (o.x != null) o.x *= 2; 


// Se o tem uma propriedade x cujo valor nao e convertido em false, duplica-o. 
// Se x e undefined, null, false, 0 ou NaN, deixa-a como esta. 
if (o.x) o.x *= 2; 


6.5 Enumerando propriedades 

Em vez de testar a existencia de propriedades individuals, as vezes queremos fazer uma itera^ao por 
todas as propriedades de um objeto ou obter uma lista delas. Isso normalmente e feito com o la^o 
for/in, embora ECMAScript 5 forne^a duas alternativas praticas. 

O la$o for/in foi abordado na Se^ao 5.5.4. Ele executa o corpo do la^o uma vez para cada proprie¬ 
dade enumeravel (propria ou herdada) do objeto especificado, atribuindo o nome da propriedade a 
variavel de la^o. Os metodos internos herdados pelos objetos nao sao enumeraveis, mas as proprie¬ 
dades que seu codigo adiciona nos objetos sao enumeraveis (a nao ser que voce use uma das fun^oes 
descritas posteriormente para torna-las nao enumeraveis). Por exemplo: 

var o = {x:l, y:2, z:B}; // Tres propriedades proprias enumeraveis 

o.propertyIsEnumerable("toString") // => falso: nao enumeravel 
for(p in o) // Itera pelas propriedades 

console.log(p); // Imprime x, y e z, mas nao toString 

Algumas bibliotecas utilitarias adicionam novos metodos (ou outras propriedades) em Object.pro¬ 
totype, de modo que eles sao herdados por (e estao disponiveis para) todos os objetos. Antes de 
ECMAScript 5, entretanto, nao havia como tornar esses metodos adicionados nao enumeraveis, de 
modo que eles eram enumerados por la^os for/in. Para prevenir-se contra isso, talvez voce queira 
filtrar as propriedades retornadas por for/in. Aqui estao duas maneiras de fazer isso: 
f° r (p in o) { 

if (lo.hasOwnProperty(p)) continue; // Pula as propriedades herdadas 

} 
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for(p in o) { 

if (typeof o[p] === "function") continue; // Pula os metodos 

} 

O Exemplo 6-2 define fungoes utilitarias que usam lagos for/in para manipular propriedades de 
objeto de maneiras uteis. A fungao extend(), em especial, e comumente incluida em bibliotecas 
utilitarias de JavaScript 2 . 

Exemplo 6-2 Fungoes utilitarias de objeto que enumeram propriedades 

* Copia as propriedades enumeraveis de p em o e retorna o. 

* Se o e p tern uma propriedade de mesmo nome, a propriedade de o e sobrescrita. 

* Esta funcao nao manipula metodos getter e setter nem copia atributos. 

function extendfo, p) { 

for(prop in p) { // Para todas as props em p. 

o[prop] = pfprop]; // Adiciona a propriedade em o. 

} 

} 

/* 

* Copia as propriedades enumeraveis de p em o e retorna o. 

* Se o e p tern uma propriedade de mesmo nome, a propriedade de o e deixada intacta. 

* Esta funcao nao manipula metodos getter e setter nem copia atributos. 

function mergefo, p) { 

for(prop in p) { // Para todas as props em p. 

if (o.hasOwnPropertyfprop]) continue; // Exceto as que ja estao em o. 

ofprop] = pfprop]; // Adiciona a propriedade em o. 

} 

} 


* Remove as propriedades de o se nao existe uma propriedade com o mesmo nome em p. 

* Retorna o. 


function restrict(o, p) { 

forfprop in o) { // Para todas as props em o 

if (!(prop in p)) delete ofprop]; // Exclui se nao estiver em p 

} 

} 

/* 

* Para cada propriedade de p, exclui de o a propriedade de mesmo nome. 

* Retorna o. 

function subtractfo, p) { 


A implementa^ao de extend () mostrada aqui esta correta, mas nao resolve um conhecido erro presente no Internet Explo¬ 
rer. Vamos ver uma versao mais robustade extend() no Exemplo 8-3. 
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for(prop in p) { // Para todas as props em p 

delete o[prop]; // Exclui de o (excluir uma 

// prop inexistente nao causa danos) 

} 



/* * 

* Retorna um novo objeto contendo as propriedades de o e p. 

* Se o e p tem propriedades de mesmo nome, os valores de p sao usados. 

function union(o,p) { return extend(extend({},o), p); } 

/* 

* Retorna um novo objeto contendo apenas as propriedades de o que tambem aparecem 

* em p. Isso e como a interseqao de o e p, mas os valores das 

* propriedades em p sao descartados 

function intersection^, p) { return restrict(extend({}, o), p); } 

/* 

* Retorna um array contendo os nomes das propriedades proprias enumeraveis de o. 
function keys(o) { 

if (typeof o !== "object") throw TypeErrorQ; // Argumento object exigido 

var result = []; // 0 array que retornaremos 

for(var prop in o) { // Para todas as propriedades enumeraveis 

if (o.hasOwnProperty(prop)) // Se for uma propriedade propria 

result.push(prop); // a adiciona no array. 

} 

return result; // Retorna o array. 

} 

Alem do laq:o for/in, ECMAScript 5 define duas funtjoes que enumeram nomes de propriedade. A 
primeira e Object. keys (), que retorna um array com os nomes das propriedades proprias enumeraveis 
de um objeto. Ela funciona exatamente como a fun^ao utilitaria keys() mostrada no Exemplo 6-2. 

A segunda funpio de enumerapio de propriedade de ECMAScript 5 e Object.getOwnProperty Na- 
mes(). Ela funciona como Object.keys(), mas retorna os nomes de todas as propriedade proprias do 
objeto especificado e nao apenas as propriedades enumeraveis. Nao ha como escrever essa funpio em 
ECMAScript 3, pois ECMAScript 3 nao fornece um modo de obter as propriedades nao enumera¬ 
veis de um objeto. 

6.6 Metodos getter e setter de propriedades 

Dissemos que a propriedade de um objeto e um nome, um valor e um conjunto de atributos. Em EC¬ 
MAScript 5 , o valor pode ser substituido por um ou dois metodos, conhecidos como getter e setter*. As 


3 E nas versoes recentes de ECMAScript 3 dos principals navegadores, fora o IE. 

* N. de R.T.: Optamos por utilizar os termos em ingles para identificar os metodos usados explicitamente para configura- 
$ao e consulta a propriedades de objetos (setter e getter, respectivamente). 
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propriedades definidas por metodos getter e setter as vezes sao conhecidas como propriedad.es de acesso, 
para distingui-las das propriedades de dados que tem um valor simples. 

Quando um programa consulta o valor de uma propriedade de acesso, JavaScript chama o meto- 
do getter (sem passar argumentos). O valor de retorno desse metodo se torna o valor da expressao 
de acesso a propriedade. Quando um programa configura o valor de uma propriedade de acesso, 
JavaScript chama o metodo setter, passando o valor do lado direito da atribuiQo. Esse metodo e 
responsavel por “configurar”, de certo modo, o valor da propriedade. O valor de retorno do metodo 
setter e ignorado. 

As propriedades de acesso nao tem um atributo gravdvel, como as propriedades de dados. Se uma 
propriedade tem um metodo getter e um metodo setter, ela e uma propriedade de leitura/gravaQo. 
Se ela tem somente um metodo getter, ela e uma propriedade somente de leitura. E se ela tem so- 
mente um metodo setter, ela e uma propriedade somente de grava^ao (algo que nao e possfvel com 
propriedades de dados) e as tentativas de le-la sao sempre avaliadas como undefined. 

A maneira mais facil de definir propriedades de acesso e com uma extensao da sintaxe de objeto 
literal: 

// Uma propriedade de dados normal 
data_prop: value, 

// Uma propriedade de acesso definida como um par de funcoes 
get accessor_prop() { /* corpo da funqao aqui */ }, 
set accessor_prop(value) { /* corpo da funqao aqui */ } 

}; 

As propriedades de acesso sao definidas como uma ou duas funcoes cujo nome e igual ao nome 
da propriedade e com a palavra-chave function substituida por get e/ou set. Note que nao sao 
usados dois-pontos para separar o nome da propriedade das funcoes que acessam essa proprie¬ 
dade, mas que uma virgula ainda e exigida depois do corpo da funQo, para separar o metodo 
do metodo seguinte ou da propriedade de dados. Como exemplo, considere o objeto a seguir, 
que representa um ponto cartesiano bidimensional. Ele tem propriedades de dados normais para 
representar as coordenadas X e Y do ponto e tem propriedades de acesso para as coordenadas 
polares equivalentes do ponto: 

// x e y sao propriedades de dados de leitura-gravacao normais. 
x: 1.0, 
y: 1.0, 

//re uma propriedade de acesso de leitura-gravaqao com metodos getter e setter. 

// Nao se esqueqa de colocar uma virgula apos os metodos de acesso. 
get r() { return Math.sqrt(this.x*this.x + this.y*this.y); }, 
set r(newvalue) { 

var oldvalue = Math.sqrt(this.x*this.x + this.y*this.y); 
var ratio = newvalue/oldvalue; 
this.x *= ratio; 
this.y *= ratio; 

L 
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// theta e uma propriedade de acesso somente para leitura, apenas com o metodo getter, 
get theta() { return Math.atan2(this.y, this.x); } 

}; 

Observe o uso da palavra-chave this nos metodos getter e setter anteriores. JavaScript chama essas 
fun^oes como metodos do objeto no qual sao definidas, ou seja, dentro do corpo da funpio, this 
se refere ao objeto ponto. Assim, o metodo getter da propriedade r pode se referir as propriedades x 
e y como this.x e this.y. Os metodos e a palavra-chave this sao abordados com mais detalhes na 
Se f ao 8.2.2. 

As propriedades de acesso sao herdadas, assim como as propriedades de dados; portanto, pode-se 
usar o objeto p definido anteriormente como prototipo para outros pontos. Os novos objetos podem 
receber suas proprias propriedades x e y e eles vao herdar as propriedades r e theta: 

var q = inherit(p); // Cria urn novo objeto que herda metodos getter e setter 

q.x = 1 , q.y = 1 ; // Cria as propriedades de dados proprias de q 

console.log(q.r); // E usa as propriedades de acesso herdadas 
console.log(q.theta); 

O codigo anterior usa propriedades de acesso para definir uma API que fornece duas represen taffies 
(coordenadas cartesianas e coordenadas polares) de um unico conjunto de dados. Outras razoes para 
usar propriedades de acesso incluem o teste de racionalidade de grava^oes de propriedade e o retorno 
de diferentes valores em cada leitura de propriedade: 

// Este objeto gera numeros seriais estritamente crescentes 
var serialnum = { 

// Esta propriedade de dados contem o proximo numero serial. 

// 0 $ no nome da propriedade sugere que se trata de uma propriedade privada. 

$n: 0, 

// Retorna o valor atual e o incrementa 
get next() { return this.$n++; }, 

// Configura um novo valor de n, mas somente se for maior do que o atual 
set next(n) { 

if (n >= this.$n) this.$n = n; 

else throw "serial number can only be set to a larger value"; 

} 

H 

Por fim, aqui esta mais um exemplo que usa um metodo getter para implementar uma propriedade 
com comportamento “magico”. 

// Este objeto tern propriedades de acesso que retornam numeros aleatorios. 

// A expressao "random.octet", por exemplo, gera um numero aleatorio 
// entre 0 e 255 sempre que e avaliada. 
var random = { 

get octetQ { return Math.floor(Math.random()*256); }, 
get uintl6() { return Math.floor(Math.random()*65536); }, 
get intl6() { return Math.floor(Math.random()*65536)-32768; } 

}; 

Esta se^ao mostrou somente como se define propriedades de acesso ao criar um novo objeto a partir 
de um objeto literal. A proxima se^ao mostra como se adiciona propriedades de acesso em objetos 
ja existentes. 
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6.7 Atributos de propriedade 

Alem de um nome e um valor, as propriedades tem atributos que especificam se podem ser gra- 
vadas, enumeradas e conflguradas. Em ECMAScript 3, nao ha como configurar esses atributos: 
todas as propriedades criadas pelos programas ECMAScript 3 sao gravaveis, enumeraveis e confl- 
guraveis, e isso nao pode ser mudado. Esta seqao explica a API de ECMAScript 5 para consultar 
e configurar atributos de propriedade. Essa API e especialmente importante para os autores de 
bibliotecas, pois: 

• Permite adicionar metodos em objetos prototipos e torna-los nao enumeraveis, assim como os 
metodos internos. 

• Permite “bloquear” os objetos, definindo propriedades que nao podem ser alteradas nem ex- 
cluidas. 

Para os propositos desta seqao, vamos considerar os metodos getter e setter de uma propriedade de 
acesso como atributos da propriedade. Seguindo essa logica, vamos ate dizer que o valor de uma 
propriedade de dados tambem e um atributo. Assim, podemos dizer que uma propriedade tem 
um nome e quatro atributos. Os quatro atributos de uma propriedade de dados sao: valor , grava- 
vel, enumeravel e configuravel. As propriedades de acesso nao tem os atributos valor e gravavel : sua 
capacidade de gravaqao e determinada pela presenqa ou ausencia de um metodo setter. Assim, os 
quatro atributos de uma propriedade de acesso sao: get, set , enumeravel e configuravel. 

Os metodos de ECMAScript 5 para consultar e configurar os atributos de uma propriedade utili- 
zam um objeto chamado descritor de propriedade para representar o conjunto de quatro atributos. 
Um objeto descritor de propriedade tem propriedades com os mesmos nomes dos atributos da 
propriedade que descreve. Assim, o objeto descritor de uma propriedade de dados tem proprie¬ 
dades chamadas value, writable, enumerable e configurable. E o descritor de uma propriedade 
de acesso tem propriedades get e set, em vez de value e writable. As propriedades writable, 
enumerable e configurable sao valores booleanos e as propriedades get e set sao valores de funqao, 
evidentemente. 

Para obter o descritor de uma propriedade nomeada de um objeto especificado, chame Object.ge- 
tOwnPropertyDescriptorQ: 

// Retorna {value: 1, writable:true, enumerable:true, configurable:true} 

Object.getOwnPropertyDescriptor({x:l}, "x"); 

// Agora consulta a propriedade octet do objeto random definido anteriormente. 

// Retorna { get: /*func*/, set:undefined, enumerable:true, configurable:true} 

Object.getOwnPropertyDescriptor(random, "octet"); 

// Retorna undefined para propriedades herdadas e propriedades que nao existem. 

Object.getOwnPropertyDescriptor({}, "x"); // indefinido, nao existe essa prop 

Object.getOwnPropertyDescriptor({}, "toString"); // indefinido, herdada 

Conforme seu nome sugere, Object.getOwnPropertyDescriptor() so fiinciona para propriedades pro- 
prias. Para consultar os atributos de propriedades herdadas, voce deve percorrer o encadeamento de 
prototipos explicitamente (consulte Object.getPrototypeOf () na Seqao 6.8.1). 
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Para configurar os atributos de uma propriedade ou criar uma nova propriedade com os atributos 
especificados, chame Object.definePropertyQ, passando o objeto a ser modificado, o nome da pro¬ 
priedade a ser criada ou alterada e o objeto descritor de propriedade: 

var o = {}; // Comeqa sem propriedade alguma 

// Adiciona uma propriedade de dados nao enumeravel x com valor 1 . 

Object.definePropertyQ, "x", { value : l, 

writable: true, 
enumerable: false, 
configurable: true}); 



// Verifica se a propriedade existe mas nao e enumeravel 
o.x; // => 1 

Object.keys(o) // => [] 


// Agora modifica a propriedade x para que ela seja somente para leitura 
Object.definePropertyQ, "x", { writable: false }); 

// Tenta alterar o valor da propriedade 

o.x = 2; // Falha silenciosamente ou lanqa TypeError no modo restrito 

o.x // => 1 


// A propriedade ainda e configuravel; portanto, podemos alterar seu valor, como segue: 
Object.defineProperty(o, “x”, { value: 2 }); 


// Agora altera x de uma propriedade de dados para uma propriedade de acesso 
Object.defineProperty(o, "x", { get: function() { return 0 ; } }); 
o.x // => 0 

O descritor de propriedade passado para Object.definePropertyQ nao precisa incluir todos os qua- 
tro atributos. Se voce estiver criando uma nova propriedade, os atributos omitidos sao considerados 
false ou undefined. Se voce estiver modificando uma propriedade ja existente, os atributos omitidos 
sao simplesmente deixados intactos. Note que esse metodo altera uma propriedade propria ja exis¬ 
tente ou cria uma nova propriedade propria, mas nao altera uma propriedade herdada. 

Se quiser criar ou modificar mais de uma propriedade simultaneamente, use Object.define Proper- 
ties(). O primeiro argumento e o objeto a ser modificado. O segundo argumento e um objeto que 
mapeia os nomes das propriedades a serem criadas ou modificadas nos descritores dessas proprieda- 
des. Por exemplo: 

var p = Object.defineProperties({}, { 

x: { value: 1, writable: true, enumerable:true, configurable:true }, 
y: { value: 1, writable: true, enumerable:true, configurable:true }, 
r: { 

get: functionQ { return Math.sqrt(this.x*this.x + this.y*this.y) }, 
enumerable:true, 
configurable:true 

} 

}); 

Esse codigo comep com um objeto vazio e depois adiciona nele duas propriedades de dados e uma 
propriedade de acesso somente para leitura. Ele conta com o fato de que Object.definePropertiesQ 
retorna o objeto modificado (como acontece com Object.definePropertyQ). 
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Vimos o metodo Object.create () de ECMAScript 5 na Se<jao 6.1. Aprendemos ali que o primeiro 
argumento desse metodo e o objeto prototipo do objeto recem-criado. Esse metodo tambem aceita 
um segundo argumento opcional, que e o mesmo segundo argumento de Object.defineProper- 
ties(). Se voce passa um conjunto de descritores de propriedade para Object.createQ, eles sao 
usados para adicionar propriedades no objeto recem-criado. 

Object.defineProperty() e Object.defineProperties() lanfam TypeError se a tentativa de criar ou 
modificar uma propriedade nao e permitida. Isso acontece se voce tenta adicionar uma nova pro¬ 
priedade em um objeto nao extensivel (consulte a Secjao 6.8.3). Os outros motivos pelos quais esses 
metodos poderiam lanijar TypeError sao relacionados aos proprios atributos. O atributo gravavel 
governa as tentativas de alterar o atributo valor. E o atributo configuravel governa as tentativas de 
alterar os outros atributos (e tambem especifica se uma propriedade pode ser excluida). Contudo, as 
regras nao sao totalmente diretas. E possivel alterar o valor de uma propriedade nao gravavel se essa 
propriedade e configuravel, por exemplo. Alem disso, e possivel mudar uma propriedade de gravavel 
para nao gravavel, mesmo que essa propriedade seja nao configuravel. Aqui estao as regras comple- 
tas. As chamadas de Object.defineProperty() ou Object.definePropertiesQ que tentam viola-las 
lan(jam TypeError: 

• Se um objeto nao e extensivel, voce pode editar suas propriedades proprias existentes, mas nao 
pode adicionar novas propriedades nele. 

• Se uma propriedade nao e configuravel, voce nao pode alterar seus atributos configuravel ou 
enumeravel. 

• Se uma propriedade de acesso nao e configuravel, voce nao pode alterar seu metodo getter ou 
setter e nao pode transforma-la em uma propriedade de dados. 

• Se uma propriedade de dados nao e configuravel, voce nao pode transforma-la em uma pro¬ 
priedade de acesso. 

• Se uma propriedade de dados nao e configuravel, voce nao pode alterar seu atributo gravavel 
de false para true, mas pode muda-lo de true para false. 

• Se uma propriedade de dados nao e configuravel e nao e gravavel, voce nao pode alterar seu 
valor. Contudo, pode alterar o valor de uma propriedade configuravel, mas nao gravavel (pois 
isso seria o mesmo que torna-la gravavel, depois alterar o valor e, entao, converte-la novamente 
em nao gravavel). 

O Exemplo 6-2 continha uma funtjao extend () que copiava propriedades de um objeto para 
outro. Essa fun<jao simplesmente copiava o nome e o valor das propriedades e ignorava seus 
atributos. Alem disso, ela nao copiava os metodos getter e setter de propriedades de acesso, mas 
simplesmente os convertia em propriedades de dados estaticas. O Exemplo 6-3 mostra uma nova 
versao de extendQ que usa Object.getOwnPropertyDescriptor() e Object.definePropertyQ para co- 
piar todos os atributos de propriedade. Em vez de ser escrita como uma funfao, essa versao e 
definida como um novo metodo Object e e adicionada como uma propriedade nao enumeravel 
em Object.prototype. 
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Exemplo 6-3 Copiando atributos de propriedade 

/* 

* Adiciona um metodo nao enumeravel extendQ em Object.prototype. 

* Este metodo estende o objeto no qual e chamado, copiando propriedades 

* do objeto passado como argumento. Todos os atributos de propriedade sao 

* copiados e nao apenas o valor da propriedade. Todas as propriedades proprias (mesmo as nao 

* enumeraveis) do objeto argumento sao copiadas, a nao ser que ja 

* exista uma propriedade com mesmo nome no objeto de destino. 

Object.defineProperty(Object.prototype, 

"extend", // Define Object.prototype.extend 

{ 

writable: true, 

enumerable: false, // Torna-o nao enumeravel 
configurable: true, 

value: function(o) { // Seu valor e esta funcao 

// Obtem todas as props proprias, ate as nao enumeraveis 
var names = Object.getOwnPropertyNames(o); 

// Itera por elas 

for(var i = 0; i < names.length; i++) { 

// Pula as props que ja estao nesse objeto 
if (names[i] in this) continue; 

// Obtem a descri^ao da propriedade de o 

var desc = Object.getOwnPropertyDescriptor(o,names[i]); 

// A utiliza para criar propriedade em this 
Object.defineProperty(this, names[i], desc); 

} 

} 

}); 



6.7.1 API legada para metodos getter e setter 

A sintaxe de objeto literal para propriedades de acesso descrita na Seqao 6.6 nos permite definir pro¬ 
priedades de acesso em novos objetos, mas nao nos permite consultar os metodos getter e setter nem 
adicionar novas propriedades de acesso em objetos ja existentes. Em ECMAScript 5, podemos usar 
Object. getOwnPropertyDescriptorQ e Object, def ineProperty () para fazer essas coisas. 

A maioria das implementa^oes de JavaScript (com a importante exce^ao do navegador Web IE) 
suportava a sintaxe de objeto literal get e set mesmo antes da ado^ao de ECMAScript 5. Essas im- 
plementa^oes suportam uma API legada nao padronizada para consultar e configurar metodos getter 

e setter. Essa API consiste em quatro metodos, disponiveis em todos os objetos._ lookupGetter_() 

e_ lookupSetter _() retornam o metodo getter ou setter de uma propriedade nomeada. E_ defi- 

neGetter _() e _defineSetter _() definem um metodo getter ou setter: passam primeiro o nome da 

propriedade e depois o metodo getter ou setter. Os nomes de cada um desses metodos come^am e 
terminam com duplos sublinhados para indicar que sao metodos nao padronizados. Esses metodos 
nao padronizados nao estao documentados na se^ao de referenda. 




132 Parte I JavaScript basica 


6.8 Atributos de objeto 

Todo objeto tem atributos prototipo, classe e extensivel associados. As subse^oes a seguir explicam o 
que esses atributos fazem e (quando possivel) como consulta-los e configura-los. 

6.8.1 0 atributo prototipo 

O atributo prototipo de um objeto especifica o objeto do qual ele herda propriedades. (Reveja a 
Se?ao 6.1.3 e a Se^ao 6.2.2 para ver mais informa?6es sobre prototipos e heran^a de proprieda¬ 
des.) Esse e um atributo tao importante que em geral dizemos simplesmente “o prototipo de o”, 
em vez de “o atributo prototipo de o”. Alem disso, e importante entender que, quando prototype 
aparece no codigo-fonte, isso se refere a uma propriedade de objeto normal e nao ao atributo 
prototipo. 

O atributo prototipo e configurado quando um objeto e criado. Lembre-se, da Se$ao 6.1.3, que 
os objetos criados a partir de objetos literals usam Object.prototype como prototipo. Os objetos 
criados com new utilizam como prototipo o valor da propriedade prototype de sua fun^ao cons- 
trutora. E os objetos criados com Object. create () usam o primeiro argumento dessa fun$ao (que 
pode ser null) como prototipo. 

Em ECMAScript 5, pode-se consultar o prototipo de qualquer objeto, passando esse objeto para 
Object.getPrototypeOfQ. Nao existe fun^ao equivalente em ECMAScript 3, mas frequentemente 
e possivel determinar o prototipo de um objeto o usando a expressao o.constructor.prototype. 
Os objetos criados com uma expressao new normalmente herdam uma propriedade constructor 
que se refere a funfao construtora utilizada para criar o objeto. E, conforme descrito anterior- 
mente, as funfoes construtoras tem uma propriedade prototype que especifica o prototipo dos 
objetos criados usando elas. Isso esta explicado com mais detalhes na Sefao 9.2, que tambem 
explica por que este nao e um metodo completamente confiavel para determinar o prototipo 
de um objeto. Note que os objetos criados por objetos literals ou por Object.createQ tem uma 
propriedade constructor que se refere a construtora ObjectQ. Assim, constructor.prototype se 
refere ao prototipo correto para objetos literals, mas normalmente isso nao acontece para objetos 
criados com Object.createQ. 

Para determinar se um objeto e o prototipo de (ou faz parte do encadeamento de prototipos 
de) outro objeto, use o metodo isPrototypeOfQ. Para descobrir sepeo prototipo de o, escreva 
p.isPrototypeOf(o). Porexemplo: 

var p = (x:l); // Define um objeto prototipo. 

var o = Object.create(p); // Cria um objeto com esse prototipo. 

p.isPrototypeOf(o) // => verdadeiro: o herda de p 

Object.prototype.isPrototypeOf(p) // => verdadeiro: p herda de Object.prototype 

Note que isPrototypeOf () executa uma fun^ao semelhante ao operador instanceof (consulte a Secjao 

4.9.4). 

A implementa^ao de JavaScript do Mozilla tem (desde o tempo do Netscape) exposto o atributo 

prototipo por meio da propriedade especialmente denominada_ proto _, sendo que e possivel usar 

essa propriedade para consultar ou configurar diretamente o prototipo de qualquer objeto. O uso de 
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_proto_nao e portavel: ela nao tem sido (e provavelmente nunca sera) implementada pelo IE nem 

pelo Opera, embora atualmente seja suportada pelo Safari e pelo Chrome. As versoes do Firefox que 

implementam ECMAScript 5 ainda suportam_ proto _, mas restringem sua capacidade de alterar 

o prototipo de objetos nao extensfveis. 

6.8.2 0 atributo dasse 

O atributo classe de um objeto e uma string que fornece informa$6es sobre o tipo do objeto. Nem 
ECMAScript 3 nem ECMAScript 5 fornecem um modo de configurar esse atributo, sendo que ha 
apenas uma tecnica indireta para consulta-lo. O metodo padrao toString( ) (herdado de Object. pro¬ 
totype) retorna uma string da forma: 

[objeto classe] 

Assim, para obter a classe de um objeto, voce pode chamar esse metodo toString() nele e extrair do 
oitavo ao penultimo caracteres da string retornada. A parte complicada e que muitos objetos herdam 
outros metodos toStringQ mais uteis e, para chamar a versao correta de toStringQ, precisamos fa- 
zer isso indiretamente, usando o metodo Function.call() (consulte a Se<jao 8.7.3). O Exemplo 6-4 
define uma fun^ao que retorna a classe de qualquer objeto passado a ela. 


Exemplo 6-4 Uma fungao classofQ 

function classof(o) { 

if (o === null) return "Null"; 

if (o === undefined) return "Undefined"; 

return Object.prototype.toString.call(o).slice(8,-l); 

} 


Essa funcQo classofQ serve para qualquer valor de JavaScript. Numeros, strings e valores boole- 
anos se comportam como objetos quando o metodo toStringQ e chamado neles e afumjao con¬ 
tent casos especiais para null e undefined. (Os casos especiais nao sao obrigatorios em ECMAS¬ 
cript 5.) Os objetos criados por meio de construtoras internas, como Array e Date, tem atributos 
classe correspondentes aos nomes de suas construtoras. Os objetos hospedeiros normalmente 
tambem tem atributos classe significativos, embora isso dependa da implementacQo. Os objetos 
criados por meio de objetos literals ou de Object.create tem o atributo classe “Object”. Se voce 
define sua propria funfao construtora, todos os objetos criados atraves dela vao ter o atributo 
classe “Object”: nao existe maneira alguma de especiftcar o atributo classe para suas proprias 
classes de objetos: 


classof(null) 

classofQ) 

classof("") 

classof(false) 

classofQ}) 

classofQ]) 

classofQ./) 

classof(new DateQ) 

classof(window) 

function f() {}; 

classof(new fQ); 


// => "Null" 

// => "Number" 

// => "String" 

// => "Boolean" 

// => "Object" 

// => "Array" 

// => "Regexp" 

// => "Date" 

// => "Window" (um objeto hospedeiro do lado do cliente) 
// Define uma construtora personalizada 
// => "Object" 
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6.8.3 0 atributo extensi'vel 

O atributo extensivel de um objeto especifica se novas propriedades podem ser adicionadas no objeto 
ou nao. Em ECMAScript 3, todos os objetos internos e definidos pelo usuario sao implicitamente 
extensfveis e a possibilidade de estender objetos hospedeiros e definida pela implementa?ao. Em 
ECMAScript 5, todos os objetos internos e definidos pelo usuario sao extensfveis, a nao ser que 
tenham sido convertidos para serem nao extensfveis, sendo que, novamente, a possibilidade de es¬ 
tender objetos hospedeiros e definida pela implementa?ao. 

ECMAScript 5 define fun (joes para consultar e configurar a capacidade de extensao de um objeto. 
Para determinar se um objeto e extensivel, passe-o para Object.isExtensibleQ. Para tornar um ob¬ 
jeto nao extensivel, passe-o para Object.preventExtensionsQ. Note que nao ha qualquer modo de 
tornar um objeto novamente extensivel, uma vez que voce o tenha tornado nao extensivel. Note 
tambem que chamar preventExtensionsQ afeta apenas a capacidade de extensao do proprio objeto. 
Se novas propriedades forem adicionadas no prototipo de um objeto nao extensivel, o objeto nao 
extensivel vai herdar essas novas propriedades. 

O objetivo do atributo extensivel e “bloquear” os objetos em um estado conhecido e evitar falsifica- 
fao externa. O atributo de objeto extensivel e frequentemente usado em conjunto com os atributos 
de propriedade configuravel e gravdvel. ECMAScript 5 define fun (joes que tornam facil configurar 
esses atributos juntos. 

Object.sealQ funciona como Object.preventExtensionsQ, mas alem de tornar o objeto nao exten- 
srvel, tambem torna todas as propriedades proprias desse objeto nao configuraveis. Isso significa que 
novas propriedades nao podem ser adicionadas no objeto e que as propriedades ja existentes nao po¬ 
dem ser exclufdas nem configuradas. Contudo, as propriedades gravaveis ja existentes ainda podem 
ser configuradas. Nao existe qualquer maneira de tirar o selo de um objeto selado. Voce pode usar 
Object.isSealedQ para determinar se um objeto esta selado. 

Object.freezeQ bloqueia os objetos ainda mais firmemente. Alem de tornar o objeto nao extensivel 
e suas propriedades nao configuraveis, tambem transforma todas as propriedades de dados proprias 
do objeto em somente para leitura. (Se o objeto tern propriedades de acesso com metodos setter, elas 
nao sao afetadas e ainda podem ser chamadas pela atribuiijao a propriedade.) Use Object.isFrozenQ 
para determinar se um objeto esta congelado. 

E importante entender que Object.sealQ e Object.freezeQ afetam apenas o objeto em que sao 
passados: eles nao tern efeito algum sobre o prototipo desse objeto. Se quiser bloquear um objeto 
completamente, voce provavelmente tambem precisa selar ou congelar os objetos no encadeamento 
de prototipos. 

Object.preventExtensionsQ, Object.sealQ e Object.freezeQ retornam o objeto em que sao passa¬ 
dos, ou seja, e possfvel utiliza-los em chamadas de funtjao aninhadas: 

// Cria um objeto selado com prototipo congelado e uma propriedade nao enumeravel 
var o = Object.seal(Object.create(Object.freeze({x:i}), 

{y: {value: 2, writable: true}})); 
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6.9 Serializando objetos 

Serializagdo de objeto e o processo de converter o estado de um objeto em uma string a partir da qual 
ele pode ser restaurado posteriormente. ECMAScript 5 fornece as funfoes nativas ISON.stringifyQ 
e JSON.parse!) para serializar e restaurar objetos de JavaScript. Essas fun^oes utilizam o formato de 
troca de dados JSON. JSON significa “JavaScript Object Notation” (notaqao de objeto JavaScript) 
e sua sintaxe e muito parecida com a de objetos e array literals de JavaScript: 



o = {x:l, y:{z:[false,null,""]}}; // Define um objeto de teste 

s = JSON.stringify(o); // s e '{V: 1,"y":{"z":[false,null/'"]}}' 

p = JSON.parse(s); // p e uma copia profunda de o 


A implementa^ao nativa dessas fun^oes em ECMAScript 5 foi modelada de forma muito parecida 
com a implementa^ao ECMAScript 3 de dommio publico, dispomvel no endere^o http://json.org/ 
json2.js. Para propositos praticos, as implementa^oes sao iguais e voce pode usar essas funijoes de 
ECMAScript 5 em ECMAScript 3 com esse modulo json2.js. 

A sintaxe JSON e um subconjunto da sintaxe de JavaScript e nao pode representar todos os valores 
de JavaScript. Objetos, arrays, strings, numeros finitos, true, false e null sao suportados e podem 
ser serializados e restaurados. NaN, Infinity e -Infinity sao serializados como null. Os objetos Date 
sao serializados como strings de data com formato ISO (consulte a fun^ao Date. tol SON ()), mas I SON. 
parse( ) os deixa na forma de string e nao restaura o objeto Date original. Objetos Function, RegExp 
e Error e o valor undefined nao podem ser serializados nem restaurados. ISON.stringifyQ serializa 
somente as propriedades proprias enumeraveis de um objeto. Se um valor de propriedade nao pode 
ser serializado, essa propriedade e simplesmente omitida da saida convertida em string. Tan to ISON. 
stringify() como JSON.parse!) aceitam segundos argumentos opcionais que podem ser usados para 
personalizar o processo de serializa$ao e/ou restaurapio, especificando uma lista de propriedades a 
serem serializadas, por exemplo, ou convertendo certos valores durante o processo de serializa?ao ou 
conversao em string. A documenta^ao completa dessas funfoes esta na sepio de referenda. 


6.10 Metodos de objeto 

Conforme discutido, todos os objetos de JavaScript (exceto aqueles explicitamente criados sem pro- 
totipo) herdam propriedades de Object.prototype. Essas propriedades herdadas sao principalmente 
metodos e, como estao disponrveis universalmente, sao de interesse especial para os programadores 
de JavaScript. Ja vimos os metodos hasOwnPropertyQ, propertyIsEnumerable() e isPrototypeOf (). (E 
tambem ja abordamos muitas fun^oes estaticas definidas na construtora Object, como Object. crea¬ 
te!) e Object. getPrototypeOfQ.) Esta sepio explica varios metodos universais de objeto definidos em 
Object.prototype, mas destinados a serem sobrescritos por outras classes mais especializadas. 


6.10.1 0 metodo toStringO 

O metodo toStringO nao recebe argumentos; ele retorna uma string que de algum modo repre- 
senta o valor do objeto em que e chamado. JavaScript cbama esse metodo de um objeto quando 
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precisa converter o objeto em uma string. Isso ocorre, por exemplo, quando se usa o operador + 
para concatenar uma string com um objeto ou quando se passa um objeto para um metodo que 
espera uma string. 

O metodo toString() padrao nao e muito informativo (embora seja util para determinar a classe de 
um objeto, como vimos na Seqao 6.8.2). Por exemplo, a linha de codigo a seguir e simplesmente 
avaliada como a string “[objeto Object]”: 
var s = { x:l, y:l J.toStringQ; 

Como esse metodo padrao nao exibe muitas informaqoes uteis, muitas classes definem suas proprias 
versoes de toString( ). Por exemplo, quando um array e convertido em uma string, voce obtem uma 
lista dos elementos do array, cada um deles convertido em uma string, e quando uma funqao e con- 
vertida em uma string, se obtem o codigo-fonte da funijao. Essas versoes personalizadas do metodo 
toString() estao documentadas na seqao de referenda. Consulte Array.toString(), Date.toString() 
e Function.toString(), por exemplo. 

A Seqao 9.6.3 descreve como definir um metodo toString() personalizado para suas proprias classes. 

6.10.2 0 metodo toLocaleStringO 

Alem do metodo toString() basico, todos os objetos tern um metodo toLocaleStringO. O objetivo 
desse metodo e retornar uma representaqao de string localizada do objeto. O metodo toLocaleS¬ 
tringO padrao definido por Object nao faz localizaqao alguma sozinho: ele simplesmente chama 
toString() e retorna esse valor. As classes Date e Number definem versoes personalizadas de to¬ 
LocaleStringO que tentam formatar numeros, datas e horas de acordo com as convenqoes locais. 
Array define um metodo toLocaleStringO que funciona como toString(), exceto que formata os 
elementos do array chamando seus metodos toLocaleStringO, em vez de seus metodos toString(). 

6.10.3 0 metodo toJSONO 

Object.prototype nao define realmente um metodo toJSONO, mas o metodo JSON.stringify() (con¬ 
sulte a Seqao 6.9) procura um metodo toJS0N() em todo objeto que e solicitado a serializar. Se esse 
metodo existe no objeto a ser serializado, ele e chamado, sendo que o valor de retorno e serializado 
em vez do objeto original. Consulte Date.toJSON() para ver um exemplo. 

6.10.4 0 metodo value0f() 

O metodo valueOf() e muito parecido com o metodo toStringQ, mas e chamado quando JavaS¬ 
cript precisa converter um objeto em algum tipo primitivo que nao seja uma string — normal- 
mente um numero. JavaScript chama esse metodo automaticamente se um objeto e usado em 
um contexto em que e exigido um valor primitivo. O metodo valueOfQ padrao nao faz nada de 
interessante, mas algumas das classes internas definem seus proprios metodos valueOf () (consulte 
Date.valueOfQ, por exemplo). A Seqao 9.6.3 explica como se define um metodo valueOf() para 
tipos de objeto personalizados. 
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Um array e um conjunto ordenado de valores. Cada valor e chamado de elemento e cada elemento 
tem uma posi^ao numerica no array, conhecida como indice. Os arrays em JavaScript sao nao tipa- 
dos: um elemento do array pode ser de qualquer tipo e diferentes elementos do mesmo array podem 
ser de tipos diferentes. Os elementos podem ser ate objetos ou outros arrays, o que permite a cria^ao 
de estruturas de dados complexas, como arrays de objetos e arrays de arrays. Os arrays em JavaScript 
sao baseados em zero e usam indices de 32 bits: o indice do primeiro elemento eOeo l'ndice mais alto 
possivel e 4294967294 (2 32 -2), para um tamanho de array maximo de 4.294.967.295 elementos. 
Os arrays em JavaScript sao dinamicos: eles crescem ou diminuem conforme o necessario e nao ha 
necessidade de declarar um tamanho fixo para o array ao cria-lo ou realoca-lo quando o tamanho 
muda. Os arrays em JavaScript podem ser esparsos : os elementos nao precisam ter indices contiguos e 
pode haver lacunas. Todo array em JavaScript tem uma propriedade length. Para arrays nao esparsos, 
essa propriedade especifica o numero de elementos no array. Para arrays esparsos, length e maior do 
que o indice de todos os elementos. 

Arrays em JavaScript sao uma forma especializada de objeto e os indices de array sao na verdade 
pouco mais do que nomes de propriedade que por acaso sao inteiros. Vamos falar mais sobre as es- 
pecializaqbes de arrays em outra parte deste capitulo. As implementaqbes normalmente otimizam os 
arrays, de modo que o acesso aos elementos indexados numericamente em geral e muito mais rapido 
do que o acesso as propriedades de objetos normais. 

Os arrays herdam propriedades de Array.prototype, que define um conjunto rico de metodos de 
manipula?ao de array, abordados na Se^ao 7.8 e na Se^ao 7.9. A maioria desses metodos e generica, 
ou seja, funcionam corretamente nao apenas para verdadeiros arrays, mas para qualquer “objeto 
semelhante a um array”. Vamos discutir os objetos semelhantes a um array na Se^ao 7.11. Em EC- 
MAScript 5, as strings se comportam como arrays de caracteres. Vamos discutir isso na Se^ao 7.12. 

7.1 Criando arrays 

A maneira mais facil de criar um array e com um array literal, que e simplesmente uma lista de ele¬ 
mentos de array separados com virgulas dentro de colchetes. Por exemplo: 
var empty = []; // Um array sem elementos 

var primes = [2, 3, 5, 7, ll]; // Um array com 5 elementos numericos 
var misc = [ l.i, true, "a", ]; // 3 elementos de varios tipos + virgula a direita 
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Os valores de um array literal nao precisam ser constantes. Podem ser expressoes arbitrarias: 
var base = 1024 ; 

var table = [base, base+1, base+2, base+3]; 

Os array literals podem conter objetos literais ou outros array literals: 
var b = [[l,{x:l, y:2}J, [2, {x:3, y:4}]]; 

Se um array contem varias virgulas seguidas sem qualquer valor entre elas, o array e esparso (veja 
7.3). Os elementos de array para os quais os valores sao omitidos nao existem, mas aparecem como 
undefined se voce os consulta: 

var count = [l,,3]; // Elementos nos indices 0 e 2. countfl] => undefined 

var undefs =[,,]; // Array sem elementos mas com comprimento 2 

A sintaxe de array literal permite uma virgula opcional a direita; portanto, [,, ] tern apenas dois 
elementos, nao tres. 

Outro modo de criar um array e com a construtora ArrayQ. Essa construtora pode ser chamada de 
tres maneiras distintas: 

• Chamada sem argumentos: 

var a = new ArrayQ; 

Esse metodo cria um array vazio sem elementos e e equivalente ao array literal [ ]. 

• Chamada com um unico argumento numerico, o qual especifica um comprimento: 

var a = new Array( 10 ); 

Essa tecnica cria um array com o comprimento especificado. Essa forma da construtora Ar¬ 
ray () pode ser usada para fazer a aloca^ao previa de um array quando se sabe antecipadamente 
quantos elementos vao ser necessarios. Note que valor algum e armazenado no array e que as 
propriedades de rndice “0”, “1”, etc. do array nem mesmo sao definidas para o array. 

• Especificai;ao explicita de dois ou mais elementos de array ou de apenas um elemento nao 
numerico para o array: 

var a = new ArrayQ, 4, 3, 2, 1 , "testing, testing"); 

Nesta forma, os argumentos da construtora se tornam o elementos do novo array. Usar um 
array literal e quase sempre mais simples do que essa utiliza^ao da construtora ArrayQ. 

7.2 Lendo e gravando elementos de array 

Um elemento de um array pode ser acessado com o operador [ ]. Uma referenda ao array deve apare- 
cer a esquerda dos colchetes. Uma expressao arbitraria que tenha um valor inteiro nao negativo deve 
ficar dentro dos colchetes. Essa sintaxe pode ser usada tan to para ler como para gravar o valor de um 
elemento de um array. Assim, todas as instru^oes JavaScript a seguir sao validas: 

var a = ["world"]; // Comega com um array de um elemento 
var value = a[ 0 ]; // Le 0 elemento 0 
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a[i] = 3.14; 
i = 2; 
a[i] = B; 

a[i + l] = "hello"; 
a[a[i]] = a[0]; 


// Crava o elemento l 


// Crava o elemento 2 
// Crava o elemento 3 

// Le os elementos 0 e 2, grava o elemento 3 



Lembre-se de que os arrays sao um tipo especializado de objeto. Os colchetes usados para acessar 
elementos do array funcionam exatamente como os colchetes usados para acessar propriedades de 
objeto. JavaScript convene o mdice numerico especificado do array em uma string - o fndice l se 
torna a string "l" - e, entao, usa essa string como um nome de propriedade. Nao ha nada de especial 
na conversao do fndice, de numero para string: isso tambem pode ser feito com objetos normais: 

o = {}; // Cria um objeto comum 

o[l] = "one"; // 0 indexa com um inteiro 

O que ha de especial com os arrays e que, quando se utiliza nomes de propriedade que sao inteiros 
nao negativos menores do que 2 32 , o array man tern automaticamente o valor da propriedade length. 
Anteriormente, por exemplo, criamos um array a com um unico elemento. Entao, atribufmos valo- 
res nos indices 1, 2 e 3. A propriedade length do array mudou quando fizemos isso: 
a.length // => 4 

E util distinguir claramente um indice de array de um nome de propriedade de objeto. Todos os indices 
sao nomes de propriedade, mas somente nomes de propriedade que sao inteiros entre 0 e 2 32 -2 sao 
indices. Todos os arrays sao objetos e pode-se criar propriedades de qualquer nome neles. Contudo, 
se forem usadas propriedades que sao indices de array, os arrays vao ter o comportamento especial de 
atualizar suas propriedades length quando necessario. 

Note que um array pode ser indexado usando-se niimeros negativos ou que nao sao inteiros. Quan¬ 
do se faz isso, o numero e convertido em uma string e essa string e utilizada como nome de proprie¬ 
dade. Como o nome nao e um inteiro nao negativo, ele e tratado como uma propriedade de objeto 
normal e nao como um fndice de array. Alem disso, se voce indexa um array com uma string que nao 
e um inteiro nao negativo, ela se comporta como um fndice de array e nao como uma propriedade 
de objeto. O mesmo acontece se voce usa um numero em ponto flutuante que e igual a um inteiro: 
a[-1.23] = true; // Isso cria uma propriedade chamada "-1.23" 

a["l000"] = 0; // Esse e o 1001 s elemento do array 

ajl.OOO] // Indice de array 1. 0 mesmo que a[l] 

O fato de os indices de array serem simplesmente um tipo especial de nome de propriedade de ob¬ 
jeto significa que os arrays em JavaScript nao tern a noQo de erro de “fora do limite”. Quando voce 
tenta consultar uma propriedade inexistente de qualquer objeto, nao obtem um erro, mas simples¬ 
mente undefined. Isso vale tanto para arrays como para objetos: 

a = [true, false]; // Este array tern elementos nos indices 0 e 1 

a[2] // => undefined. Nenhum elemento nesse indice. 

a[-l] // => undefined. Nenhuma propriedade com esse nome. 

Como os arrays sao objetos, eles podem herdar elementos de seus prototipos. Em ECMAScript 5, 
eles podem ate ter elementos definidos por metodos getter e setter (SeQo 6.6). Se um array nao 
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herda elementos nem usa metodos getter e setter para os elementos, deve-se esperar que ele utilize 
um caminho de codigo nao otimizado: o tempo para acessar um elemento de um array assim seria 
semelhante aos tempos de busca de propriedade de objeto normal. 

7.3 Arrays esparsos 

Um array esparso e aquele no qual os elementos nao tern indices contiguos come^ando em 0. Nor- 
malmente, a propriedade length de um array especifica o numero de elementos no array. Se o array 
e esparso, o valor da propriedade length e maior do que o numero de elementos. Os arrays esparsos 
podem ser criados com a construtora Array () ou simplesmente pela atribui?ao de um indice de array 
maior do que a propriedade length atual do array. 

a = new Array(s); // Nenhum elemento, mas a.length e 5. 
a = |jj // Cria um array sem elementos e comprimento = 0. 

a[l000] =0; //A atribuicao adiciona um elemento, mas configura o comprimento 

//como 1001. 

Vamos ver posteriormente que tambem e possivel transformar um array em esparso com o operador 
delete. 

Arrays suficientemente esparsos em geral sao implementados de uma maneira mais lenta e usam a 
memoria de modo mais eficiente do que os arrays densos, sendo que buscar elementos em um array 
assim levara praticamente o mesmo tempo que uma busca de propriedade de objeto normal. 

Note que, quando omite um valor de um array literal (usando virgulas repetidas, como em [l,, 3]), 
o array resultante e esparso e os elementos omitidos nao existem. 

var al = [,]; // Este array nao tern elementos e tern comprimento 1 

var a2 = [undefined]; // Este array tern um elemento undefined 

0 in al // => falso: al nao tern elemento com indice 0 

0 in a2 // => verdadeiro: a2 tern valor undefined no indice 0 

Algumas implementa^oes mais antigas (como o Firefox 3) inserem incorretamente os valores 
undefined nos arrays literals com valores omitidos. Nessas implementa^oes, [l,,3] e o mesmo que 
[l,undefined,3]. 

Entender os arrays esparsos e importante para compreender a verdadeira natureza dos arrays em 
JavaScript. Na pratica, contudo, em sua maioria, os arrays em JavaScript com que voce vai trabalhar 
nao serao esparsos. E, caso voce tenha que trabalhar com um array esparso, seu codigo provavelmen- 
te vai trata-lo como trataria um array nao esparso com elementos undefined. 

7.4 Comprimento do array 

Todo array tern uma propriedade length e e essa propriedade que torna os arrays diferentes dos obje- 
tos normais de JavaScript. Para arrays densos (isto e, nao esparsos), a propriedade length especifica o 
numero de elementos no array. Seu valor e um a mais do que o indice mais alto no array: 

[].length // => 0: o array nao tern elementos 

[ 'a','b','c'].length // => 3: o indice mais alto e 2, o comprimento e 3 
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Quando um array e esparso, a propriedade length e maior do que o numero de elementos e pode- 
mos dizer a respeito dele que garantidamente length e maior do que o indice de qualquer elemento 
do array. Ou entao, falando de outro modo, um array (esparso ou nao) nunca vai ter um elemento 
cujo mdice e maior ou igual a sua propriedade length. Para manter isso invariavel, os arrays tern dois 
comportamentos especiais. O primeiro foi descrito anteriormente: se voce atribui um valor para 
um elemento do array cujo indice i e maior ou igual a propriedade length atual do array, o valor da 
propriedade length e definido como i+1. 

O segundo comportamento especial que os arrays implementam para manter o comprimento 
invariavel e que, se voce conflgura a propriedade length com um inteiro nao negativo n menor 
do que seu valor atual, todos os elementos do array cujo indice e maior ou igual a n sao excluidos 
do array: 

a = [1,2,3,4,5]; // Comega com um array de 5 elementos. 

a.length = 3; // agora a e [1,2,3]. 

a.length = 0; // Exclui todos os elementos. a e []. 

a.length =5; // 0 comprimento e 5, mas nao ha elementos, como new Array(5) 


A propriedade length de um array tambem pode ser configurada com um valor maior do que seu va¬ 
lor atual. Fazer isso nao adiciona novos elementos no array, mas simplesmente cria uma area esparsa 
no final do array. 


Em ECMAScript 5, e possivel transformar a propriedade length de um array somente para leitura, 
com Object.defineProperty() (consulte a Seqao 6.7): 


a = [1,2,3]; 

Object.defineProperty(a, "length", 

{writable: false}); 

a.length = 0; 


// Comeca com um array de 3 elementos. 
// Torna a propriedade length 
// somente para leitura. 

// a fica inalterado. 


Da mesma forma, se voce tornar um elemento do array nao configuravel, ele nao podera ser ex- 
cluido. Se ele nao pode ser excluido, entao a propriedade length nao pode ser configurada como 
menor do que o indice do elemento nao configuravel. (Consulte a Se^ao 6.7 e os metodos Object. 
seal() e Object.freezeQ na Seqao 6.8.3.) 


7.5 Adicionando e exduindo elementos de array 

Ja vimos o modo mais simples de adicionar elementos em um array: basta atribuir valores a novos 
indices: 


a = [] // Comeca com um array vazio. 

a[0] = "zero"; // E adiciona elementos nele. 
a[i] = "one"; 

O metodo push () tambem pode ser usado para adicionar um ou mais valores no final de um array: 

a = []; // Comeca com um array vazio 

a.push("zero") // Adiciona um valor no final, a = ["zero"] 

a.push("one", "two") // Adiciona mais dois valores. a = ["zero”, "one", "two"] 
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Inserir um valor em um array a e o mesmo que atribuir o valor a a [a. length], O metodo unshiftQ 
(descrito na Se$ao 7.8) pode ser usado para inserir um valor no inicio de um array, deslocando os 
elementos existentes no array para indices mais altos. 

Os elementos de um array podem ser excluidos com o operador delete, exatamente como se exclui 
propriedades de objeto: 

a = [1,2,3]; 

delete a[l]; // agora a nao tern elemento no indice 1 
1 in a // => falso: nenhum indice do array 1 esta definido 

a.length // => 3: delete nao afeta o comprimento do array 

Excluir um elemento de array e semelhante a (mas sutilmente diferente de) atribuir undefined a esse 
elemento. Note que usar delete em um elemento de array nao altera a propriedade length e nao 
desloca para baixo os elementos com indices mais altos, a fim de preencher a lacuna deixada pela 
propriedade excluida. Se um elemento de um array e excluido, o array se torna esparso. 

Como vimos, tambem e possivel excluir elementos do final de um array, simplesmente configuran- 
do a propriedade length com o novo comprimento desejado. Os arrays tern um metodo pop() (ele 
funciona com pushQ) que reduz o comprimento de um array de 1, mas tambem retorna o valor do 
elemento excluido. Existe ainda um metodo shiftQ (que faz par com unshiftQ) para remover um 
elemento do inicio de um array. Ao contrario de delete, o metodo shiftQ desloca todos os elemen¬ 
tos para um indice uma unidade menor do que seu indice atual. pop() e shiftQ sao abordados na 
Se^ao 7.8 e na se^ao de referenda. 

Por fim, splice () e o metodo de uso geral para inserir, excluir ou substituir elementos de um array. 
Ele altera a propriedade length e desloca os elementos do array para indices mais altos ou mais bai- 
xos, conforme for necessario. Consulte a Se^ao 7.8 para ver os detalhes. 

7.6 Itera^ao em arrays 

A maneira mais comum de iterar atraves dos elementos de um array e com um la$o for (Sefao 5.5.3): 

var keys = Object.keys(o); // Obtem um array de nomes de propriedade do objeto o 
var values = [] // Armazena os valores de propriedade correspondentes nesse array 

for(var i = 0; i < keys.length; i++) { // Para cada indice no array 

var key = keys[i]; // Obtem a chave nesse indice 

values[i] = o[key]; // Armazena o valor no array values 

} 

Em lafos aninhados ou em outros contextos em que o desempenho e fundamental, as vezes voce 
podera ver esse lapa de itera^ao basico de array otimizado, de modo que o comprimento do array e 
pesquisado apenas uma vez, em vez de a cada itera^ao: 

for(var i = 0, len = keys.length; i < len; i++) { 

// o corpo do la?o permanece o mesmo 

} 
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Esses exemplos presumem que o array e denso e que todos os elementos content dados validos. Se 
esse nao for o caso, voce deve testar os elementos do array antes de usa-los. Se quiser excluir elemen¬ 
tos null, undefined e inexistentes, voce pode escrever o seguinte: 

for(var i = 0; i < a.length; i++) { 

if (!a[i]) continue; // Pula elementos null, undefined e inexistentes 

// corpo do la^o aqui 

} 

Se quiser pular apenas os elementos indefinidos e inexistentes, pode escrever: 
for(var i = 0; i < a. length; i++) { 

if (a[i] === undefined) continue; // Pula elementos indefinidos + inexistentes 
// corpo do la^o aqui 

} 

Por fim, se quiser pular apenas os indices para os quais nao existe qualquer elemento no array, mas 
ainda quiser manipular os elementos indefinidos existentes, fa$a isto: 

for(var i = 0; i < a.length; i++) { 

if (!(i in a)) continue ; // Pula os elementos inexistentes 

// corpo do la^o aqui 

} 

O laq:o for/in (Sefao 5.5.4) tambem pode ser usado com arrays esparsos. Esse la$o atribui nomes de 
propriedade enumeraveis (incluindo indices de array) a variavel de la^o, um por vez. Os indices que 
nao existem nao sao iterados: 

for(var index in sparseArray) { 

var value = sparseArrayfindex]; 

// Agora faz algo com index e value 

} 

Conforme observado na Se^ao 6.5, um la^o for/in pode retornar os nomes de propriedades herda- 
das, como os nomes de metodos que foram adicionados a Array. prototype. Por isso, nao se deve usar 
um lapt for/in em um array, a nao ser que seja incluido um teste adicional para filtrar as proprieda¬ 
des indesejadas. Voce poderia usar um destes testes: 

for(var i in a) { 

if (la.hasOwnProperty(i)) continue; // Pula as propriedades herdadas 

// corpo do la^o aqui 

} 

for(var i in a) { 

// Pula i se nao for um inteiro nao negativo 
if (String(Math.floor(Math.abs(Number(i)))) !== i) continue; 

} 

A especificafao ECMAScript permite que o la$o for/in itere pelas propriedades de um objeto em 
qualquer ordem. As implementa^oes normalmente iteram nos elementos do array em ordem cres- 
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cente, mas isso nao e garantido. Em especial, se um array tern propriedades de objeto e elementos 
de array, os nomes de propriedade podem ser retornados na ordem em que foram criados, em vez 
da ordem numerica. As implementa^oes diferem no modo como tratam desse caso; portanto, se a 
ordem da itera^ao importa para seu algoritmo, e melhor usar um la^o for normal, em vez de for/in. 

ECMAScript 5 define varios metodos novos para iterar por elementos de array, passando cada um, 
na ordem do l'ndice, para uma funqao definida por voce. O metodo forEach() e o mais geral deles: 

var data = [1,2,3,4,5]; // Este e o array pelo qual queremos iterar 

var sumOfSquares = 0; // Queremos calcular a soma dos quadrados de data 

data.forEach(function(x) { // Passa cada elemento de data para essa funqao 

sumOfSquares += x*x; // soma os quadrados 

}>; 

sumOfSquares // =>55 : 1+4+9+16+25 

forEach() e os metodos de itera?ao relacionados possibilitam um estilo de programa^ao funcional 
simples e poderoso para se trabalhar com arrays. Eles sao abordados na Se^ao 7.9 e voltaremos a eles 
na Se^ao 8.8, quando abordarmos a programa^ao funcional. 

7.7 Arrays multidimensionais 

JavaScript nao suporta arrays multidimensionais de verdade, mas e possivel ter algo parecido, com 
arrays de arrays. Para acessar um valor em um array de arrays, basta usar o operador [] duas vezes. 
Por exemplo, suponha que a variavel matrix seja um array de arrays de numeros. Todo elemento 
em matrix[x] e um array de numeros. Para acessar um numero especffico dentro desse array, voce 
escreveria matrix[x] [y ]. Aqui esta um exemplo concreto que utiliza um array bidimensional como 
tabuada de multiplica^ao: 

II Cria um array multidimensional 

var table = new Array(lO); // 10 linhas da tabuada 

for(var i = 0; i < table.length; i++) 

table[i] = new Array(lO); // Cada linha tern 10 colunas 

II Inicializa o array 

for(var row = 0; row < table.length; row++) { 

for(col = 0; col < table[row].length; col++) { 
table[row][col] = row*col; 

} 

} 

// Usa o array multidimensional para calcular 5*7 
var product = table[5][7]; // 35 

7.8 Metodos de array 

ECMAScript 3 define varias fun (joes de manipula^ao de array uteis em Array. prototype, isso quer 
dizer que elas estao disponfveis como metodo de qualquer array. Esses metodos de ECMAScript 3 
sao apresentados nas subse^oes a seguir. Como sempre, os detalhes completos podem ser encontra- 
dos em Array na se?ao de referenda do lado do cliente. ECMAScript 5 acrescenta novos metodos de 
itera^ao em arrays; esses metodos sao abordados na Se^ao 7.9. 
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7.8.1 join() 

O metodo Array, join() convene todos os elementos de um array em strings e as concatena, re- 
tornando a string resultante. Pode-se especificar uma string optional para separar os elementos na 
string resultante. Se nao for especificada qualquer string separadora, uma virgula e usada. Por exem- 
plo, as linhas de codigo a seguir produzem a string “1,2,3”: 

var a = [l, 2, 3]; // Cria um novo array com esses tres elementos 

a.joinQ; // => "1,2,3" 

a.join(" "); // => "1 2 3" 

a. join(""); // => "123" 

var b = new Array(10); // Um array de comprimento 10 sem elementos 

b. join('-') // => 1 . uma string de 9 hifens 

O metodo Array. join() e o inverso do metodo String.split!), que cria um array dividindo uma 
string em partes. 

7.8.2 reverse!) 

O metodo Array.reverse!) inverte a ordem dos elementos de um array e retorna o array invertido. 
Ele faz isso no local; em outras palavras, ele nao cria um novo array com os elementos reorganizados, 
mas em vez disso os reorganiza no array ja existente. Por exemplo, o codigo a seguir, que usa os me- 
todos reverse!) e join(), produz a string “3,2,1”: 
var a = [1,2,3]; 

a.reverse!).join() // => "3,2,1" e a agora e [3,2,1] 

7.8.3 sort() 

Array.sort() classifica os elementos de um array no local e retorna o array classificado. Quando 
sort() e chamado sem argumentos, ele classifica os elementos do array em ordem alfabetica (conver- 
tendo-os temporariamente em strings para fazer a comparapio, se necessario): 

var a = new Array("banana", "cherry", "apple"); 
a.sort(); 

var s = a.join(", ''); // s == "apple, banana, cherry" 

Se um array content elementos indefinidos, eles sao classificados no final do array. 

Para classificar um array em alguma ordem diferente da alfabetica, deve-se passar uma fun^ao de 
comparapio como argumento para sort(). Essa funpio decide qual de seus do is argumentos deve 
aparecer primeiro no array classificado. Se o primeiro argumento deve aparecer antes do segundo, 
a firn^ao de comparapio deve retornar um niimero menor do que zero. Se o primeiro argumento 
deve aparecer apos o segundo no array classificado, a funpio deve retornar um niimero maior do que 
zero. E se os dois valores sao equivalentes (isto e, se a ordem e irrelevante), a funpio de comparapio 
deve retornar 0. Assim, por exemplo, para classificar elementos do array em ordem numerica e nao 
alfabetica, voce poderia fazer o seguinte: 

var a = [33, 4, nil, 222 ]; 
a.sort(); 

a.sort(function(a,b) { 


// Ordem alfabetica: llll, 222, 33, 4 
// Ordem numerica: 4, 33, 222, 1111 
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return a-b; // Retorna &lt; 0, 0 ou &gt; 0, dependendo da ordem 

}); 

a.sort(function(a,b) {return b-a}); // Inverte a ordem numerica 

Observe o uso conveniente de expressoes de funQo nao nomeadas nesse codigo. Como as fun^oes de 
comparaqao sao usadas apenas uma vez, nao ha necessidade de dar nomes a elas. 

Como outro exemplo de classifica<Qo de itens de array, poderia ser feita uma classifica^ao alfabetica 
sem considerar letras maiusculas e mimisculas em um array de strings, passando-se uma funpio de 
comparapio que convertesse seus dois argumentos em minusculas (com o metodo toLowerCase()) 
antes de compara-los: 

a = ['ant', ’Bug', 'cat', 'Dog'] 

a.sortQj // classificacao considerando letras maiusculas e minusculas: 

//['Bug','Dog','ant',cat' ] 

a.sort(function(s,t) { // Classificacao sem considerar letras maiusculas e minusculas 

var a = s.toLowerCaseQ; 
var b = t.toLowerCase(); 
if (a < b) return -1; 
if (a > b) return 1; 
return 0; 

}); // => ['ant','Bug','cat','Dog'] 


7.8.4 concat() 

O metodo Array.concatQ cria e retorna um novo array contendo os elementos do array original em 
que concatQ foi chamado, seguido de cada um dos argumentos de concatQ. Se qualquer um desses 
argumentos e ele proprio um array, entao sao os elementos do array que sao concatenados e nao o 
array em si. Note, entretanto, que concatQ nao concatena arrays de arrays recursivamente. concatQ 
nao modifica o array em que e chamado. Aqui estao alguns exemplos: 


var a = [1,2,3]; 
a.concatQ, 5) 
a.concat([4,5]); 
a. concat([4,5],[6,7]) 
a.concatQ, [5, [6,7]]) 


// Retorna [1,2,3,4,51 
// Retorna [1,2,3,4,51 
// Retorna [i,2j3j4j5j6,7] 

// Retorna [l,2,3j4,5, [6,7]] 


7.8.5 slice() 

O metodo Array . slice () retorna um pedago (ou subarray) do array especificado. Seus dois argumen¬ 
tos especificam o initio e o fim do trecho a ser retornado. O array retornado contem o elemento 
especificado pelo primeiro argumento e todos os elementos subsequentes, ate (mas nao incluindo) 
o elemento especificado pelo segundo argumento. Se apenas um argumento e especificado, o array 
retornado contem todos os elementos desde a posiQo initial ate o fim do array. Se um ou outro 
argumento e negativo, ele especifica um elemento relativo ao ultimo elemento no array. Um ar¬ 
gumento -1, por exemplo, especifica o ultimo elemento no array e um argumento -3 especifica o 
antepenultimo elemento do array. Note que sliceQ nao modifica o array em que e chamado. Aqui 
estao alguns exemplos: 

var a = [1,2,3,4,5]; 

a.sliceQ,3); II Retorna [1,2,3] 
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a.slice(3); // Retorna [4,5] 
a.slice(l,-l); // Retorna [2,3,4] 
a.slice(-3,-2); // Retorna [3] 



7.8.6 splice() 


O metodo Array. splice( ) e um metodo de uso geral para inserir ou remover elementos de um array. 
Ao contrario de sliceQ e concat(), splice () modificao array em que e chamado. Note que spliceQ 
e slice () tem nomes muito parecidos, mas efetuam operates significativamente diferentes. 

splice() pode excluir elementos de um array, inserir novos elementos em um array ou efetuar as 
duas operates ao mesmo tempo. Os elementos do array que vem apos o ponto de inserqao ou 
exclusao tem seus indices aumentados ou diminuidos, conforme o necessario, para que perma- 
ne?am contiguos ao restante do array. O primeiro argumento de spliceQ especifica a posi^ao do 
array em que a inserfao e/ou exclusao deve come^ar. O segundo argumento especifica o numero 
de elementos que devem ser excluidos (removidos) do array. Se esse segundo argumento e omiti- 
do, todos os elementos do array, do elemento inicial ate o fim do array, sao removidos. spliceQ 
retorna o array dos elementos excluidos ou um array vazio, se nenhum elemento foi excluido. 
Por exemplo: 

var a = [l,2,3,4,5,6,7,8]; 

a.spliceQ); // Retorna [5,6,7,8]; a e [1,2,3,4] 
a.spliceQ,2); // Retorna [2,3]; a e [1,4] 

a.spliceQ,l); // Retorna [ 4 ]; a e [l] 

Os dois primeiros argumentos de spliceQ especificam quais elementos do array devem ser exclui¬ 
dos. Esses argumentos podem ser seguidos por qualquer numero de argumentos adicionais, especi- 
ficando os elementos a serem inseridos no array, come^ando na posQao especificada pelo primeiro 
argumento. Por exemplo: 
var a = [1,2,3,4,5]; 

a.spliceQ,0,'a','b'); // Retorna []; a e [1,2,'a', 1 b',3,4,5] 
a.spliceQ,2, [1,2],3); // Retorna ['a','b' ]; a e [ 1 ,2, [ 1 , 2 ],3,3,4,5] 

Note que, ao contrario de concatQ, spliceQ insere os proprios arrays e nao elementos desses arrays. 


7.8.7 push()epop() 


Os metodos pushQ e popQ permitem trabalhar com arrays como se fossem pilhas. O metodo pushQ 
anexa um ou mais novos elementos no final de um array e retorna o novo comprimento do array. O 
metodo popQ faz o inverso: ele exclui o ultimo elemento de um array, decrementa o comprimento 
do array e retorna o valor que removeu. Note que os dois metodos modificam o array no local, em 
vez de produzirem uma copia modificada dele. A combinaQo de pushQ e pop() permite o uso de um 
array de JavaScript para implementar uma pilha first-in, last-out (primeiro a entrar, ultimo a sair). 
Por exemplo: 


var stack = []; // stack: [] 


stack.pushQ,2); // stack: [1,2] Retorna 2 
stack.popQ; // stack: [ 1 ] Retorna 2 
stack.push(3); // stack: [ 1 , 3 ] Retorna 2 
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stack.pop(); // stack: 
stack.push([4,5]); // stack: 
stack.pop() // stack: 
stack.pop(); // stack: 


[l] Retorna 3 

[ 1 ,[4j5]] Retorna 2 

[l] Retorna [4,5] 

[] Retorna 1 


7.8.8 unshift() e shift() 


Os metodos unshift() e shift() se comportam quase como push() e pop(), exceto que inserem e 
removem elementos do infcio de um array e nao do final. unshiftQ adiciona um ou mais elemen- 
tos no infcio do array, desloca os elementos existentes no array para cima, para indices mais altos, 
a fim de dar espa^o, e retorna o novo comprimento do array. shiftQ remove e retorna o primeiro 
elemento do array, deslocando todos os elementos subsequentes uma casa para baixo, para ocuparem 
o espa?o recentemente vago no initio do array. Por exemplo: 


var a = []; // 
a.unshift(i); // 
a.unshift(22); // 
a.shift(); // 
a. unshift(3,[4,5]); // 
a.shift(); // 
a.shift(); // 
a.shift(); // 


[] 

[l] Retorna: 
[ 22 , 1 ] Retorna: 
[l] Retorna: 
[3,[4,5],l] Retorna: 
[[4,5],l] Retorna: 
[l] Retorna: 
[] Retorna: 


Observe o comportamento possivelmente surpreendente de unshift() ao ser chamado com varios 
argumentos. Em vez de serem inseridos um por vez no array, os argumentos sao inseridos todos de 
uma vez (como acontece com o metodo spliceQ). Isso significa que eles aparecem no array resultan- 
te na mesma ordem em que apareciam na lista de argumentos. Se os elementos fossem inseridos um 
por vez, sua ordem seria invertida. 


7.8.9 toStringO etoLocaleStringO 

Um array, assim como qualquer objeto de JavaScript, tern um metodo toString(). Para um array, 
esse metodo converte cada um de seus elementos em uma string (chamando os metodos toStringO 
de seus elementos, se necessario) e produz na saida uma lista separada com virgulas dessas strings. 
Note que a saida nao inclui colchetes nem qualquer outro tipo de delimitador em torno do valor do 
array. Por exemplo: 

[1,2,3] .toStringO // Produz '1,2,3' 

["a", "b", "c"] .toStringO // Produz 'a,b,c' 

[l, [2, 'c']].toStringO // Produz 'l,2,c' 

Note que o metodo join() retorna a mesma string quando e chamado sem argumentos. 

toLocaleString() e a versao localizada de toString(). Ele converte cada elemento do array em uma 
string chamando o metodo toLocaleString() do elemento e, entao, concatena as strings resultantes 
usando uma string separadora especifica para a localidade (e definida pela implementa^ao). 





Capftulo 7 Arrays 149 


7.9 Metodos de array de ECMAScript 5 

ECMAScript 5 define nove novos metodos de array para iterar, mapear, filtrar, testar, reduzir e pes- 
quisar arrays. As subse^oes a seguir descrevem esses metodos. 

Entretanto, antes de abordarmos os detalhes, e interessante fazermos algumas generaliza^oes a res- 
peito desses metodos de array de ECMAScript 5. Primeiramente, a maioria dos metodos aceita 
uma funqao como primeiro argumento e chama essa funijao uma vez para cada elemento (ou para 
alguns elementos) do array. Se o array e esparso, a funijao passada nao e chamada para os elementos 
inexistentes. Na maioria dos casos, a funijao fornecida e chamada com tres argumentos: o valor do 
elemento do array, o indice do elemento e o array em si. Frequentemente, apenas o primeiro desses 
valores de argumento e necessario e o segundo e terceiro valores podem ser ignorados. A maioria dos 
metodos de array de ECMAScript 5 que aceita uma funijao como primeiro argumento, aceita um 
segundo argumento optional. Se ele for especificado, a funfao e chamada como se fosse um metodo 
desse segundo argumento. Isto e, o segundo argumento passado se torna o valor da palavra-chave 
this dentro da funfao passada. O valor de retorno da funijao passada e importante, mas diferentes 
metodos tratam o valor de retorno de diferentes maneiras. Nenhum dos metodos de array de EC¬ 
MAScript 5 modifica o array em que e chamado. Se uma funfao e passada para esses metodos, essa 
funijao pode modificar o array, evidentemente. 


7.9.1 forEachO 

O metodo forEach() itera por um array, chamando uma funqtio especificada para cada elemento. 
Conforme descrito, a funqao e passada como primeiro argumento para forEachQ. Entao, forEach() 
chama a funfao com tres argumentos: o valor do elemento do array, o indice do elemento e o array 
em si. Se voce so tern interesse no valor do elemento do array, pode escrever uma funijao com apenas 
um parametro - os argumentos adicionais serao ignorados: 

var data = [1,2,3,4,51; // Um array para soma 

// Calcula a soma dos elementos do array 

var sum = 0; // Come^a em 0 

data.forEach(function(value) { sum += value; }); // Adiciona cada value em sum 

// Agora incrementa cada elemento do array 

data.forEach(function(v, i, a) { a[i] = v + l; }); 

data // => [2,3,4,5,6] 

Note que forEach() nao fornece uma maneira de terminar a itera^ao antes que todos os elementos 
tenham sido passados para a funipao. Isto e, nao ha equivalente algum da instru^ao break que possa 
ser usado com um la^o for normal. Se precisar terminar antes, voce deve lanfar uma exce^ao e colo- 
car a chamada de forEachQ dentro de um bloco try. O codigo a seguir define uma funijao foreachQ 
que chama o metodo forEachQ dentro de um bloco try. Se a funqao passada para foreachQ lanija 
foreach.break, o lafo termina antes: 
function foreachQ,f,t) { 
try { a.forEach(f,t); } 
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catch(e) { 

if (e === foreach.break) return; 
else throw e; 

} 

} 

foreach.break = new Error("StopIteration"); 


7.9.2 map() 

O metodo map( ) passa cada elemento do array em que e chamado para a funpio especificada e retor- 
na um array contendo os valores retornados por essa funpio. Por exemplo: 

a • [1, 2, 3]; 

b = a.map(function(x) { return x*x; }); //be [l, 4, 9] 

A funpio passadapara map() e chamada da mesma maneira que uma funpio passada para forEach(). 
Contudo, para o metodo map() a fun^ao passada deve retornar um valor. Note que map() retorna 
um novo array: ele nao modifica o array em que e chamado. Se esse array for esparso, o array retor¬ 
nado vai ser esparso da mesma maneira - ele tera o mesmo comprimento e os mesmos elementos 
ausentes. 

7.9.3 filterO 

O metodo filter () retorna um array contendo um subconjunto dos elementos do array em que e 
chamado. A funfao passada para ele deve ser um predicado: uma funpio que retorna true ou false. 
O predicado e chamado exatamente como para forEachQ e map(). Se o valor de retorno e true ou um 
valor que se convene em true, entao o elemento passado para o predicado e membro do subconjun¬ 
to e e adicionado no array que se tornara o valor de retorno. Exemplos: 

a = [5, 4, 3, 2 , l]; 

smallvalues = a.filter(function(x) { return x < 3 }); // [2, l] 

everyother = a.filter(function(x,i) { return i%2==0 }); // [5, 3, l] 

Note que filter () pula elementos ausentes em arrays esparsos e que seu valor de retorno e sempre 
denso. Para fechar as lacunas de um array esparso, voce pode fazer o seguinte: 

var dense = sparse.filter(function() { return true; }); 

E para fechar as lacunas e remover elementos indefinidos e nulos, voce pode usar filter como segue: 
a = a.filter(function(x) { return x !== undefined && x != null; }); 

7.9.4 everyQ e some() 


Os metodos every () e someQ sao predicados de array: eles aplica 
ficada nos elementos do array e, entao, retornam true ou false. 


funpio de predicado especi- 
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O metodo every () e como o quantificador matematico “para todo” V: ele retorna true se, e somente 
se, sua fun^ao de predicado retorna true para todos os elementos do array: 
a = [1,2,3,4,51; 

a.every(function(x) { return x < 10; }) // => verdadeiro: todos os valores < 10. 

a.every(function(x) { return x % 2 === 0; }) // => falso: nem todos os valores sao par. 

O metodo someQ e como o quantificador matematico “existe” 3: ele retorna true se existe pelo me- 
nos um elemento no array para o qual o predicado retorna true, e retorna false se, e somente se, o 
predicado retorna false para todos os elementos do array: 

a = [ 1 , 2 ,3,4,5]; 

a.some(function(x) { return x%2===0; }) // => verdadeiro: a tern alguns numeros pares. 
a.some(isNaN) // => falso: a nao tem nao numeros. 

Note que tanto everyQ como some() param de iterar pelos elementos de array assim que sabem 
qual valor devem retornar. some() retorna true na primeira vez que o predicado retorna true e so 
itera pelo array inteiro se o predicado sempre retorna false. every() e o oposto: ele retorna false na 
primeira vez que o predicado retorna false e so itera por todos os elementos se o predicado sempre 
retorna true. Note tambem que, por convencjao matematica, everyQ retorna true e some retorna 
false quando chamados em um array vazio. 

7.9.5 reduce(), reduceRight() 

Os metodos reduceQ e reduceRightQ combinam os elementos de um array usando a firn^ao especi- 
ficada para produzir um valor unico. Essa e uma opera^ao comum na programa?ao funcional e tam¬ 
bem e conhecida pelos nomes “injetar” e “dobrar”. Exemplos ajudam a ilustrar como isso funciona: 

var a = [1,2,3,4,5] 

var sum = a.reduce(function(x,y) { return x+y }, 0); // Soma de valores 

var product = a.reduce(function(x,y) { return x*y }, l); // Produto de valores 
var max = a.reduce(function(x,y) { return (x>y)?x:y; }); // Maior valor 

reduce () recebe dois argumentos. O primeiro e a firnfao que efetua a operaqao de redu?ao. A tarefa 
dessa fun^ao de redu^ao e combinar de algum modo ou reduzir dois valores a um unico e retor¬ 
nar esse valor reduzido. Nos exemplos anteriores, as fun^oes combinam dois valores somando-os, 
multiplicando-os e escolhendo o maior. O segundo argumento (opcional) e um valor inicial a ser 
passado para a funijao. 

As funqxSes usadas com reduceQ sao diferentes das fimfoes usadas com forEachQ e map(). O valor 
conhecido, o indice e os valores do array sao passados como segundo, terceiro e quarto argumentos. 
O primeiro argumento e o resultado acumulado da reduqao ate o momento. Na primeira chamada 
da fun^ao, esse primeiro argumento e o valor inicial passado como segundo argumento para 
reduceQ. Nas chamadas subsequentes, e o valor retornado pela chamada anterior da funijao. No 
primeiro exemplo anterior, a firnfao de redu^ao e primeiramente chamada com argumentos 0 e 1. 
Ela os soma e retorna 1. Entao, ela e chamada novamente com argumentos 1 e 2 e retorna 3. Em 
seguida, ela calcula 3+3=6, depois 6+4=10 e, finalmente, 10+5=15. Esse valor final, 15, se torna o 
valor de retorno de reduceQ. 
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Voce pode ter notado que a terceira chamada de reduce () tem apenas um argumento: nao ha 
qualquer valor inicial especificado. Quando reduce() e chamado assim, sem valor inicial, ele 
usa o primeiro elemento do array como valor inicial. Isso significa que a primeira chamada da 
funqao de reduqao vai ter o primeiro e o segundo elementos do array como primeiro e segundo 
argumentos. Nos exemplos de soma e produto anteriores, poderfamos ter omitido o argumento 
de valor inicial. 

Chamar reduce () em um array vazio sem argumento de valor inicial causa um TypeError. Se for cha¬ 
mado com apenas um valor - um array com um unico elemento e valor inicial algum ou um array 
vazio e um valor inicial ele retorna simplesmente esse valor unico, sem jamais chamar a fun910 
de reduqao. 

reduceRightQ fiinciona exatamente como reduceQ, exceto que processa o array do indice mais 
alto para o mais baixo (da direita para a esquerda), em vez do mais baixo para o mais alto. Talvez 
voce queira fazer isso se a operaqao de reduqao tiver precedencia da direita para a esquerda, por 
exemplo: 

var a = [ 2 , 3, 4] 

// Calcula 2 a (3 a 4). A exponenciacao tem precedencia da direita para a esquerda 
var big = a.reduceRight(function(accumulator,value) { 

return Math.pow(value,accumulator); 

}); 

Note que nem reduceQ nem reduceRightQ aceitam um argumento optional que especifique o va¬ 
lor de this no qual a funqao de reduqao deve ser chamada. O argumento de valor inicial optional 
assume seu lugar. Consulte o metodo Function.bindQ caso precise que sua funqao de reduqao seja 
chamada como um metodo de um objeto em particular. 

E interessante notar que os metodos everyQ e someQ descritos anteriormente efetuam um tipo de 
operaqao de reduqao de array. Contudo, eles diferem de reduceQ, pois terminam mais cedo, quando 
possfvel, e nem sempre visitam cada elemento do array. 

Por simplicidade os exemplos mostrados ate aqui foram numericos, mas reduceQ e reduce Right() 
nao se destinam unicamente a calculos matematicos. Considere a funqao unionQ do Exemplo 6-2. 
Ela calcula a “uniao” de dois objetos e retorna um novo objeto que tem as propriedades de ambos. 
Essa funqao espera dois objetos e retorna outro objeto; portanto, ela opera como uma funqao de 
reduqao, sendo que podemos usar reduceQ para generaliza-la e calcular a uniao de qualquer numero 

var objects = [{x:l}, {y:2}, {z:3}]; 

var merged = objects.reduce(union); // => {x:l, y:2, z:3} 

Lembre-se de que, quando dois objetos tem propriedades com o mesmo nome, a funqao unionQ 
utiliza o valor dessa propriedade do primeiro argumento. Assim, reduceQ e reduceRightQ podem 
obter resultados diferentes quando utilizadas com unionQ: 
var objects = [{x:l,a:l}, {y: 2 ,a: 2 }, {z:3,a:3}]; 

var leftunion = objects.reduce(union); // {x:l, y:2, z:3, a:l} 

var rightunion = objects.reduceRight(union); // {x:l, y:2, z:3, a:3} 
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7.9.6 indexOf() e Iastlndex0f() 

indexOfQ e lastlndexOf ( ) procuram um elemento com um valor especificado em um array e retor- 
nam o fndice do primeiro elemento encontrado com esse valor ou -1, se nenhum for encontrado. 
indexOfQ pesquisa o array do initio ao fim e lastlndexOfQ pesquisa do fim para o initio, 
a = [0,1,2,1,0]; 

a.indexOf(l) // => l: a[l] e 1 

a.lastlndexOf(l) // => 3: a[B] e 1 

a.index0f(3) // => -l: nenhum elemento tern o valor 3 

Ao contrario dos outros metodos descritos nesta se^ao, index0f() e lastlndexOf () nao recebem um 
argumento de funijao. O primeiro argumento e o valor a ser pesquisado. O segundo argumento e 
opcional: ele especifica o fndice do array em que a pesquisa deve come^ar. Se esse argumento e omi- 
tido, index0f() come^a no initio e lastlndexOf () come^a no fim. Valores negativos sao permitidos 
para o segundo argumento e sao tratados como um deslocamento em rela?ao ao fim do array, assim 
como acontece no metodo spliceQ: um valor -1, por exemplo, especifica o ultimo elemento do 
array. 

A funijao a seguir pesquisa um array em busca de um valor especificado e retorna um array com todos 
os indices coincidentes. Isso demonstra como o segundo argumento de indexOfQ pode ser usado 
para localizar coincidencias alem da primeira. 

// Localiza todas as ocorrencias de um valor x em um array a e retorna um array 
// de indices coincidentes 
function findall(a, x) { 
var results = [], 
len = a.length, 

while(pos < len) { 

pos = a.indexOf(x, pos); 
if (pos === -l) break; 
results.push(pos); 
pos = pos + l; 

} 

return results; 

} 

Note que as strings tern metodos indexOfQ e lastlndexOfQ que funcionam como esses metodos 
de array. 

7.10 Tipo do array 

Vimos ao longo deste capftulo que os arrays sao objetos com comportamento especial. Dado um 
objeto desconhecido, frequentemente a capacidade de determinar se ele e um array ou nao e util. Em 
ECMAScript 5, isso pode ser feito com a fun^ao Array.isArray(): 

Array.isArray([]) // => verdadeiro 

Array.isArray(Q) // => falso 


// 0 array de indices que vamos retornar 

// 0 comprimento do array a ser pesquisado 

// A posicao inicial da pesquisa 

// Enquanto houver mais elementos para pesquisar... 

// Pesquisa 

// Se nada for encontrado, terminamos. 

// Caso contrario, armazena o indice no array 
// E comeca a proxima busca no proximo elemento 

// Retorna o array de indices 
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Antes de ECMAScript 5, contudo, distinguir arrays de objetos que nao eram array era surpreenden- 
temente dificil. O operador typeof nao ajuda aqui: ele retorna “objeto” para arrays (e para todos os 
objetos que nao sao fun^oes). O operador instanceof funciona em casos simples: 

[] instanceof Array // => verdadeiro 

({}) instanceof Array // => falso 

O problema de usar instanceof e que nos navegadores Web pode haver mais de uma janela ou qua- 
dro (frame) aberto. Cada uma tern seu proprio ambiente JavaScript, com seu proprio objeto global. 
E cada objeto global tern seu proprio conjunto de fun(;oes construtoras. Portanto, um objeto de um 
quadro nunca vai ser uma instancia de uma construtora de outro quadro. Embora a confiisao entre 
quadros nao surja com muita frequencia, esse e um problema suficiente para que o operador instan¬ 
ceof nao seja considerado um teste confiavel para arrays. 

A soluqao e inspecionar o atributo classe (consulte a Seqao 6.8.2) do objeto. Para arrays, esse atributo 
sempre vai ter o valor “Array” e, portanto, podemos escrever uma fun^ao isArrayQ em ECMAScript 
3, como segue: 

var isArray = Function.isArray || function(o) { 
return typeof o === "object" && 

Object.prototype.toString.call(o) === "[object Array]"; 

}; 

Esse teste do atributo classe e, de fato, exatamente o que a funijao Array.isArrayQ de ECMAScript 
5 faz. A tecnica para obter a classe de um objeto usando Object.prototype.toStringQ esta explicada 
na Se^ao 6.8.2 e demonstrada no Exemplo 6-4. 

7.11 Objetos semelhantes a um array 

Como vimos, os arrays em JavaScript tern algumas caracteristicas especiais inexistentes em outros 
objetos: 

• A propriedade length e atualizada automaticamente quando novos elementos sao adicionados 
na lista. 

• Configurar length com um valor menor trunca o array. 

• Os arrays herdam metodos uteis de Array. prototype. 

• Os arrays tern um atributo classe de “Array”. 

Essas sao as caracteristicas que tornam os arrays de JavaScript diferentes dos objetos normais. Mas 
nao sao estas as caracteristicas fundamentals que definem um array. Muitas vezes e perfeitamente 
razoavel tratar qualquer objeto com uma propriedade length numerica e propriedades de inteiro nao 
negativo correspondentes como um tipo de array. 

Esses objetos “semelhantes a um array” aparecem ocasionalmente na pratica e, embora nao seja pos- 
sivel chamar metodos de array diretamente neles, nem esperar comportamento especial da proprie¬ 
dade length, voce ainda pode iterar por eles com o mesmo codigo que usaria para um array verdadei¬ 
ro. Constata-se que muitos algoritmos de array funcionam tao bem com objetos semelhantes a um 
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array como funcionariam com arrays reais. Isso e especialmente verdade se seus algoritmos tratam 
o array como somente para leitura ou se pelo menos deixam o comprimento do array inalterado. 

O codigo a seguir pega um objeto normal, adiciona propriedades para transforma-lo em um objeto 
semelhante a um array e depois itera pelos “elementos” do pseudoarray resultante: 
var a = {}; // Comega com um objeto vazio normal 

// Adiciona propriedades para torna-lo "semelhante a um array" 
var i = 0; 
while(i < 10) { 
a[i] « i * ij 


} 1 th ' 


// Agora itera por ele como se fosse um array real 
var total = 0; 

for(var j = 0; j < a.length; j++) 
total += a[j]; 


O objeto Arguments, descrito na Seqao 8.3.2, e um objeto semelhante a um array. Em JavaScript do 
lado do cliente, varios metodos DOM, como document.getElementsByTagNameQ, retornam objetos 
semelhantes a um array. Aqui esta uma funpio que poderia ser usada para testar objetos que funcio- 
nam como arrays: 


// Determina se o e um objeto semelhante a um array. 

// Strings e fun^oes tern propriedades length numericas, mas sao 

// excluidas pelo teste de typeof. Em JavaScript do lado do cliente, os nos de texto DOM 
// tern uma propriedade length numerica e talvez precisem ser excluidos 
// com um teste o.nodeType != 3 adicional. 
function isArrayLike(o) { 
if (o && 

typeof o === "object" && 
isFinite(o.length) && 
o.length >= 0 && 

o.length===Math.floor(o.length) && 
o.length < 4294967296) 
return true; 

else 

return false; 

} 


/ o nao e null, undefined, etc. 

/ o.length e um numero finito 
/ o.length e nao negativo 
/ o.length e um inteiro 
/ o.length < 2 A 32 
/ Entao o e semelhante a um array 

/ Caso contrario, nao e 


Vamos ver na Sepio 7.12 que as strings de ECMAScript 5 se comportam como arrays (e que alguns 
navegadores tornaram possfvel indexar strings antes de ECMAScript 5). Contudo, testes como o 
anterior para objetos semelhantes a um array normalmente retornam false para strings - em geral 
eles sao mais bem manipulados como strings e nao como arrays. 

Os metodos de array de JavaScript sao intencionalmente definidos para serem genericos, de modo 
que funcionam corretamente quando aplicados em objetos semelhantes a um array e em arrays 
verdadeiros. Em ECMAScript 5, todos os metodos de array sao genericos. Em ECMAScript 3, 
todos os metodos, exceto toStringQ e toLocaleStringQ, sao genericos. (O metodo concatQ e 
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uma exce^ao: embora possa ser chamado em um objeto semelhante a um array, ele nao expande 
corretamente esse objeto no array retornado.) Como os objetos semelhantes a um array nao herdam 
de Array.prototype, nao e possfvel chamar metodos de array neles diretamente. Contudo, e possfvel 
chama-los indiretamente, usando o metodo Function.call: 


var a = {"0":"a", "2":"c", lengths}; 

Array.prototype.join.call(a, "+") // => 

Array.prototype.slice.call(a, 0) // => 

Array.prototype.map.call(a, function(x) { 
return x.toUpperCaseQ; 

}) // => 


// Um objeto semelhante a um array 
["a","b","c"]: copia do array verdadeiro 


["A","B","C"]: 


Vimos essa tecnica de call() anteriormente, no metodo isArrayQ da Seqao 7.10. O metodo callQ 
de objetos Function e abordado com mais detalhes na Se^ao 8.7.3. 


Os metodos de array de ECMAScript 5 foram introduzidos no Firefox 1.5. Como eram escritos 
genericamente, o Firefox tambem introduziu versoes desses metodos como funijoes definidas di¬ 
retamente na construtora Array. Com essas versoes dos metodos definidas, os exemplos anteriores 
podem ser reescritos como segue: 

var a = {"0":"a", "l":"b", "2":"c", lengths}; // Um objeto semelhante a um array 
Array.join(a, "+") 

Array.slice(a, 0) 

Array.map(a, function(x) { return X.toUpperCaseQ; }) 


Essas versoes de funfao estatica dos metodos de array sao muito uteis ao se trabalhar com objetos 
semelhantes a um array, mas como nao sao padronizadas, nao se pode contar com o fato de estarem 
definidas em todos os navegadores. Voce pode escrever codigo como o seguinte para garantir que as 
funijoes necessarias existam, antes de utiliza-las: 

Array.join = Array.join || function(a,sep) { 
return Array.prototype.join.call(a,sep); 

}; 

Array.slice = Array.slice || function(a,from,to) { 
return Array.prototype.slice.call(a,from,to); 

n 

Array.map = Array.map || function(a, f, thisArg) { 
return Array.prototype.map.call(a, f, thisArg); 

} 


7.12 Strings como arrays 

Em ECMAScript 5 (e em muitas implementa^oes recentes de navegadores - incluindo o IE8 - antes 
de ECMAScript 5), as strings se comportam como arrays somente para leitura. Em vez de acessar 
caracteres individuals com o metodo charAtQ, pode-se usar colcbetes: 

var s = test; 
s.charAt(o) // => ”t" 
s[l] // => V 

O operador typeof ainda retorna “string” para strings, e claro, e o metodo Array.isArrayQ retorna 
false se uma string e passada para ele. 

A principal vantagem das strings que podem ser indexadas e simplesmente que podemos substituir 
chamadas para charAtQ por colchetes, que sao mais concisos, legiveis e possivelmente mais eficien- 
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tes. Contudo, o fato de strings se comportarem como arrays tambem significa que podemos aplicar 
nelas metodos genericos de array. Por exemplo: 
s = "JavaScript" 

Array.prototype.join. call(Sj " ") // => "J a v a S c r i p t" 

Array.prototype.filter.call(s, // Filtra os caracteres da string 

function(x) { 

return x.match(/[ A aeiou]/); // Corresponde apenas as nao vogais 
}).join("") // => "IvScrpt" 

Lembre-se de que as strings sao valores imutaveis; portanto, quando sao tratadas como arrays, elas 
sao arrays somente para leitura. Metodos de array como push(), sortQ, reverse() e splice() modifi- 
cam um array no local e nao funcionam em strings. No entanto, tentar modificar uma string usando 
um metodo de array nao causa erro: apenas falha silenciosamente. 




Capitulo 8 

Fun$oes 


Uma fungdo e um bloco de codigo JavaScript definido uma vez, mas que pode ser executado 
(ou chamado) qualquer numero de vezes. Talvez voce ja conheqa a noqao de funqao com o nome 
de sub-rotina ou procedimento. As funqoes em JavaScript sao parametrizadas-. uma definiqao de 
fun<jao pode incluir uma lista de identificadores, conhecidos como pardmetros, que fimcionam 
como variaveis locais para o corpo da furnjao. As chamadas de funqao fornecem valores (ou 
argumentos) para os parametros da funqao. Frequentemente, as fiimjoes utilizam seus valores de 
argumento para calcular um valor de retomo, que se torna o valor da expressao da chamada de 
furnjao. Alem dos argumentos, cada chamada tern outro valor — o contexto da chamada —, que e 
o valor da palavra-chave this. 

Se uma funijao e atribufda a propriedade de um objeto, ela e conhecida como metodo desse objeto. 
Quando uma fumjao e chamada em ou por meio de um objeto, esse objeto e o contexto da chamada 
ou o valor de this da funqao. As fun (joes projetadas para inicializar um objeto recem-criado sao de- 
nominadas construtoras. As construtoras foram descritas na Seqao 6.1 e serao abordadas novamente 
no Capitulo 9. 

Em JavaScript, as fun (joes sao objetos e podem ser manipuladas pelos programas. JavaScript pode 
atribuir funijoes a variaveis e passa-las para outras fun (joes, por exemplo. Como as fun<joes sao obje¬ 
tos, e possivel deflnir propriedades e ate mesmo chamar metodos a partir delas. 

As definiqoes de furnjao JavaScript podem ser aninhadas dentro de outras funcjoes e tern acesso 
a qualquer variavel que esteja no escopo onde sao definidas. Isso significa que as funijoes em 
JavaScript sao fechadas em relaqao as suas variaveis e isso possibilita o uso de tecnicas de progra- 
majao importantes e poderosas. 
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8.1 Definindofun0es 

As fun^oes sao definidas com a palavra-chave function, que pode ser usada em uma expressao de 
defini^ao de fun910 (Se^ao 4 . 3 ) ou em uma instru^ao de declara^ao de fun 910 (Se^ao 5 . 3 . 2 ). Em 
uma ou outra forma, as definifoes de fun^ao comefam com a palavra-chave function, seguida dos 
seguintes componentes: 

• Um identificador que da nome a fun 910. O nome e uma parte obrigatoria das instru^oes de 
declara^ao de fun 910: ele e usado como o nome de uma variavel e o objeto funfao recem-de- 
flnido e atribufdo a esta variavel. Para expressoes de definiijao de fun 910, o nome e opcional: 
se estiver presente, ele se refere ao objeto funqao apenas dentro do proprio corpo da funijao. 

• Um par de parenteses em torno de uma lista de zero ou mais identificadores separados com 
vfrgulas. Esses identificadores sao nomes de parametro da fun910 e se comportam como varia- 
veis locais dentro do corpo da fun910. 

• Um par de chaves contendo zero ou mais instru^oes JavaScript. Essas instru^oes sao o corpo da 
fun910: elas sao executadas quando a fun910 e chamada. 

O Exemplo 8-1 mostra algumas defini^oes de fun 910 usando tan to a forma de instru?ao como de 
expressao. Observe que uma funqao definida como expressao so e litil se faz parte de uma expressao 
maior, como uma atribui^ao ou uma chamada, que faz algo com a fun910 recem-definida. 

Exemplo 8-1 Definindo fun^oes em JavaScript 

// Imprime 0 nome e 0 valor de cada propriedade de 0. Retorna undefined, 
function printprops(o) { 
for(var p in 0) 

console.log(p + " + o[p] + "\n"); 

} 

// Calcula a distancia entre pontos cartesianos (xl,yl) e (x2,y2). 
function distance(xl, yl, x2, y2) { 

var dy = y2 - yl; 

return Math.sqrt(dx*dx + dy*dy); 

} 

// Uma funcao recursiva (que chama a si mesma) que calcula fatoriais 
// Lembre-se de que x! e 0 produto de x e todos os inteiros positivos menores do que ele. 
function factorial(x) { 
if (x <= l) return 1; 
return x * factorial(x-l); 


} 
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// Esta expressao de funcao define uma fungao que eleva seu argumento ao quadrado. 

// Note que a atribuimos a uma variavel 
var square = function(x) { return x*x; } 

// As expressoes de fungao podem incluir nomes, o que e util para a recursividade. 
var f = function fact(x) { if (x <= l) return 1; else return x*fact(x-l); }; 

// As expressoes de fungao tambem podem ser usadas como argumentos de outras fungoes: 
data.sort(function(a,b) { return a-b; }); 

// As vezes as expressoes de funcao sao definidas e chamadas imediatamente: 
var tensquared = (function(x) {return x*x;}(lO)); 

Note que o nome da fungao e opcional para fungoes definidas como expressoes. A instrugao 
de declaragao de fungao na verdade declara uma variavel e atribui a ela um objeto funcao. Uma 
expressao de deflnigao de fungao, por outro lado, nao declara uma variavel. E permitido um 
nome para fungoes (como na fungao de fatorial anterior) que precisem fazer referenda a si mes- 
mas. Se uma expressao de deflnigao de fungao inclui um nome, o escopo de fungao local dessa 
fungao vai incluir um vinculo desse nome com o objeto fungao. Na verdade, o nome da fungao 
se torna uma variavel local dentro da fungao. A maioria das fungoes definidas como expressoes 
nao precisa de nomes, o que torna suas definigoes mais compactas. As expressoes de deflnigao 
de fungao sao especialmente apropriadas para fungoes utilizadas apenas uma vez, como nos dois 
ultimos exemplos. 


Nomes de funcao 

Qualquer identificador JavaScript valido pode ser um nome de funcao. Tente escolher nomes de funcao 
descritivos, mas concisos. Encontrar um ponto de equilibrio e uma arte que se adquire com a experience. 
Nomes de funcao bem escolhidos podem fazer uma grande diferenga na legibilidade (e, portanto, na ma- 
nutenibilidade) de seu codigo. 

Muitas vezes, os nomes de fungao sao verbos ou frases que comegam com verbos. £ uma convengao iniciar 
nomes de fungao com uma letra minuscula. Quando um nome contem varias palavras, uma convengao e 
separa-las com sublinhados deste_jeito(); outra convengao e iniciar todas as palavras apos a primeira 
com uma letra maiuscula desteJeito(). Fungoesquedevem ser internas ou ocultas (e nao parte de uma 
API publica) as vezes recebem nomes que comegam com um sublinhado. 

Em alguns estilos de programagao ou dentro de estruturas de programagao bem definidas, pode ser util 
dar nomes bem curtos para as fungoes utilizadas com mais frequencia. A estrutura jQuery de JavaScript 
do lado do diente (abordada no Capitulo 19), por exemplo, utiliza intensamente uma fungao chamada $ () 
(sim, apenas o cifrao em sua API publica). (Lembre-se, da Segao 2.4, que cifroes e sublinhados sao os dois 
caracteres (alem das letras e numeros) validos em identificadores JavaScript.) 


Conforme descrito na Segao 5 . 3 . 2 , as instrugoes de declaragao de fungao sao “igadas” para o inicio 
do script ou da fungao circundante, de modo que as fungoes declaradas dessa maneira podem ser 
chamadas a partir de um codigo que aparece antes que elas sejam definidas. No entanto, isso nao 
vale para fungoes definidas como expressoes: para chamar uma fungao, voce precisa ser capaz de 
fazer referenda a ela, e nao se pode fazer referenda a uma fungao definida como uma expressao ate 
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que ela seja atribufda a uma variavel. As declara^oes de variavel sao iijadas (consulte a Seijao 3.10.1), 
mas as atribui^oes a essas variaveis nao; portanto, as fun^oes definidas com expressoes nao podem ser 
chamadas antes de serem definidas. 

Observe que a maioria das funijoes (mas nao todas) o Exemplo 8-1 content uma instru^ao return 
(Se^ao 5.6.4). A instruijao return faz a funijao parar de executar e retornar o valor de sua expressao 
(se houver) para o chamador. Se a instruijao return nao tern uma expressao associada, ela retorna o 
valor undefined. Se uma funijao nao content uma instru^ao return, ela simplesmente executa cada 
instruijao do corpo da funijao e retorna o valor undefined para o chamador. 

A maioria das fun (joes o Exemplo 8-1 e projetada para calcular um valor e utiliza return para retor¬ 
nar esse valor para seu chamador. A funqao printprops () e diferente: sua tarefa e produzir na saida os 
nomes e valores das propriedades de um objeto. Nao e necessario valor de retorno algum e a funijao 
nao inclui uma instruijao return. O valor de uma chamada da funijao printpropsQ e sempre unde¬ 
fined. (As vezes as funijoes sem valor de retorno sao chamadas de procedimentos) 

8.1.1 Fun^oesaninhadas 

Em JavaScript, as fun (joes podem ser aninhadas dentro de outras fun<joes. Por exemplo: 

function hypotenuse(a, b) { 

function square(x) { return x*x; } 
return Math.sqrt(square(a) + square(b)); 

} 

O interessante a respeito das fun<joes aninhadas sao suas regras de escopo de variavel: elas podem 
acessar os parametros e as variaveis da funijao (ou funijoes) dentro das quais estao aninhadas. No 
codigo anterior, por exemplo, a funijao interna square() pode ler e gravar os parametros a e b defi- 
nidos pela funijao externa hypotenuse(). Essas regras de escopo para funijoes aninhadas sao muito 
importantes e vamos considera-las novamente na Seijao 8.6. 

Conforme observado na Se^ao 5.3.2, as instrutjoes de declara^ao de funijao nao sao instru^oes ver- 
dadeiras e a especificatjao ECMAScript so as permite como instrufoes de nivel superior. Elas podem 
aparecer em codigo global ou dentro de outras funijoes, mas nao podem aparecer dentro de la^os, 
condicionais ou instrutjoes try/catch/finally ou with 1 . Note que essa restriijao so se aplica as fun- 
qoes declaradas como instruijoes. As expressoes de defmitjao de funijao podem aparecer em qualquer 
lugar em seu codigo JavaScript. 

8.2 Chamandofun0es 

O codigo JavaScript que constitui o corpo de uma funijao nao e executado quando a funijao e defini- 
da, mas quando ela e chamada. Em JavaScript as funijoes podem ser chamadas de quatro maneiras: 

• como funijoes, 

• como metodos, 


Algumas implementajoes de JavaScript nao sao tao rigidas quanto a essa regra. O Firefox, por exemplo, permite que “de- 
darafoes de fun^o condicional” apare^am dentro de instru^oes if. 





162 Parte I JavaScript basica 


• como construtoras e 

• indiretamente, por meio de seus metodos call() eapplyQ. 

8.2.1 Chamada defun^ao 

As fun<joes sao chamadas como fun (joes ou como metodos com uma expressao de invoca<jao (Seijao 
4.5). Uma expressao de invoca<jao consiste em uma expressao de fun<jao que e avaliada como um ob- 
jeto fun<jao, seguida por um parentese de abertura, uma lista de zero ou mais expressoes de argumen- 
to separada com virgulas e um parentese de fechamento. Se a expressao de fun<jao e uma expressao 
de acesso a propriedade - se a funijao e a propriedade de um objeto ou um elemento de um array 
entao ela e uma expressao de invocaijao de metodo. Esse caso vai ser explicado em seguida. O codigo 
a seguir contem varias expressoes de chamada de funijao normais: 
printprops({x:l}); 

var total = distance(0,0,2,1) + distanced,1,3,5); 
var probability = factorial(5)/factorial(l3); 

Em uma chamada, cada expressao de argumento (aquelas entre os parenteses) e avaliada e os valores 
resultantes se tornam os argumentos da funijao. Esses valores sao atribuidos aos parametros nomea- 
dos na defini<jao da funijao. No corpo da funijao, uma referenda a um parametro e avaliada com o 
valor do argumento correspondente. 

Para uma chamada de fun<jao normal, o valor de retorno da funijao torna-se o valor da expressao de 
invocaijao. Se a funijao retorna porque o interpretador chega no final, o valor de retorno e undefined. 
Se a funijao retorna porque o interpretador executa uma instnnjao return, o valor de retorno e o 
valor da expressao que vem apos a instruijao return ou undefined, caso a instruijao return nao tenha 
valor algum. 

Para uma chamada de fun^ao em ECMAScript 3 e em ECMAScript 5 nao restrita, o contexto da 
chamada (o valor de this) e o objeto global. No entanto, no modo restrito o contexto da chamada 
e undefined. 

Normalmente, as funtjoes escritas para serem chamadas como fun (joes nao usam a palavra-chave 
this. Contudo, ela pode ser usada para determinar se o modo restrito esta em vigor: 

// Define e chama uma funcao para determinar se estamos no modo restrito. 
var strict = (functionQ { return !this; }()); 


8.2.2 Chamada de metodo 

Um metodo nada mais e do que uma frnnjao JavaScript armazenada em uma propriedade de um 
objeto. Se voce tern uma fun<jao f e um objeto o, pode definir um metodo chamado m de o com a 
linha a seguir: 
o.m = f; 

Tendo definido o metodo m() do objeto o, chame-o como segue: 
o.m(); 
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Ou entao, se m() espera dois argumentos, voce pode chama-lo como segue: 
o.m(x, y); 

O codigo anterior e uma expressao de invoca^ao: ele inclui uma expressao de fun<;ao o.m e duas 
expressoes de argumento, x e y. A propria expressao de funijao e uma expressao de acesso a proprie- 
dade (Se^ao 4.4) e isso significa que a fun<;ao e chamada como um metodo e nao como uma fun<;ao 
normal. 

Os argumentos e o valor de retorno de uma chamada de metodo sao tratados exatamente como des- 
crito anteriormente para chamada de funijao normal. Contudo, as chamadas de metodo diferem das 
chamadas de funijao de uma maneira importante: o contexto da chamada. As expressoes de acesso 
a propriedade consistem em duas partes: um objeto (neste caso, o) e um nome de propriedade (m). 
Em uma expressao de invocaqao de metodo como essa, o objeto o se torna o contexto da chamada e 
o corpo da funijao pode se referir a esse objeto usando a palavra-chave this. Aqui esta um exemplo 
concreto: 

var calculator = { // Um objeto literal 

operandl: 1, 
operand2: 1, 
add: function() { 

// Note o uso da palavra-chave this para se referir a esse objeto. 
this.result = this.operandl + this.operand2; 

} 

}; 

calculator.add(); // Uma chamada de metodo para calcular l+i. 

calculator.result // => 2 

A maioria das chamadas de metodo usa a nota^ao de ponto para acesso a propriedade, mas as ex¬ 
pressoes de acesso a propriedade que utilizam colchetes tambem causam chamadas de metodo. As 
seguintes sao ambas chamadas de metodo, por exemplo: 

o["m"](x,y); // Outra maneira de escrever o.m(x,y). 

a[0](z) // Tambem e uma chamada de metodo (supondo que a[o] seja uma funqao). 

As chamadas de metodo tambem podem envolver expressoes de acesso a propriedade mais comple- 
xas: 

customer.surname.toUpperCase(); // Chama metodo em customer.surname 

f().m(); // Chama o metodo m() no valor de retorno de f() 

Os metodos e a palavra-chave this sao fundamentals para o paradigma da programa^ao orientada 
a objetos. Qualquer funfao que seja utilizada como metodo recebe um argumento implicito - o 
objeto por meio do qual ela e chamada. Normalmente, um metodo efetua algum tipo de opera^ao 
nesse objeto e a sintaxe de chamada de metodo e uma maneira elegante de expressar o fato de que 
uma fun^ao esta operando em um objeto. Compare as duas linhas a seguir: 

rect.setSize(width, height); 
setRectSize(rect, width, height); 

As fun^oes hipoteticas chamadas nessas duas linhas de codigo podem efetuar exatamente a mesma 
opera^ao no objeto (hipotetico) rect, mas a sintaxe da chamada de metodo na primeira linha trans¬ 
mite mais claramente a ideia de que o foco principal da opera^ao e o objeto rect. 
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Encadeamento de metodos 

Quando metodos retornam objetos, pode-se usar o valor de retorno de uma chamada de metodo como 
parte de uma chamada subsequente. Isso resulta em uma serie (ou "encadeamento" ou "cascata") de cha- 
madas de metodo como uma unica expressao. Ao se trabalharcom a biblioteca jQuery (Capltulo 19), por 
exemplo, e comum escrever codigo como o seguinte: 

// Localiza todos os cabegalhos, mapeia para suas identificagoes, converte em urn 
//array e os classifica 

$(":header").map(-function() { return this.id }).get().sort(); 

Quando voce escrever urn metodo que nao tern seu proprio valor de retorno, pense em faze-lo retornar 
this. Se voce fizer isso sistematicamente em toda sua API, permitira urn estilo de programagao conhecido 
como encadeamento de metodos 2 , no qual urn objeto pode ser nomeado uma vez e, entao, varios meto¬ 
dos podem ser chamados a partir dele: 

shape.setX(iOO).setY(iOO).setSize(50).setOutline("red").setFill("blue").draw(); 

Nao confunda encadeamento de metodos com encadeamento de construtoras, que sera descrito na Se- 
gao 9.7.2. 


Note que this e uma palavra-chave e nao uma variavel ou nome de propriedade. A sintaxe de Java¬ 
Script nao permite atribuir um valor a this. 


Ao contrario das variaveis, a palavra-chave this nao tern escopo e as fungoes aninhadas nao herdam 
o valor de this de suas chamadoras. Se uma fungao aninhada e chamada como um metodo, seu valor 
de this e o objeto em que foi chamada. Se uma fungao aninhada e chamada como uma fungao, en¬ 
tao seu valor de this vai ser o objeto global (modo nao restrito) ou undefined (modo restrito). E um 
erro comum supor que uma fungao aninhada chamada como fungao pode utilizar this para obter 
o contexto da chamada da fungao externa. Se quiser acessar o valor de this da fungao externa, voce 
precisa armazenar esse valor em uma variavel que esteja no escopo da fungao interna. E comum usar 
a variavel self para esse proposito. Por exemplo: 


m: functionQ { 

var self = this; 
console.log(this === o); 

f(); 


// Um objeto o. 

// Metodo m do objeto. 

// Salva o valor de this em uma variavel. 
// Imprime "true": this e o objeto o. 

// Agora chama a fungao auxiliar f(). 


function f() { 

console.log(this 
console.log(self 

} 

} 

}; 

o.nQj 


// Uma fungao aninhada f 
o); // "false": this e global ou undefined 

o); // "true": self e o valor do this externo. 


// Chama o metodo m no objeto o. 


O Exemplo 8-5, na Segao 8.7.4, contem um uso mais realista do idioma var self=this. 


2 O termo 


' foi cunhado por Martin Fowler. Consulte o endere?o http://martinfowkr.com/dslwip/MethodChaining.html. 
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8.2.3 Chamada de construtora 

Se uma chamada de funijao ou de metodo e precedida pela palavra-chave new, entao ela e uma 
chamada de construtora. (As chamadas de construtora foram apresentadas na Se^ao 4.6 e na Se^ao 
6.1.2, e as construtoras serao abordadas com mais detalhes no Capftulo 9.) As chamadas de constru¬ 
tora diferem das chamadas de funijao e de metodo normais na forma como tratam os argumentos, o 
contexto da chamada e o valor de retorno. 

Se uma chamada de construtora inclui uma lista de argumentos entre parenteses, essas expressoes de 
argumento sao avaliadas e passadas para a funfao da mesma maneira como seriam para chamadas 
de funqao e de metodo. Mas se uma construtora nao tern parametros, entao a sintaxe de chamada 
de construtora de JavaScript permite que a lista de argumentos e os parenteses sejam inteiramente 
omitidos. Um par de parenteses vazios sempre pode ser omitido em uma chamada de construtora e 
as duas linhas a seguir, por exemplo, sao equivalentes: 

var o = new ObjectQ; 
var o = new Object; 

Uma chamada de construtora cria um novo objeto vazio que herda da propriedade prototype da 
construtora. Funqbes construtoras se destinam a inicializar objetos, sendo que o objeto recem-criado 
e utilizado como contexto da chamada, de modo que a fun<;ao construtora pode se referir a ela com 
a palavra-chave this. Note que o novo objeto e usado como contexto da chamada, mesmo que a 
chamada de construtora se pare^a com uma chamada de metodo. Isto e, na expressao new o.m(), o 
nao e usado como contexto da chamada. 

As funijoes construtoras em geral usam a palavra-chave return. Elas normalmente inicializam o novo 
objeto e entao retornam implicitamente ao chegarem no final de seus corpos. Nesse caso, o novo 
objeto e o valor da expressao de invoca^ao da construtora. No entanto, se uma construtora usa expli- 
citamente a instru^ao return para retornar um objeto, entao esse objeto se torna o valor da expressao 
de invoca^ao. Se a construtora usa return sem valor algum ou se retorna um valor primitivo, esse 
valor de retorno e ignorado e o novo objeto e usado como valor da chamada. 


8.2.4 Chamada indireta 

Em JavaScript as funfoes sao objetos e como todos os objetos em JavaScript, elas tern metodos. Dois 
desses metodos, call() e apply(), chamam a funijao indiretamente. Os dois metodos permitem es- 
pecificar explicitamente o valor de this para a chamada, ou seja, e possivel chamar qualquer funijao 
como metodo de qualquer objeto, mesmo que nao seja realmente um metodo desse objeto. Os dois 
metodos tambem permitem especificar os argumentos da chamada. O metodo call() utiliza sua 
propria lista de argumentos como argumentos para a funqao e o metodo apply () espera que um array 
de valores seja usado como argumentos. Os metodos call() e apply() estao descritos em detalhes na 
Sefao 8.7.3. 
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8.3 Argumentos e parametros de funcao 

As defini^oes de funcao em JavaScript nao especificam um tipo esperado para os parametros e as 
chamadas de funcao nao fazem qualquer verificafao de tipo nos valores de argumento passados. 
Na verdade, as chamadas de furnjao em JavaScript nem mesmo verificam o niimero de argumentos 
que estao sendo passados. As subse^oes a seguir descrevem o que acontece quando uma funcao e 
chamada com menos argumentos do que parametros declarados ou com mais argumentos do que 
parametros declarados. Elas tambem demonstram como e possivel testar explicitamente o tipo dos 
argumentos da funcao, caso seja necessario garantir que uma funcao nao seja chamada com argu¬ 
mentos incompativeis. 

8.3.1 Parametros opcionais 

Quando uma funcao e chamada com menos argumentos do que parametros declarados, os pa¬ 
rametros adicionais sao configurados com o valor undefined. Frequentemente e util escrever fun- 
?oes de modo que alguns argumentos sejam opcionais e possam ser omitidos na chamada da 
funfao. Para fazer isso, deve-se atribuir um valor padrao razoavel aos parametros omitidos. Aqui 
esta um exemplo: 

// Anexa os nomes das propriedades enumeraveis do objeto o no 
// array a e retorna a. Se a for omitido, cria e retorna um novo array, 
function getPropertyNames(o, /* opcional */ a) { 

if (a === undefined) a = []; // Se for undefined, usa um novo array 

for(var property in o) a.push(property); 

I r6tUrn 3 ’ 


// Esta fun<;ao pode ser chamada com 1 ou 2 argumentos: 

var a = getPropertyNames(o); // Obtem as propriedades de o em um novo array 

getPropertyNames(p,a); // anexa as propriedades de p nesse array 

Em vez de usar uma instruQo if na primeira linha dessa funcao, pode-se usar o operador | | nesta 
forma idiomatica: 
a-a || []; 

Lembre-se, da Se^ao 4.10.2, que o operador | | retorna seu primeiro argumento se esse argumento 
for verdadeiro e, caso contrario, retorna seu segundo argumento. Nesse caso, se qualquer objeto for 
passado como segundo argumento, a funcao vai usar esse objeto. Mas se o segundo argumento for 
omitido (ou for passado null ou outro valor falso), sera usado em seu lugar o array vazio recem- 
-criado. 

Note que, ao projetar fun^oes com argumentos opcionais, voce deve certificar-se de colocar 
os que sao opcionais no final da lista de argumentos para que eles possam ser omitidos. O 
programador que chamar sua funcao nao podera omitir o primeiro argumento e passar o 
segundo: ele precisaria passar undefined explicitamente para o primeiro argumento. Observe 
tambem o uso do comentario /* opcional */ na definiQo de funcao, para salientar o fato de que 
o parametro e opcional. 
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8.3.2 Listas de argumento de comprimento variavel: o objeto Arguments 

Quando uma funijao e chamada com mais valores de argumento do que os nomes de parametro 
existentes, nao ha maneira de se referir diretamente aos valores nao nomeados. O objeto Arguments 
fornece uma soluqao para esse problema. Dentro do corpo de uma funijao, o identificador arguments 
se refere ao objeto Arguments para essa chamada. O objeto Arguments e um objeto semelhante a um 
array (consulte a Se^ao 7.11) que permite aos valores de argumento passados para a funfao serem 
recuperados por niimero, em vez de por nome. 

Suponha que voce defina uma funijao f que espera receber um unico argumento, x. Se essa funijao 
for chamada com dois argumentos, o primeiro argumento vai estar acessfvel dentro da funijao pelo 
nome de parametro x ou como arguments[0]. O segundo argumento vai estar acessfvel somente 
como argumentsfi], Alem disso, assim como os arrays reais, arguments tem uma propriedade length 
que especifica o numero de elementos que ele content. Assim, dentro do corpo da funqao f, chama¬ 
da com dois argumentos, arguments.length tem o valor 2. 

O objeto Arguments e util de varias maneiras. O exemplo a seguir mostra como e possfvel utiliza-lo 
para verificar se uma fun^ao e chamada com o numero de argumentos esperado, pois JavaScript nao 
faz isso automaticamente: 
function f(x, y, z) 

{ 

// Primeiramente, verifica se foi passado o numero correto de argumentos 
if (arguments.length != 3) { 

throw new Error("function f called with " + arguments.length + 

"arguments, but it expect 3 arguments."); 

} 

// Agora executa a fun^ao real... 

} 

Note que muitas vezes e desnecessario verificar o numero de argumentos assim. O comportamento 
padrao de JavaScript e satisfatorio na maioria dos casos: os argumentos ausentes sao undefined e os 
argumentos extras sao simplesmente ignorados. 

Um uso importante do objeto Arguments e na escrita de fun^oes que operam sobre qualquer nume¬ 
ro de argumentos. A funfao a seguir aceita qualquer numero de argumentos numericos e retorna o 
valor do maior argumento passado (consulte tambem a fun 910 interna Math.maxQ, que se comporta 
da mesma maneira): 

function max(/* ... */) { 

var max = Number.NEGATIVE_INFINITY; 

// Itera atraves de argumentos, procurando (e lembrando) 0 maior. 
for(var i = 0; i < arguments.length; i++) 

if (argumentsfi] > max) max = argumentsji]; 

// Retorna o maior 

} retUln ma>< ’ 


largest = max(i, 10, 100, 2, 3 , 1000 , 4 , 5, 10000, 6);// => 10000 
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Fungoes como essa, que podem aceitar qualquer numero de argumentos, sao chamadas de fungoes 
variadicas, fungoes de aridade varidvel ou fungoes varargs. Este livro utiliza o termo mais coloquial, 
varargs, que remonta aos primordios da linguagem de programa^ao C. 

Note que as fungoes varargs nao precisam permitir chamadas com zero argumentos. E perfeita- 
mente razoavel usar o objeto arguments [] para escrever fungoes que esperam um numero fixo de 
argumentos nomeados e obrigatorios, seguidos de um numero arbitrario de argumentos opcionais 
nao nomeados. 

Lembre-se de que arguments nao e realmente um array; e um objeto Arguments. Cada objeto Argu¬ 
ments define elementos de array numerados e uma propriedade length, mas tecnicamente nao e um 
array - e melhor considera-lo um objeto que coincidentemente tern algumas propriedades numera- 
das. Consulte a Seqao 7.11 para mais informafoes sobre objetos semelhantes a um array. 

O objeto Arguments tern uma caracterfstica muito incomum. No modo nao restrito, quando uma 
firnfao tern parametros nomeados, os elementos de array do objeto Arguments sao pseudonimos dos 
parametros que content os argumentos da funijao. Os elementos numerados do objeto Arguments 
e os nomes de parametro sao como dois nomes diferentes para a mesma variavel. Mudar o valor de 
um argumento com nome muda o valor recuperado por meio do array arguments!]. Inversamente, 
mudar o valor de um argumento por meio do array arguments [ ] muda o valor recuperado pelo nome 
do argumento. Aqui esta um exemplo que esclarece isso: 

function f(x) { 

console.log(x); // 

argumentsfo] = null; // 

console.log(x); // 

} 

Com certeza esse nao e o comportamento que se esperaria ver se o objeto Arguments fosse um array 
normal. Nesse caso, arguments [0] e x poderiam se referir inicialmente ao mesmo valor, mas uma 
alterafao em um nao teria efeito no outro. 

Esse comportamento especial do objeto Arguments foi eliminado no modo restrito de ECMAScript 
5. Existem ainda outras di fere 1191 s no modo restrito. Em fungoes nao restritas, arguments e apenas 
um identificador. No modo restrito, e efetivamente uma palavra reservada. As fungoes de modo res¬ 
trito nao podem usar arguments como nome de parametro nem como nome de variavel local e nao 
podem atribuir valores a arguments. 


Exibe o valor inicial do argumento 
Mudar o elemento do array tambem muda x! 
Agora exibe "null" 


8.3.2.1 As propriedades callee e caller 

Alem de seus elementos de array, o objeto Arguments define as propriedades callee e caller. No 
modo restrito de ECMAScript 5, e garantido que essas propriedades lan^am um TypeError se voce 
tenta le-las ou grava-las. No entanto, fora do modo restrito, o padrao ECMAScript diz que a pro¬ 
priedade callee se refere a fun 910 que esta sendo executada no momento. caller e uma propriedade 
nao padronizada, mas comumente implementada, que se refere a fun^ao que chamou aquela. A 
propriedade caller da acesso a pilha de chamada e ocasionalmente a propriedade callee e util para 
permitir que fungoes nao nomeadas chamem a si mesmas recursivamente: 
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var factorial = function(x) { 
if (x <= l) return 1; 
return x * arguments.callee(x-l); 

h 


8.3.3 Usando propriedades de objeto como argumentos 

Quando uma funpio tem mais de tres parametros, torna-se dificil para o programador que a chama 
lembrar-se da ordem correta em que deve passar os argumentos. Para que o programador nao precise 
consultar a documentapio cada vez que utilizar a funijao, pode ser apropriado permitir que os ar¬ 
gumentos sejam passados como pares nome/valor em qualquer ordem. Para implementar esse estilo 
de chamada de metodo, defina sua funpio de modo a esperar um unico objeto como argumento e 
fapi os usuarios da funpio passarem um objeto que defina os pares nome/valor exigidos. O codigo 
a seguir da um exemplo e tambem demonstra que esse estilo de chamada de funpio permite que a 
fun^ao especifique padroes para os argumentos omitidos: 

// Copia os length elements do array from para o array to. 

// Comeca a copia com o elemento from_start no array from 
// e copia esse elemento em to_start no array to. 

// E dificil lembrar a ordem dos argumentos. 

function arraycopy(/* array */ from, /* indice */ from_start, 

/* array */ to, /* indice */ to_start, 

/* integer */ length) 

{ 

// o codigo fica aqui 

} 

// Esta versao e um pouco menos eficiente, mas nao e preciso 
// lembrar da ordem dos argumentos, sendo que from_start e to_start 
// tem 0 como padrao. 
function easycopy(args) { 
arraycopy(args.from, 

args.from_start || 0, // Observe o valor padrao fornecido 
args.to, 

args.to_start || 0, 
args.length); 

} 

// Aqui esta como easycopyO poderia ser chamada: 
var a = [i,2, 3,4], b = []; 
easycopy({from: a, to: b, length: 4}); 

8.3.4 Tiposde argumento 

Os parametros de metodo em JavaScript nao tem tipos declarados e nao e feita verifica^ao de tipo 
nos valores passados para uma funpio. Voce pode ajudar a autodocumenta seu codigo escolhendo 
nomes descritivos para argumentos de funpio e incluindo os tipos de argumento nos comentarios, 
como no metodo arraycopyQ que acabamos de mostrar. Para argumentos opcionais, voce pode in- 
cluir a palavra “opcional” no comentario. E quando um metodo pode aceitar qualquer niimero de 
argumentos, voce pode usar reticencias: 

function max(/* numero... */) { /* codigo aqui */ } 
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Conforme descrito na Secjao 3.8, JavaScript faz conversao de tipo de forma livre, quando necessario. 
Assim, se voce escreve uma fun^ao que espera um argumento de string e entao chama essa fun^ao 
com um valor de algum outro tipo, o valor passado e simplesmente convertido em string quando a 
funpio tenta utiliza-lo como string. Todos os tipos primitivos podem ser convertidos em strings e 
todos os objetos tern metodos toStringQ (se nao outros necessariamente uteis), de modo que nunca 

Contudo, isso nem sempre e verdade. Considere outra vez o metodo arraycopyO mostrado an- 
teriormente. Ele espera um array como primeiro argumento. Qualquer implementapio plausivel 
vai falhar se esse primeiro argumento for algo que nao seja um array (ou possivelmente um objeto 
semelhante a um array). A nao ser que voce esteja escrevendo uma fun^ao “descartavel” que vai ser 
chamada apenas uma ou duas vezes, pode ser interessante adicionar codigo para verificar os tipos dos 
argumentos. E melhor que uma funpio falhe imediata e previsivelmente quando sao passados valores 
incompativeis do que comece a executar e falhe com uma mensagem de erro que provavelmente nao 
sera clara. Aqui esta um exemplo de fun^ao que faz verificapio de tipo. Note que ela usa a funpio 
isArrayLike() da Sepio 7.11: 

// Retorna a soma dos elementos do array (ou objeto semelhante a um array) a. 

// Todos os elementos de a devem ser numeros ou null undefined sao ignorados. 

function sum(a) { 

if (isArrayLike(a)) { 
var total = 0; 

for(var i = 0; i < a.length; i++) { // Itera por todos os elementos 

var element = a[i]; 

if (element == null) continue; // Pula null e undefined 
if (isfinite(element)) total += element; 

else throw new Error("sum(): elements must be finite numbers”); 

} 

return total; 

} 

else throw new Error("sum(): argument must be array-like"); 

} 

Esse metodo sum() e bastante restrito a respeito do argumento que aceita e lan^a erros conveniente- 
mente informativos se sao passados valores incompativeis. Contudo, ele oferece alguma flexibilida- 
de, trabalhando com objetos semelhantes a um array e com arrays reais, e ignorando elementos de 
array null e undefined. 

JavaScript e uma linguagem muito flexivel e pouco tipada, e as vezes e apropriado escrever fun^oes 
flexiveis quanto ao niimero e ao tipo de argumentos que recebem. O metodo flexisum() a seguir 
adota essa estrategia (provavelmente ao extremo). Por exemplo, ele aceita qualquer niimero de ar¬ 
gumentos, mas processa recursivamente todos os argumentos que sao arrays. Desse modo, pode ser 
usado como um metodo varargs ou com um argumento de array. Alem disso, ele faz o que pode para 
converter valores nao numericos em numeros, antes de lan^ar um erro: 

function flexisum(a) { 
var total = 0; 

for(var i = 0; i < arguments.length; i++) { 
var element = arguments[i], n; 

if (element == null) continue; // Ignora argumentos null e undefined 
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if (isArray(element)) 

n = flexisum.apply(this, element); 
else if (typeof element === "function") 
n = Number(element()); 
else n = Number(element); 


// Se o argumento e um array 
// calcula sua soma recursivamente 
// Ou, se for uma fun^ao... 

// chama-a e converte. 

// Senao tenta converte-la 


if (isNaN(n))// Se nao conseguimos converter em um numero, lan^a um erro 
throw Error("flexisum(): can't convert " + element + " to number"); 
total += n; // Caso contrario, adiciona n no total 

} 

return total; 



8.4 Fun{6es como valores 

As caracteristicas mais importantes das funijoes sao que elas podem ser definidas e chamadas. Defi- 
nifao e chamada de funijao sao recursos sintaticos de JavaScript e na maioria das outras linguagens 
de programa^ao. Em JavaScript, no entanto, as furujoes nao sao apenas sintaxe, mas tambem valores, 
ou seja, podem ser atribuidas a variaveis, armazenadas nas propriedades de objetos ou nos elementos 
de arrays, passadas como argumentos para funijoes, etc. 

Para entender como as fun^oes podem ser tanto dados como uma sintaxe de JavaScript, considere a 
seguinte definifao de funijao: 

function square(x) { return x*x; } 

Essa definifao cria um novo objeto fun^ao e o atribui a variavel square. O nome de uma fun^ao e 
irrelevante; e simplesmente o nome de uma variavel que se refere ao objeto funijao. A funq:ao pode 
ser atribuida a outra variavel e ainda fimcionar da mesma maneira: 

var s = square; // Agora s se refere a mesma fun^ao que square 
square(4); // => 16 

s(4); // => 16 

As fun^oes tambem podem ser atribuidas a propriedades de objeto, em vez de a variaveis. Quando 
isso e feito, elas sao denominadas metodos: 

var o = {square: function(x) { return x*x; }}; // Um objeto literal 

var y = o.square(i6); //ye igual a 256 

As funq:6es nem mesmo exigem nomes, assim como quando sao atribuidas a elementos de array: 

var a = [function(x) { return x*x; }, 20]; // Um array literal 

a[0](a[l]); // => 400 

A sintaxe deste ultimo exemplo parece estranha, mas ainda assim e uma expressao de invoca^ao de 
funijao valida! 


3 Esse ponto pode nao parecer especialmente interessante, a menos que voce conhe?a linguagens como Java, na qual as 
fun<;6es fazem parte de um programa, mas nao podem ser manipuladas pelo programa. 
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O Exemplo 8-2 demonstra as coisas que podem ser feitas quando as funcoes sao usadas como valores. 
Esse exemplo pode ser um pouco complicado, mas os comentarios explicam o que esta acontecendo. 

Exemplo 8-2 Usando fungoes como dados 

// Definimos algumas fungoes simples aqui 
function add(x,y) { return x + y; } 
function subtract(x,y) { return x - y; } 
function multiply(x,y) { return x * y; } 
function divide(x,y) { return x / y; } 

// Aqui esta uma funcao que recebe uma das funcoes anteriores 
// como argumento e a chama em dois operandos 
function operate(operaror, operandl, operand2) { 
return operator(operandl, operand2); 

} 


// Poderiamos chamar essa fungao como segue, para calcularmos o valor (2+3) + (4*5): 
var i = operate(add, operate(add, 2, 3), operate(multiply, 4, 5)); 

// Para ajudar no exemplo, implementamos as funcoes simples novamente, 

// desta vez usando fungoes literais dentro de um objeto literal; 
var operators = { 

add: function(x,y) { return x+y; }, 

subtract: function(x,y) { return x-y; }, 

multiply: function(x,y) { return x*y; }, 

divide: function(x,y) { return x/y; }, 

pow: Math.pow // Tambem funciona para fungoes predefinidas 

}; 


// Esta fungao recebe o nome de um operador, procura esse operador 
// no objeto e, entao, o chama nos operandos fornecidos. Observe 
//a sintaxe usada para chamar a funqao operator, 
function operate2(operation, operandi, operand2) { 
if (typeof operators[operation] === "function") 

return operators[operation](operand!^ operand2); 
else throw "unknown operator"; 

} 

// Calcula o valor ("hello" + " " + "world") como segue: 

var j = operate2("add", "hello", operate2("add", ” ", "world")); 

// Usando a funcao predefinida Math.powQ: 
var k = operate2("pow", 10, 2); 

Como outro exemplo de funcoes como valores, considere o metodo Array. sort(). Esse metodo clas¬ 
sifies os elementos de um array. Como existem muitas ordens de classifica^ao possiveis (numerica, 
alfabetica, por data, crescente, decrescente, etc.), opcionalmente o metodo sort() recebe uma fun- 
fao como argumento para saber como fazer a classificafao. Essa funcao tern uma tarefa simples: para 
quaisquer dois valores passados, ela retorna um valor especificando qual elemento aparece primeiro 
em um array classificado. Esse argumento de funcao torna Array, sort() perfeitamente geral e infi- 
nitamente flexfvel; o metodo pode classificar qualquer tipo de dados em qualquer ordem concebivel. 
Exemplos aparecem na Secjao 7.8.3. 
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8.4.1 Definindo suas proprias propriedades de funcao 

Em JavaScript funqties nao sao valores primitives, mas sim um tipo de objeto especializado, ou seja, 
elas podem ter propriedades. Quando uma funcao precisa de uma variavel “estatica” cujo valor per- 
siste entre as chamadas, muitas vezes e conveniente utilizar uma propriedade da funcao, em vez de 
congestionar o espap) de nomes definindo uma variavel global. Por exemplo, suponha que se queira 
escrever uma funcao que ao ser chamada, retorne um inteiro unico. A funcao nunca deve retornar o 
mesmo valor duas vezes. Para conseguir isso, a funcao precisa monitorar os valores que ja retornou 
e essa informapio deve persistir entre as chamadas de funcao. Voce poderia armazenar essa informa- 
9 ao em uma variavel global, mas isso e desnecessario, pois a informa?ao e usada apenas pela propria 
funcao. E melhor armazena-la em uma propriedade do objeto Function. Aqui esta um exemplo que 
retorna um inteiro unico quando a funcao e chamada: 

// Inicializa a propriedade counter do objeto function. 

// As declaracoes de funcao sao iqadas, de modo que podemos 

// fazer esta atribuicao antes da declaraqao da funqao. 

uniquelnteger.counter = 0; 

// Esta funqao retorna um inteiro diferente cada vez que e chamada. 

// Ela usa uma propriedade dela mesma para lembrar o proximo valor a ser retornado. 

function uniquelnteger() { 

return uniquelnteger.counter++; // Incrementa e retorna a propriedade counter 

} 

Como outro exemplo, considere a funcao factorial!) a seguir, que usa propriedades dela mesma 
(tratando a si mesma como um array) para colocar na memoria cache os resultados calculados ante- 
riormente: 

// Calcula fatoriais e coloca os resultados na cache como propriedades da propria funqao. 

function factorial(n) { 

if (isFinite(n) && n>0 && n==Math.round(n)) { // Finito, somente ints positivos 

if (!(n in factorial)) // Se nao houver resultado na cache 

factorialfn] = n * factorial(n-i); // Calcula e o coloca na cache 
return factorialfn]; // Retorna o resultado da cache 

} 

else return NaN; // Se a entrada for invalida 

} 

factorialji] = l; II Inicializa a cache para confer esse caso basico. 


8.5 Fun{6es como espa^ode nomes 

Lembre-se, da Se^ao 3.10.1, que JavaScript tern escopo de funcao: as variaveis declaradas dentro de 
uma funcao sao visfveis por toda a funcao (inclusive dentro de fun^oes aninhadas), mas nao existem 
fora da funcao. As variaveis declaradas fora de uma funcao sao variaveis globais e sao visfveis por 
todo o seu programa JavaScript. JavaScript nao define maneira alguma de declarar variaveis que sao 
ocultas dentro de um unico bloco de codigo e, por esse motivo, as vezes e util definir uma funcao 
para agir simplesmente como espapa de nomes temporario, no qual e possfvel definir variaveis sem 
poluir o espapj de nomes global. 




174 Parte I JavaScript basica 


Suponha, por exemplo, que voce tenha um modulo de codigo JavaScript que deseja usar em varios 
programas JavaScript diferentes (ou, para JavaScript do lado do cliente, em varias paginas Web 
diferentes). Suponha que esse codigo, assim como a maioria, define variaveis para armazenar os 
resultados intermediaries de seu calculo. O problema e que, como esse modulo vai ser usado em 
muitos programas diferentes, voce nao sabe se as variaveis que ele cria vao entrar em conflito com as 
variaveis utilizadas pelos programas que o importam. A solugao, evidentemente, e colocar o codigo 
em uma fungao e entao chamar esta fungao. Desse modo, as variaveis que seriam globais se tornam 
locais a fungao: 

function mymodule() { 

// 0 codigo do modulo fica aqui. 

// Oualquer variavel usada pelo modulo e local a esta funqao 
// em vez de congestionar o espaqo de nomes global. 

} 

mymoduleQ; // Mas nao se esqueqa de chamar a funcao! 

Esse codigo define apenas uma variavel global: o nome de funijao “mymodule”. Mas, se definir 
mesmo uma linica propriedade e demasiado, voce pode definir e chamar uma funcao anonima em 
uma linica expressao: 

(function() { // funqao mymodule reescrita como uma expressao nao nomeada 

// 0 codigo do modulo fica aqui. 

}()); // finaliza a funqao literal e a chama agora. 

Essa tecnica de definir e chamar uma funcao em uma linica expressao e utilizada com frequencia 
suficiente para se tornar idiomatica. Observe o uso de parenteses no codigo anterior. O parentese 
de abertura antes de function e exigido porque, sem ele, o interpretador JavaScript tenta analisar a 
palavra-chave function como uma instrugao de declaragao de funcao. Com o parentese, o interpre¬ 
tador reconhece isso corretamente como uma expressao de definigao de funcao. E idiomatico usar 
os parenteses, mesmo quando nao sao obrigatorios, em torno de uma funcao que deve ser chamada 
imediatamente apos ser definida. 

O Exemplo 8-3 demonstra essa tecnica de espa^o de nomes. Ele define uma funcao anonima que 
retorna uma funcao extend() como a que aparece no Exemplo 6-2. O codigo da funcao anonima 
testa se esta presente um conhecido erro do Internet Explorer e, se estiver presente, retorna uma 
versao corrigida da funcao. Alem disso, o espa^o de nomes da funcao anonima serve para ocultar um 
array de nomes de propriedade. 

Exemplo 8-3 A funcao extend!), corrigida, se necessario 

// Define uma funcao extend que copia as propriedades de seu segundo 
// argumento e dos subsequentes em seu primeiro argumento. 

// Resolvemos um erro do IE aqui: em muitas versoes do IE, o laqo for/in 
// nao enumera uma propriedade enumeravel de o, se o prototipo de o tern 
// uma propriedade nao enumeravel de mesmo nome. Isso significa que propriedades 
// como toString nao sao manipuladas corretamente, a nao ser que as verifiquemos 
// explicitamente. 
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var extend = (functionQ { // Atribui o valor de retorno dessa fun^ao 

// Primeiramente, verifica a presenija do erro, antes de usar o patch. 
for(var p in {toString:null}) { 

// Se chegamos aqui, entao o laco for/in funciona corretamente e retornamos 
// uma versao simples da fun^ao extendQ 
return function extend(o) { 

for(var i = 1; i < arguments.length; i++) { 
var source = arguments[i]; 
for(var prop in source) o[prop] = source[prop]; 

} 

}; 

} 

// Se chegamos ate aqui, isso significa que o la<;o for/in nao enumerou 
// a propriedade toString do objeto de teste. Portanto, retorna uma versao 
// da fun^ao extendQ que testa explicitamente as propriedades 
// nao enumeraveis de Object.prototype. 

// E agora verifica as propriedades de caso especial 
for(var j = 0; j < protoprops.length; j++) { 
prop = protoprops[j]; 

if (source.hasOwnProperty(prop)) o[prop] = source[prop]; 
return function patched_extend(o) { 

for(var i = l; i < arguments.length; i++) { 
var source = arguments[i]; 

// Copia todas as propriedades enumeraveis 
for(var prop in source) o[prop] = source[prop]; 

} 

} 


// Esta e a lista de propriedades do caso especial que verificamos 

var protoprops = ["toString", "valueOf", "constructor", "hasOwnProperty", 

"isPrototypeOf", "propertylsEnumerable","toLocaleString"]; 


}()); 



8.6 Closures 

Assim como a maioria das linguagens de programa?ao modernas, JavaScript utiliza escopo lexico. Isso 
significa que as fun (joes sao executadas usando o escopo de variavel que estava em vigor ao serem 
definidas e nao o escopo de variavel que estava em vigor ao serem chamadas. Para implementar esco¬ 
po lexico, o estado interno de um objeto funijao em JavaScript deve incluir nao apenas o codigo da 
firnfao, mas tambem uma referenda ao encadeamento de escopo corrente. (Antes de ler o restante 
desta seijao, talvez voce queira rever o material sobre escopo de variavel e sobre o encadeamento de 
escopo na Seijao 3.10 e na Seijao 3.10.3.) Essa combinaijao de objeto funijao e um escopo (um con- 
junto de vinculos de variavel) no qual as variaveis da fun<jao sao solucionadas, e chamado de closure 
na literatura da ciencia da computa?ao . 


4 Esse e um termo antigo que se refere ao fato de que as variaveis da furnjao tem vinculos no encadeamento de escopo e que, 
portanto, a funfao e “fechada em relacjao” as suas variaveis. 
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Tecnicamente, em JavaScript todas funqoes sao closures: elas sao objetos e tern um encadea- 
mento de escopo associado. A maioria das funqoes e chamada usando o mesmo encadeamento 
de escopo que estava em vigor quando a funqao foi definida e nao importa que exista uma closu¬ 
re envolvida. As closures se tornam interessantes quando sao chamadas em um encadeamento de 
escopo diferente do que estava em vigor quando foram definidas. Isso acontece mais comumente 
quando um objeto funqao aninhada e retornado da funqao dentro da qual foi definido. Existem 
varias tecnicas de programaqao poderosas que envolvem esse tipo de closures de funqao aninhada 
e seu uso se tornou relativamente comum na programaqao JavaScript. As closures podem parecer 
confusas quando voce as encontra pela primeira vez, mas e importante entende-las bem para 
utiliza-las com seguranqa. 

O primeiro passo para entender as closures e examinar as regras do escopo lexico para funqoes 
aninhadas. Considere o codigo a seguir (que e semelhante ao codigo ja visto na Seqao 3.10): 

var scope = "global scope"; // Uma variavel global 

function checkscopeQ { 

var scope = "local scope"; // Uma variavel local 

function f() { return scope; } // Retorna o valor de scope aqui 

return f(); 

} 

checkscopeQ // => "local scope" 

A funqao checkscopeQ declara uma variavel local e entao define e chama uma fun^ao que retorna o 
valor dessa variavel. Deve estar claro para voce o motivo da chamada de checkscopeQ retornar “local 
scope”. Agora, vamos alterar o codigo apenas ligeiramente. Voce consegue dizer o que esse codigo 
vai retornar? 

var scope = "global scope"; // Uma variavel global 

function checkscopeQ { 

var scope = "local scope"; // Uma variavel local 

function f() { return scope; } // Retorna o valor de scope aqui 

1 

checkscopeQQ // 0 que isso retorna? 

Nesse codigo, um par de parenteses foi movido de dentro de checkscopeQ para fora. Em vez de cha- 
mar a funqao aninhada e retornar seu resultado, checkscopeQ agora retorna apenas o proprio objeto 
funqao aninhada. O que acontece quando chamamos essa funijao aninhada (com o segundo par de 
parenteses na ultima linha de codigo) fora da funqao em que ela foi definida? 

Lembre-se da regra fundamental do escopo lexico: em JavaScript as funqoes sao executadas usan¬ 
do o encadeamento de escopo que estava em vigor quando foram definidas. A funqao aninhada 
f () foi definida em um encadeamento de escopo no qual o escopo da variavel estava vinculado ao 
valor “local scope”. Esse vinculo ainda esta em vigor quando f e executado, de onde quer que seja 
executado. Assim, a ultima linha do codigo anterior retorna “local scope” e nao “global scope”. Essa, 
em poucas palavras, e a natureza surpreendente e poderosa das closures: elas capturam os vinculos de 
variavel local (e o parametro) da funqao externa dentro da qual sao definidas. 
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Implementando closures 

As closures sao faceis de entender quando simplesmente se aceita a regra de escopo lexico: as fungoes 
sao executadas usando o encadeamento de escopo que estava em vigor quando foram definidas. Contu- 
do, alguns programadores acham as closures confusas, pois se prendem aos detalhes da implementagao. 
Certamente, pensam eles, as variaveis locais definidas na fungao externa deixam de existir quando a fun¬ 
gao externa retorna; entao, como a fungao aninhada pode ser executada usando um encadeamento de 
escopo que nao existe mais? Se voce estiver se perguntando sobre isso, entao provavelmente foi exposto 
a linguagens de programagao de baixo nivel, como C, e as arquiteturas de CPU baseadas em pilhas: se as 
variaveis locais de uma fungao sao definidas em uma pilha na CPU, entao elas realmente deixariam de 
existir quando a fungao retornasse. 

Mas lembre-se de nossa definigao de encadeamento de escopo da Segao 3.10.3. Ele foi descrito como 
uma lista de objetos e nao como uma pilha de vinculos. Em JavaScript sempre que uma fungao e chama- 
da, e criado um novo objeto para conter as variaveis locais para essa chamada e esse objeto e adicionado 
ao encadeamento de escopo. Quando a fungao retorna, esse objeto vinculo de variavel e removido do 
encadeamento de escopo. Se nao existem fungoes aninhadas, nao ha mais references ao objeto vinculo 
e ele e removido pela coleta de lixo. Se existem fungoes aninhadas definidas, entao cada uma dessas 
fungoes tern uma referenda para o encadeamento de escopo e esse encadeamento de escopo se refere 
ao objeto vinculo de variavel. No entanto, se esses objetos fungoes aninhadas permaneceram dentro de 
suas fungoes externas, entao eles proprios sao removidos pela coleta de lixo, junto com o objeto vinculo 
de variavel a que se referiam. Mas se a fungao define uma fungao aninhada e a retorna ou a armazena 
em uma propriedade em algum lugar, entao vai haver uma referenda externa a fungao aninhada. Ela 
nao e removida pela coleta de lixo e o objeto vinculo de variavel a que se refere tambem nao e removido 
pela coleta de lixo. 


Na Segao 8.4.1, definimos uma fungao uniquelntegerQ que usava uma propriedade da propria fun¬ 
gao para monitorar o proximo valor a ser retornado. Uma desvantagem dessa estrategia e que um 
codigo defeituoso ou mal-intencionado poderia zerar o contador ou configura-lo com um valor nao 
inteiro, fazendo a fungao uniquelntegerQ violar a parte “unico” ou a parte “inteiro” de seu contrato. 
As closures capturam as variaveis locais de uma unica chamada de fungao e podem usar essas varia¬ 
veis como estado privado. Aqui esta como poderfamos reescrever a fungao uniquelntegerQ usando 
closures: 

var uniquelnteger = (functionQ { // Define e chama 

var counter = 0; // Estado privado da funcao abaixo 

return functionQ { return counter++; }; 

}()); 

Para entender esse codigo e preciso le-lo atentamente. A primeira vista, a primeira linha de codigo 
parece estar atribuindo uma fungao a variavel uniquelnteger. Na verdade, o codigo esta definindo e 
chamando (conforme sugerido pelo parentese de abertura na primeira linha) uma fungao; portanto, 
o valor de retorno da fungao e que esta sendo atribuido a uniquelnteger. Agora, se estudarmos o 
corpo da fungao, vemos que seu valor de retorno e outra fungao. E esse objeto fungao aninhada que 
e atribuido a uniquelnteger. A fungao aninhada tern acesso as variaveis que estao no escopo e pode 
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usar a variavel counter definida na fun^ao externa. Quando essa funpio externa retorna, nenhum 
outro codigo pode ver a variavel counter: a funplo interna tem acesso exclusivo a ela. 

Variaveis privadas como counter nao precisam ser exclusivas de uma unica closure: e perfeitamente 
possivel duas ou mais funples aninhadas serem definidas dentro da mesma funpio externa e compar- 
tilharem o mesmo encadeamento de escopo. Considere o codigo a seguir: 

function counter!) { 
var n = 0; 
return { 

count: function() { return n++; }, 
reset: function!) { n = 0; } 

}; 

} 


var c = counter!), d = counter!); 

c. count!) 

d. count!) 
c.reset!) 

c. count!) 

d. count!) 


// Cria duas contadoras 
// => 0 

// => 0: elas contam independentemente 
// os metodos reset!) e count!) compartilham estado 
// => 0: pois zeramos c 
// => 1: d nao foi zerada 


A funpio counter!) retorna um objeto “contador”. Esse objeto tem dois metodos: count!) retorna o 
proximo inteiro e reset() zera o estado interno. A primeira coisa a entender e que os dois metodos 
compartilham o acesso a variavel privada n. A segunda e entender que cada chamada de counter!) cria 
um novo encadeamento de escopo e uma nova variavel privada. Portanto, se voce chama counter!) 
duas vezes, obtem dois objetos contadores com diferentes variaveis privadas. Chamar count!) ou 
reset!) em um objeto contador nao tem efeito algum no outro. 

Vale notar aqui que e possivel combinar essa tecnica de closure com propriedades getters e setters. A 
versao da funpio counter! ) a seguir e uma varia?ao do codigo que apareceu na Sepio 6.6, mas utiliza 
closures para estado privado, em vez de contar com uma propriedade de objeto normal: 

function counter(n) { // 0 argumento da funqao n e a variavel privada 

// 0 metodo getter da propriedade retorna e incrementa a variavel privada counter, 
get count() { return n++; }, 

// 0 metodo setter da propriedade nao permite que o valor de n diminua 
set count(m) { 
if (m >= n) n = m; 

else throw Error(''count can only be set to a larger value"); 

} 

}; 

} 


var c = counter(iOOO); 

c.count // => 1000 

c.count // => 1001 

c.count = 2000 

c.count // => 2000 

c.count = 2000 // => Erro! 
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Note que essa versao da funcao counter() nao declara uma variavel local, mas apenas utiliza seu pa- 
rametro n para conter o estado privado compartilhado pelos metodos de acesso a propriedade. Isso 
permite que o chamador de counter () especifique o valor inicial da variavel privada. 

O Exemplo 8-4 e uma generaliza^ao do estado privado compartilhado, por meio da tecnica de closu¬ 
res que demonstramos aqui. Esse exemplo define uma funcao addPrivateProperty () que define uma 
variavel privada e duas funqdes aninhadas para configurar e obter o valor dessa variavel. Ela adiciona 
essas fun^oes aninhadas como metodos do objeto especificado: 



Exemplo 8-4 Metodos de acesso da propriedade privada usando closures 

// Esta funqao adiciona metodos de acesso para uma propriedade com 
// o nome especificado no objeto o. Os metodos sao denominados get<name> 

// e set<name>. Se e fornecida uma funqao predicado, o metodo setter 
// a utiliza para testar a validade de seu argumento antes de armazena-lo. 

// Se o predicado retorna false, o metodo setter lanca uma excecao. 

// 

// 0 incomum nessa funqao e que o valor de propriedade 

// manipulado pelos metodos getter e setter nao e armazenado no 

// objeto o. Em vez disso, o valor e armazenado apenas em uma variavel local 

// nessa funcao. Os metodos getter e setter tambem sao definidos 

// localmente nessa funcao e, portanto, tern acesso a essa variavel local. 

// Isso significa que o valor e privado para os dois metodos de acesso e 
// nao pode ser configurado nem modificado, a nao ser por meio do metodo setter, 
function addPrivateProperty(o, name, predicate) { 
var value; // Essa e a propriedade value 

// 0 metodo getter simplesmente retorna o valor. 
o["get" + name] = functionQ { return value; }; 

// 0 metodo setter armazena o valor ou lanca uma exceqao se 
// o predicado rejeita o valor. 
o["set" + name] = function(v) { 
if (predicate && ipredicate(v)) 

throw Error(''set" + name + invalid value " + v); 

else 

}; 


// 0 codigo a seguir demonstra o metodo addPrivateProperty(). 
var o = {}; // Aqui esta urn objeto vazio 

// Adiciona metodos de acesso a propriedade getName e setNameQ 
// Carante que somente valores de string sejam permitidos 
addPrivateProperty(o, "Name", function(x) { return typeof x == "string"; }); 

o.setName("Frank"); // Configura a propriedade value 

console.log(o.getName()); // Obtem a propriedade value 

o.setName(O); // Tenta configurar urn valor de tipo errado 

Vimos varios exemplos nos quais duas closures sao definidas no mesmo encadeamento de escopo e 
compartilham o acesso a mesma variavel (ou variaveis) privada. Essa e uma tecnica importante, mas 
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tambem e importante reconhecer quando as closures compartilham inadvertidamente o acesso a 
uma variavel que nao deveriam compartilhar. Considere o codigo a seguir: 

// Esta funqao retorna uma funqao que sempre retorna v 
function constfunc(v) { return functionQ { return v; }; } 

// Cria urn array de funqoes constantes: 
var funcs = |jj 

for(var i = 0; i < 10; i++) funcsfi] = constfunc(i); 

//A funcao no elemento 5 do array retorna o valor 5. 
funcs[5]() // => 5 

Ao se trabalhar com codigo como esse, que cria varias closures usando um lafo, e um erro co¬ 
mum tentar colocar o lafo dentro da funcao que define as closures. Pense no codigo a seguir, 
por exemplo: 

// Retorna um array de funqoes que retornam os valores 0-9 
function constfuncsQ { 
var funcs = []; 
for(var i = 0; i < 10; i++) 

funcsfi] = functionQ { return i; }; 
return funcs; 

} 


var funcs = constfuncsQ; 
funcs[5]() // 0 que isso retorna? 

O codigo anterior cria 10 closures e as armazena em um array. Todas as closures sao definidas 
dentro da mesma chamada da funcao; portanto, elas compartilham o acesso a variavel i. Quando 
constfuncsQ retorna, o valor da variavel i e 10 e todas as 10 closures compartilham esse valor. Por¬ 
tanto, todas as funfoes no array de fun foes retornado retornam o mesmo valor, e isso nao e o que 
queriamos. E importante lembrar que o encadeamento de escopo associado a uma closure e “vivo”. 
As funfocs aninhadas nao fazem copias privadas do escopo nem instantaneos estaticos dos vinculos 
de variavel. 

Outra coisa a lembrar ao se escrever closures e que this e uma palavra-chave de JavaScript, nao uma 
variavel. Conforme discutido, toda chamada de funfao tern um valor this e uma closure nao pode 
acessar o valor de this de sua funfao externa, a nao ser que a funfao externa tenha salvo esse valor 
em uma variavel: 

var self = this; // Salva o valor de this em uma variavel para uso de funqoes aninhadas. 

O vinculo de arguments e semelhante. Essa nao e uma palavra-chave da linguagem, mas e declarada 
automaticamente para toda chamada de funfao. Como uma closure tern seu proprio vinculo para 
arguments, nao pode acessar o array de argumentos da funfao externa, a nao ser que a funfao externa 
tenha salvo esse array em uma variavel com um nome diferente: 

var outerArguments = arguments; // Salva para uso de funqoes aninhadas 

O Exemplo 8-5, posteriormente neste capitulo, define uma closure que utiliza essas tecnicas para se 
referir aos valores de this e de arguments da funfao externa. 
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8.7 Propriedades de fun^ao, metodos e construtora 

Vimos que nos programas JavaScript as funfoes sao valores. O operador typeof retorna a string 
“function” quando aplicado a uma funpio, mas na verdade as fun^oes sao um tipo especializado de 
objeto em JavaScript. Como as funples sao objetos, podem ter propriedades e metodos, exatamente 
como qualquer outro objeto. Existe ate uma construtora Functionf ) para criar novos objetos funpio. 
As subsefoes a seguir documentam propriedades e metodos de funpio e a construtora Function(). 
Voce tambem pode ler sobre isso na sepio de referenda. 

8.7.1 A propriedade length 

Dentro do corpo de uma fun^ao, arguments.length especifica o numero de argumentos que foram 
passados para a funpio. Contudo, a propriedade length de uma funpio em si tern um significado di- 
ferente. Essa propriedade somente de leitura retorna a aridade da funpio - o numero de parametros 
que ela declara em sua lista de parametros, que normalmente e o numero de argumentos esperados 
pela funqiao. 

O codigo a seguir define uma funpio chamada check( ) que recebe o array arguments de outra funpio. 
Ela compara arguments.length (o numero de argumentos realmente passados) com arguments.cal- 
lee. length (o numero esperado) para determinar se a funpio recebeu o numero correto de argumen¬ 
tos. Se nao recebeu, ela lanpi uma exceqiao. A funpio checkf) e seguida por uma funpio de teste f () 
que demonstra como check() pode ser usada: 

// Esta funqao usa arguments.callee, de argumentos que nao funcionaria no modo restrito. 
function check(args) { 

var actual = args.length; // 0 numero real de argumentos 

var expected = args.callee.length; // 0 numero de argumentos esperados 
if (actual !== expected) // Lanca uma excecao se eles diferem. 

throw Error(''Expected " + expected + "args; got " + actual); 

} 

function f(x, y, z) { 

check(arguments); // Verifica se o ns real de argumentos corresponde ao ns esperado. 
return x + y + z; // Agora faz o restante da funcao normalmente. 

} 

8.7.2 A propriedade prototype 

Toda funcao tern uma propriedade prototype que se refere a um objeto conhecido como objetopro- 
tdtipo. Cada funpio tern um objeto prototipo diferente. Quando uma funpio e usada como constru¬ 
tora, o objeto recem-criado herda propriedades do objeto prototipo. Os prototipos e a propriedade 
prototype foram discutidos na Sepio 6.1.3 e serao abordados novamente no Capftulo 9. 

8.7.3 Os metodos call() e applyO 

callQ e apply() permitem chamar (Sepio 8.2.4) uma funcao indiretamente como se fosse um me- 
todo de algum outro objeto. (Usamos o metodo callQ no Exemplo 6-4, por exemplo, para chamar 
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Ob j ect.prototype.toString em um objeto cuja classe queriamos determinar.) O primeiro argumento 
de call() e de applyQ e o objeto em que a funpio vai ser chamada; esse argumento e o contexto da 
chamada e se torna o valor da palavra-chave this dentro do corpo da funpio. Para chamar a funpio 
f() como um metodo do objeto o (nao passando argumento algum), voce poderia usar call() ou 

apply ()* 

f.call(o); 

f.apply(o); 

As duas linhas de codigo anteriores sao semelhantes ao seguinte (que presume que o ainda nao tern 
uma propriedade chamada m): 

o.m = f; // Torna f um metodo temporario de o. 
o.m(); // Chama-o, sem passar argumentos. 

delete o.m; // Remove o metodo temporario. 

No modo restrito de ECMAScript 5, o primeiro argumento de call() ou apply() se torna o valor de 
this, mesmo que seja um valor primitivo ou null ou undefined. Em ECMAScript 3 e no modo nao 
restrito, um valor null ou undefined e substituido pelo objeto global e um valor primitivo e substi- 
tufdo pelo objeto empacotador correspondente. 

Qualquer argumento para call(), apos o primeiro argumento de contexto da chamada, e o valor 
passado para a funfao chamada. Por exemplo, para passar do is numeros para a fun^ao f () e chama-la 
como se fosse um metodo do objeto o, voce poderia usar o codigo a seguir: 
f.call(o, l, 2); 

O metodo apply( ) e como o metodo callQ, exceto que os argumentos a serem passados para a fun¬ 
pio sao especificados como um array: 
f-apply(o, [ 1 , 2 ]); 

Se uma fiunjao e definida para aceitar um numero de argumentos arbitrario, o metodo apply () per- 
mite chamar essa funpio no conteudo de um array de comprimento arbitrario. Por exemplo, para 
encontrar o maior numero em um array de numeros, voce poderia usar o metodo applyQ para passar 
os elementos do array para a funpio Math.maxQ: 

var biggest = Math.max.apply(Math, array_of_numbers); 

Note que applyQ fimciona com objetos semelhantes a um array e com arrays verdadeiros. Em espe¬ 
cial, voce pode chamar uma funfao com os mesmos argumentos da funpio atual, passando o array 
arguments diretamente para applyQ. O codigo a seguir demonstra isso: 

// Substitui o metodo chamado m do objeto o por uma versao que registra 
// mensagens antes e depois de chamar o metodo original, 
function trace(o, m) { 

var original = o[m]; // Lembra do metodo original na closure. 

o[m] = functionQ { // Agora define o novo metodo. 

console.log(new DateQ, "Entering:", m); // Registra a mensagem. 

var result = original.apply(this, arguments); // Chama original, 
console.log(new DateQ, "Exiting:", m); // Registra a mensagem. 

return result; // Retorna result. 

}; 

} 
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Essa funcao trace() recebe um objeto e um nome de metodo. Ela substitui o metodo especificado 
por um novo metodo que “empacota” uma funcionalidade adicional em torno do metodo original. 
Esse tipo de altera^ao dinamica de metodos ja existentes as vezes e chamado de “monkey-patching”*. 


8.7.4 0 metodo bind() 

O metodo bindQ foi adicionado em ECMAScript 5, mas e facil simula-lo em ECMAScript 3. Con- 
forme o nome lembra, o principal objetivo de bind() e vincular uma funpio a um objeto. Quando 
o metodo bind () e chamado em uma funcao f e um objeto o e passado, o metodo retorna uma nova 
fun 9 k). Chamar a nova funfao (como funpio) chama a funpio original f como metodo de 0 . Os 
argumentos passados para a nova funpio sao passados para a funpio original. Por exemplo: 

function f(y) { return this.x + y; } // Esta funcao precisa ser vinculada 
var 0 = { x : 1 }; // Um objeto no qual vincularemos 

var g = f.bind(o); // Chamar g(x) chama o.f(x) 

g( 2 ) II => 3 

E facil fazer esse tipo de vinculo com um codigo como o seguinte: 

// Retorna uma funcao que chama f como metodo de 0 , passando todos os seus argumentos. 
function bind(f, 0 ) { 

if (f.bind) return f.bind(o); // Usa 0 metodo bind, se houver um 

else return functionQ { // Caso contrario, vincula-o como segue 

return f.apply(o, arguments); 

h 

} 

O metodo bind() de ECMAScript 5 faz mais do que apenas vincular uma funcao a um objeto. Ele 
tambem faz aplicapio parcial: os argumentos passados para bind () apos o primeiro sao vinculados 
junto com o valor de this. A aplicapio parcial e uma tecnica comum na programapio funcional e 
as vezes e chamada de currying. Aqui estao alguns exemplos do metodo bind () usado para aplica^ao 
parcial: 

var sum = function(x,y) { return x + y }; // Retorna a soma de 2 args 

// Cria uma nova funcao como sum, mas com 0 valor de this vinculado a null 
lit 0 l 2 argumento vinculado a 1 . Essa nova funcao espera apenas um arg. 
var succ = sum.bind(null, l); 

succ(2) II => 3 : x esta vinculado ale passamos 2 para 0 argumento y 

function f(y,z) { return this.x + y + z }; // Outra funcao que soma 

var g = f.bind({x:l}, 2); // Vincula this e y 

g( 3 ) // => 6: this.x esta vinculado a 1 , y esta vinculado a 2 e z e 3 

Podemos vincular o valor de this e fazer aplica?ao parcial em ECMAScript 3. O metodo bind () 
padrao pode ser simulado com codigo como o que aparece no Exemplo 8-5. Note que salvamos esse 
metodo como Function. prototype. bind para que todos os objetos funcao o herdem. Essa tecnica esta 
explicada em detalhes na Seqao 9.4. 


* N. de R.T.: Em ciencia da computa^ao, “monkey-patching” e o processo pelo qual o codigo em linguagens dinamicas e 
estendido ou modificado durante sua execufao sem que seja alterado seu codigo-fonte. Tambem conhecido como “duck- 
-patching”. 
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Exemplo 8-5 Um metodo Function.bindQ para ECMAScript 3 

if (iFunction.prototype.bind) { 

Function.prototype.bind = function(o /*, args */) { 

// Salva os valores de this e arguments em variaveis para que possamos 
// usa-los na fun<;ao aninhada a seguir. 
var self = this, boundArgs = arguments; 

// 0 valor de retorno do metodo bind() e uma fun^ao 
return functionQ { 

// Constroi uma lista de argumentos, come^ando com qualquer arg passado 
// para bind apos o primeiro, e segundo depois desse todos os args 
// passados para essa fun<;ao. 
var args = [], i; 

for(i = 1 ; i < boundArgs.length; i++) args.push(boundArgs[i]); 
for(i = 0; i < arguments.length; i++) args.push(arguments[i]); 

// Agora chama self como metodo de o, com esses argumentos 
return self.apply(o, args); 

It 

h 

} 

Observe que a fun^ao retornada por esse metodo bind() e uma closure que utiliza as variaveis self e 
boundArgs declaradas na funqao externa, mesmo que essa fumpao interna tenha retornado da fun<;ao 
externa e seja chamada depois que a fun^ao externa tenha retornado. 

O metodo bind() definido em ECMAScript 5 tern algumas caracteristicas que nao podem ser simu- 
ladas com o codigo ECMAScript 3 mostrado antes. Primeiramente, o metodo bind() real retorna 
um objeto fun910 com sua propriedade length corretamente configurada com a aridade da fun910 
vinculada, menos o niimero de argumentos vinculados (mas nao menos do que zero). Segundo, o 
metodo bind() de ECMAScript 5 pode ser usado para a aplica^ao parcial de fun^oes construtoras. 
Se a funfao retornada por bind() e usada como construtora, o valor de this passado para bind() e 
ignorado e a fun910 original e chamada como construtora, com alguns argumentos ja vinculados. As 
fun^oes retornadas pelo metodo bind() nao tern uma propriedade prototype (a propriedade proto¬ 
type de fun^oes normais nao pode ser excluida) e os objetos criados quando essas fun^oes vinculadas 
sao usadas como construtoras herdam da propriedade prototype da construtora nao vinculada origi¬ 
nal. Alem disso, uma construtora vinculada funciona exatamente como a construtora nao vinculada 
para os propositos do operador instanceof. 


8.7.5 0 metodo toStringO 

Em JavaScript assim como todos os objetos, as funqdes tern um metodo toStringO. A especifica^ao 
ECMAScript exige que esse metodo retorne uma string que siga a sintaxe da instru?ao de declara- 
9ao de fun^ao. Na pratica, a maioria (mas nao todas) das implementa^oes desse metodo toStringO 
retorna o codigo-fonte completo da funfao. As fun^oes internas normalmente retornam uma string 
que inclui algo como “[codigo nativo]” como corpo da funijao. 
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8.7.6 A construtora Function!) 

As funijoes normalmente sao definidas com a palavra-chave function, ou na forma de uma instrupio 
de definiijao de funpio ou de uma expressao de funpio literal. Mas as funijoes tambem podem ser 
definidas com a construtora Function(). Por exemplo: 

var f = new Function("x", "y", "return x*y;"); 



Essa linha de codigo cria uma nova fun<jao, mais ou menos equivalente a uma funpio definida com 
a sintaxe familiar: 


var f = function(x, y) { return x*y; } 

A construtora FunctionQ espera qualquer numero de argumentos de string. O ultimo argumento e 
o texto do corpo da funpio; ele pode corner instru^oes arbitrarias em JavaScript, separadas umas das 
outras por pontos e virgulas. Todos os outros argumentos da construtora sao strings que especificam 
os nomes de parametros da funpio. Se estiver definindo uma fun^ao que nao recebe argumentos, 
basta passar uma unica string - o corpo da funpio - para a construtora. 

Observe que a construtora FunctionQ nao recebe argumento algum especificando um nome para 
a fun^ao que cria. Assim como as fun^oes literals, a construtora FunctionQ cria funpies anonimas. 

Existem alguns pontos importantes para entender a respeito da construtora FunctionQ: 

• Ela permite que funfoes JavaScript sejam criadas dinamicamente e compiladas em tempo de 
execupio. 

• Ela analisa o corpo da funpio e cria um novo objeto funpio cada vez que e chamada. Se a 
chamada da construtora aparece dentro de um latjo ou de uma funpio chamada frequente- 
mente, esse processo pode ser ineficiente. Em contraste, as fun^oes aninhadas e as expressoes 
de definipio de funijao que aparecem dentro de la^os nao sao recompiladas cada vez que sao 
encontradas. 

• Um ultimo ponto muito importante sobre a construtora FunctionQ e que as fun (joes que ela 
cria nao usam escopo lexico; em vez disso, sao sempre compiladas como se fossem funijoes de 
nivel superior, como o codigo a seguir demonstra: 

var scope = "global"; 
function constructFunctionQ { 
var scope = "local"; 

return new Function("return scope"); // Nao captura o escopo local! 

} 

// Esta linha retorna "global", pois a fun^ao retornada pela 
// construtora FunctionQ nao usa o escopo local. 
constructFunctionQQ; // => "global" 

E melhor pensar na construtora FunctionQ como uma versao de evalQ com escopo global (consulte 
a Sepio 4.12.2) que define novas variaveis e fun pies em seu proprio escopo privado. Raramente deve 
ser necessario usar essa construtora em seu codigo. 
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8.7.7 Objetosquepodemserchamados 

Aprendemos na Seqao 7.11 que existem objetos “semelhantes a arrays” que nao sao arrays reais, mas 
podem ser tratados como arrays para a maioria dos propositos. Existe uma situatjao semelhante para 
funqdes. Urn objeto quepode ser chamado e qualquer objeto que possa ser chamado em uma expres- 
sao de invoca?ao de funtjao. Todas as furujoes podem ser chamadas, mas nem todos os objetos que 
podem ser chamados sao fun (joes. 

Os objetos que podem ser chamados e que nao sao fun<joes sao encontrados em duas situaijoes nas 
implementa<j6es atuais de JavaScript . Primeiramente, o navegador Web IE (versao 8 e anteriores) 
implementa metodos do lado do cliente, como Window.alert() e Document.getElementsByldQ, usan- 
do objetos hospedeiros que podem ser chamados, em vez de objetos Function nativos. Esses meto¬ 
dos funcionam da mesma maneira no IE e em outros navegadores, mas nao sao realmente objetos 
Function. O IE9 passou a usar fun<joes verdadeiras, de modo que esse tipo de objeto que pode ser 
chamado vai se tornar gradualmente menos comum. 

A outra forma comum de objetos que podem ser chamados sao os objetos RegExp - em muitos 
navegadores, pode-se chamar um objeto RegExp diretamente como um atalho para chamar seu 
metodo exec(). Esse e um recurso completamente nao padronizado de JavaScript que foi introdu- 
zido pela Netscape e copiado por outros fornecedores por questao de compatibilidade. Nao escreva 
codigo que conte com a possibilidade de chamar objetos RegExp: esse recurso provavelmente vai ser 
desaprovado e removido no futuro. O operador typeof nao e capaz de fiincionar em conjunto com 
objetos RegExp que podem ser chamados. Em alguns navegadores, ele retorna “funtjao” e em outros, 
retorna “objeto”. 

Se quiser determinar se um objeto e um verdadeiro objeto funijao (e tem metodos de funijao), pode 
testar seu atributo classe (Seijao 6.8.2) usando a tecnica mostrada no Exemplo 6-4: 

function isFunction(x) { 

return Object.prototype.toString.call(x) === "[object Function]"; 

} 

Note que essa fun<jao isFunctionQ e muito parecida com a fun<jao isArrayQ mostrada na Seijao 
7.10. 

8.8 Programa^ao funcional 

JavaScript nao e uma linguagem de programatjao funcional como Lisp ou Haskell, mas o fato de ela 
poder manipular funijoes como objetos significa que podemos usar tecnicas de programa?ao fun¬ 
cional em JavaScript. Os metodos de array de ECMAScript 5, como map() e reduceQ, sao especial- 
mente adequados para um estilo de programa<jao funcional. As seijoes a seguir demonstram tecnicas 
de programa?ao funcional em JavaScript. Elas se destinam a ser uma explora?ao para aumentar a 
conscientizaijao sobre o poder das fun<joes de JavaScript e nao como uma prescrifao do bom estilo 
de programa?ao 5 . 


Se isso aguc;a sua curiosidade, talvez voce esteja interessado em usar (ou pelo menos ler a respeito) a biblioteca Functional 
JavaScript de Oliver Steele. Consulte o enderefo http://osteele.com/sources/javascript/junctional/. 
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8.8.1 Processando arrays com fun^oes 

Suponha que temos um array de numeros e queremos calcular a media e o desvio padrao desses 
valores. Poderfamos fazer isso no estilo nao funcional, como segue: 

var data = [l,1,3,5,5]; // Este e nosso array de numeros 

// A media e a soma dos elementos dividida pelo numero de elementos 
var total = 0; 

for(var i = 0; i < data.length; i++) total += data[i]; 

var mean = total/data.length; // A media de nossos dados e 3 

// Para calcularmos o desvio padrao, primeiramente somamos os quadrados do 
// desvio de cada elemento em relacao a media, 
total = 0; 

for(var i = 0; i < data.length; i++) { 
var deviation = data[i] - mean; 
total += deviation * deviation; 

} 

var stddev = Math.sqrt(total/(data.length-l)); // 0 desvio padrao e 2 

Podemos efetuar esses mesmos calculos no estilo funcional conciso, usando os metodos de array 
map() e reduceQ, como segue (consulte a Se^ao 7.9 para rever esses metodos): 

// Primeiramente, define duas funcoes simples 
var sum = function(x,y) { return x+y; }; 
var square = function(x) { return x*x; }; 

// Entao, usa essas funcoes com os metodos Array para calcular a media e o desvio padrao 

var data = [l,1,3,5,5]; 

var mean = data.reduce(sum)/data.length; 

var deviations = data.map(function(x) {return x-mean;}); 

var stddev = Math.sqrt(deviations.map(square).reduce(sum)/(data.length-l)); 

E se estivessemos usando ECMAScript 3 e nao tivessemos acesso a esses metodos de array mais re- 
centes? Podemos definir nossas proprias funcoes map() e reduceQ que utilizam os metodos internos, 
caso eles existam: 

// Chama a funqao f para cada elemento do array a e retorna 

// um array dos resultados. Usa Array.prototype.map se estiver definido. 

var map = Array.prototype.map 

? function(a, f) { return a.map(f); } // Use o metodo map se existir 

: function(a,f) { // Caso contrario, implementa o nosso 

//proprio 

var results = []; 

for(var i = 0, len = a.length; i < len; i++) { 

if (i in a) resultsfi] = f.call(null, a[i], i, a); 

} 

return results; 

}; 

// Reduz o array a a um unico valor usando a funcao f e 

// o valor inicial opcional. Usa Array.prototype.reduce se estiver definido. 

var reduce = Array.prototype.reduce 

? function(a, f, initial) { // Se o metodo reduceQ existe. 
if (arguments.length > 2) 

return a.reduceQ, initial); // Se foi passado um valor inicial. 
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else return a.reduce(f); // Caso contrario, nenhum valor inicial. 

} 

: function(a, f, initial) { // Algoritmo da especificaqao ES5 

var i = 0, len = a.length, accumulator; 

// Comeca com o valor inicial especificado ou com o primeiro valor em a 
if (arguments.length > 2) accumulator = initial; 
else { // Encontra o primeiro indice definido no array 

if (len == 0) throw TypeErrorQ; 
while(i < len) { 
if (i in a) { 

accumulator = a[i++]; 

} 

else i++; 

} 

if (i == len) throw TypeError(); 

} 


// Agora chama f para cada elemento restante no array 
while(i < len) { 
if (i in a) 

accumulator = f.call(undefined, accumulator, a[i], i, a); 

i++; 

} 

return accumulator; 

}; 

Com essas fun^oes map() e reduceQ definidas, nosso codigo para calcular a media e o desvio padrao 
agora e como segue: 

var data = [1,1,3,5,5]; 

var sum = function(x,y) { return x+y; }; 

var square = function(x) { return x*x; }; 

var mean = reduce(data, sum)/data.length; 

var deviations = map(data, function(x) {return x-mean;}); 

var stddev = Math.sqrt(reduce(map(deviations, square), sum)/(data.length-l)); 


8.8.2 Fun^oesde alta ordern 

Uma fungdo de alta ordern e uma funfao que opera sobre fun foes, recebendo uma ou mais fun foes 
como argumentos e retornando uma nova funfao. Aqui esta um exemplo: 

// Esta funqao de alta ordern retorna uma nova funqao que passa seus 
// argumentos para f e retorna a negacao logica do valor de retorno de f; 
function not(f) { 

return functionQ { // Retorna uma nova funcao 

var result = f.apply(this, arguments); // que chama f 
return Iresult; // e nega seu resultado. 

}; 

} 
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var even = -function(x) { // Uma funcao para determinar se um numero e par 

return x % 2 === 0; 

}; 

var odd = not(even); // Uma nova funqao que faz o oposto 

[l,l,3,5,5].every(odd); // => verdadeiro: todo elemento do array e impar 

A furnjao not() anterior e uma fun<;ao de alta ordem, pois recebe um argumento que e uma funcao e 
retorna uma nova funcao. Como outro exemplo, considere a funijao mapper() a seguir. Ela recebe um 
argumento que e uma funijao e retorna uma nova funcao que mapeia um array em outro, usando 
essa funcao. Essa funcao usa a funcao map() definida anteriormente. E importante entender por que 
as duas funijoes sao diferentes: 



// Retorna uma funqao que espera um argumento de array e aplica f em 
// cada elemento, retornando o array de valores de retorno. 

// Compare isso com a funcao map() anterior, 
function mapper(f) { 

return function(a) { return map(a, f); }; 

} 


var increment = function(x) { return x+1; }; 
var incrementer = mapper(increment); 
incrementer([l,2,3]) // => [2,3,4] 

Aqui esta outro exemplo, mais geral, que recebe duas fun^oes f e g e retorna uma nova funcao que 
calcula f(g()): 

// Retorna uma nova funqao que calcula f(g(...)). 

// A funqao retornada h passa todos os seus argumentos para g, entao passa 

// o valor de retorno de g para f e, em seguida, retorna o valor de retorno de f. 

// Tanto f como g sao chamadas com o mesmo valor de this com que h foi chamada. 
function compose(f,g) { 
return functionQ { 

// Usamos a chamada de f porque estamos passando um unico valor e 
// aplicamos em g porque estamos passando um array de valores. 
return f.call(this, g.apply(this, arguments)); 

}; 

} 


var square = function(x) { return x*x; }; 
var sum = function(x,y) { return x+y; }; 
var squareofsum = compose(square, sum); 
squareofsum(2,3) // => 25 

As fun^oes partial() e memoizeQ, definidas nas se^oes a seguir, sao mais duas importantes fun^oes 
de alta ordem. 


8.8.3 Aplicagao parcial de funnies 

O metodo bind() de uma funcao f (Se^ao 8.7.4) retorna uma nova funcao que chama f em um 
contexto especificado e com um conjunto de argumentos especificado. Dizemos que ele vincula a 
funcao a um objeto e aplica os argumentos parcialmente. O metodo bind() aplica parcialmente os 
argumentos da esquerda - isto e, os argumentos passados para bind() sao colocados no infcio da 
lista de argumentos passada para a funcao original. Mas tambem e possrvel aplicar parcialmente os 
argumentos da direita: 
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// Uma funcao utilitaria para converter urn objeto semelhante a urn array (ou urn sufixo dele) 
// em urn array verdadeiro. Utilizada a seguir para converter objetos arguments em arrays 

function array(a, n) { return Array.prototype.slice.call(a, n || 0); } 

// Os argumentos dessa funcao sao passados na esquerda 
function partialLeft(f /*, ...*/) { 

var args = arguments; // Salva o array de argumentos externo 

return functionQ { // E retorna esta funqao 

var a = array(args, l); // Comeca com os argumentos externos de 1 em diante. 
a = a.concat(array(arguments)); // Em seguida, adiciona todos os argumentos 
//internos. 

return f.apply(this, a); // Depois chama f nessa lista de argumentos. 

}; 


// Os argumentos dessa funcao sao passados na direita 
function partialRight(f /*, ...*/) { 

var args = arguments; // Salva o array de argumentos externos 

return functionQ { // E retorna esta funqao 

var a = array(arguments); // Comeqa com os argumentos internos. 
a = a.concat(array(argSjl));// Em seguida, adiciona os args externos de 1 em 
//diante. 

return f.apply(this, a); // Depois chama f nessa lista de argumentos. 

}; 


// Os argumentos dessa funcao servem como modelo. Os valores indefinidos 
// na lista de argumentos sao preenchidos com valores do conjunto interno. 
function partial(f /*, ... */) { 

var args = arguments; // Salva o array de argumentos externos 

return functionQ { 

var a = array(args, l); // Comeca com urn array de args externos 

// Itera por esses args, preenchendo os valores indefinidos do interno 
for(; i < a.length; i++) 

if (a[i] === undefined) a[i] = arguments[j++]; 

// Agora anexa os argumentos internos restantes 
a = a.concat(array(arguments, j)) 
return f.apply(this, a); 

}; 

} 

// Aqui esta uma funcao com tres argumentos 
var f = function(x,y,z) { return x * (y - z); }; 

// Observe como essas tres aplicaqoes parciais diferem 

partialLeft(f, 2)(3,4) // => -2: Vincula o primeiro argumento: 2 * (3 - 4) 

partialRight(f, 2)(3,4) // => 6: Vincula o ultimo argumento: 3 * (4 - 2) 

partial(f, undefined, 2)(3,4) // => -6: Vincula o argumento do meio: 3 * (2 - 4) 

Essas funfoes de aplica^ao parcial nos permitem definir facilmente fun^oes interessantes a partir de 

funfoes que ja definimos. Aqui estao alguns exemplos: 
var increment = partialLeft(sum, l); 
var cuberoot = partialRight(Math.pow, 1/3); 

String.prototype.first = partial(String.prototype.charAt, 0); 

String.prototype.last = partial(String.prototype.substr, -1, l); 
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A aplica^ao parcial se torna ainda mais interessante quando a combinamos com outras fun^oes de 
mais alta ordem. Aqui, por exemplo, esta uma maneira de definir a fun^ao not() mostrada anterior- 
mente, usando composi^ao e aplica^ao parcial: 

var not = partialLeft(compose, function(x) { return !x; }); 

var even = -function(x) { return x % 2 === 0; }; 

var odd = not(even); 

var isNumber = not(isNaN) 



Tambem podemos usar composi^ao e aplica^ao parcial para refazer nossos calculos de media e desvio 
padrao no estilo funcional extremo: 


r data = [1,1,3,5,5]; 
r sum = function(x,y) { return x+y; }; 
r product = function(x,y) { return x*y; }; 
r neg = partial(product, -l); 
r square = partial(Math.pow, undefined, 2); 
r sqrt = partial(Math.pow, undefined, .5); 
r reciprocal = partial(Math.pow, undefined, -l); 


// Define algumas outras 


// Agora calcula a media e o desvio padrao. Todas essas sao chamadas de 
// fun<;ao sem operadores e comega a ficar parecido com codigo Lisp! 
var mean = product(reduce(data, sum), reciprocal(data.length)); 
var stddev = sqrt(product(reduce(map(data, 

compose(square, 

partial(sum, neg(mean)))), 

sum), 

reciprocal(sum(data.length,-l)))); 


8.8.4 Memoiza^ao 

Na Se^ao 8.4.1, definimos uma funijao de fatorial que colocava na cache os resultados calculados 
anteriormente. Na programa?ao funcional, esse tipo de uso de cache e denominado memoizagao. 
O codigo a seguir mostra uma fun^ao de ordem mais alta, memoize(), que aceita uma fun^ao como 
argumento e retorna uma versao memoizada da fun^ao: 

// Retorna uma versao memoizada de f. 

// So funciona se todos os argumentos de f tern representacoes de string distintas. 
function memoize(f) { 

var cache = {}; // Cache de valores armazenada na closure. 


return functionQ { 

// Cria uma versao de string dos argumentos para usar como chave de cache, 
var key = arguments.length + Array.prototype.join.call(arguments,","); 
if (key in cache) return cachefkey]; 
else return cachefkey] = f.apply(this, arguments); 

}; 

} 

A fuiKjao memoize() cria um novo objeto para usar como cache e atribui esse objeto a uma variavel 
local, de modo que e privado (na closure da) da fun<;ao retornada. A fun910 retornada convene seu 
array de argumentos em uma string e usa essa string como nome de propriedade do objeto cache. Se 
um valor existe na cache, ela o retorna diretamente. 
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Caso contrario, ela chama a fun^ao especificada para calcular o valor para esses argumentos, coloca 
esse valor na cache e o retorna. Aqui esta como podemos usar memoize(): 

// Retorna o maximo divisor comum de dois inteiros, usando o algoritmo 
// euclidiano: http://en.wikipedia.org/wiki/Euclidean_algorithm 
function gcd(a,b) { //A verificacao de tipo para a e b foi omitida 

var t; // Variavel temporaria para troca de valores 

if (a < b) t=b, b=a, a=t; // Carante que a >= b 

while(b != 0) t=b, b = a%b, a=t; // Este e o algoritmo de Euclides para MDC 

return a; 

} 

var gcdmemo = memoize(gcd); 
gcdmemo(85j 187 ) // => 17 

// Note que, quando escrevemos uma funcao recursiva que vai ser memoizada, 

// normalmente queremos aplicar recursividade na versao memoizada e nao na original, 
var factorial = memoize(function(n) { 

return (n <= l) ? 1 : n * factorial(n-l); 

}); 

factorial(5) // => 120. Tambem coloca na cache os valores para 4 , 3 , 2 e 1 . 



Capi'tulo 9 
Classes e modulos 


Os objetos de JavaScript foram abordados no Capi'tulo 6. O capi'tulo tratou cada objeto como um 
conjunto de propriedades unico, diferente de cada outro objeto. Contudo, muitas vezes e util definir 
uma classe de objetos que compartilham certas propriedades. Os membros ou instancias da classe tem 
suas propriedades proprias para conter ou definir seu estado, mas tambem tem propriedades (nor- 
malmente metodos) que definem seu comportamento. Esse comportamento e definido pela classe 
e compartilhado por todas as instancias. Imagine uma classe chamada Complex para representar 
e efetuar operates aritmeticas em numeros complexos, por exemplo. Uma instancia de Complex 
teria propriedades para armazenar as partes (estado) real e imaginaria do niimero complexo. E a 
classe Complex definiria metodos para efetuar a adifao e a multiplica^ao (comportamento) desses 
numeros. 

Em JavaScript, as classes se baseiam no mecanismo de heranfa baseado em prototipos da linguagem. 
Se dois objetos herdam propriedades do mesmo objeto prototipo, dizemos que eles sao instancias da 
mesma classe. Os prototipos e a heranija de JavaScript foram abordados na Se^ao 6.1.3 e na Se^ao 
6.2.2, sendo que para compreender este capi'tulo e preciso estar familiarizado com o material dessas 
se^oes. Este capi'tulo aborda os prototipos na Se^ao 9.1. 

Se dois objetos herdam do mesmo prototipo, normalmente (mas nao necessariamente) isso signi- 
fica que eles foram criados e inicializados pela mesma funfao construtora. As construtoras foram 
abordadas na Se?ao 4.6, na Se?ao 6.1.2 e na Se$ao 8.2.3. Este capi'tulo tem mais informa?oes na 
Se?ao 9.2. 

Se voce conhece linguagens de programa?ao orientadas a objeto fortemente tipadas, como Java ou 
C++, vai notar que em JavaScript as classes sao muito diferentes das classes dessas linguagens. Exis- 
tem algumas semelhanijas sintaticas e e possivel simular muitos recursos das classes “classicas” em 
JavaScript, mas e melhor saber logo que as classes e o mecanismo de heranija baseado em prototipos 
de JavaScript sao significativamente diferentes das classes e do mecanismo de heranfa baseado em 
classes de Java e de linguagens semelhantes. A Se^ao 9.3 demonstra as classes classicas em JavaScript. 

Uma das caracteristicas importantes das classes de JavaScript e que elas podem ser estendidas dina- 
micamente. A Se^ao 9.4 explica como fazer isso. As classes podem ser consideradas como tipos; a 
Seijao 9.5 explica varias maneiras de testar ou determinar a classe de um objeto. Essa se^ao tambem 
aborda uma filosofia de programa^ao conhecida como “tipagem do pato” (do ingles “duck-typing”), 
que muda o enfoque dado ao tipo de objeto e da enfase a capacidade do objeto. 



194 Parte I JavaScript basica 


Depois de abordar todos esses fundamentos da programa^ao orientada a objetos em JavaScript, o 
capftulo passa para assuntos mais praticos e menos relacionados a arquitetura. A Se^ao 9.6 contem 
dois exemplos de classes nao triviais e demonstra varias tecnicas praticas orientadas a objeto para 
aprimorar essas classes. A Se^ao 9.7 demonstra (com muitos exemplos) como estender ou fazer sub¬ 
classes a partir de outras classes e como definir hierarquias de classe em JavaScript. A Se^ao 9.8 abor- 
da algumas das coisas que podem ser feitas com classes usando os novos recursos de ECMAScript 5. 

Definir classes e uma maneira de escrever codigo reutilizavel modular, e a ultima se^ao deste capftulo 
fala sobre os modulos de JavaScript de maneira mais geral. 

9.1 Classes e prototipos 

Em JavaScript, uma classe e um conjunto de objetos que herdam propriedades do mesmo objeto 
prototipo. Portanto, o objeto prototipo e o principal recurso de uma classe. No Exemplo 6-1, defini- 
mos uma fun^ao inherit () que retornava um objeto recem-criado e herdava de um objeto prototipo 
especificado. Se definimos um objeto prototipo e depois usamos inherit () para criar objetos que 
herdam dele, definimos uma classe de JavaScript. Normalmente, as instancias de uma classe exigem 
mais inicializa^ao e e comum definir uma furnjao para criar e inicializar o novo objeto. O Exemplo 
9-1 demonstra isso: ele define um objeto prototipo para uma classe que representa um intervalo de 
valores e tambem define uma fun910 “fabrica”, que cria e inicializa uma nova instancia da classe. 

Exemplo 9-1 Uma classe JavaScript simples 

// range.js: Uma classe representando um intervalo de valores (range). 

// Esta e uma funqao fabrica que retorna um novo objeto range, 
function range(from, to) { 

// Usa a funcao inheritQ para criar um objeto que herda do 
// objeto prototipo definido a seguir. 0 objeto prototipo e armazenado 
// como uma propriedade dessa funqao e define os metodos compartilhados 
// (comportamento) 

// de todos os objetos range, 
var r = inherit(range.methods); 

// Armazena os pontos inicial e final (estado) desse novo objeto range. 

// Essas sao propriedades nao herdadas exclusivas desse objeto. 
r.from = from; 
r.to = to; 


// Finalmente retorna 0 novo objeto 


// Este objeto prototipo define metodos herdados por todos os objetos range, 
range.methods = { 

// Retorna true se x esta no intervalo; caso contrario, false 

// Este metodo funciona tanto para intervalos textuais e Date como para numericos. 

includes: function(x) { return this.from <= x && x <= this.to; }, 

II Chama f uma vez para cada inteiro no intervalo. 
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// Este metodo so funciona para intervalos numericos. 
foreach: function(f) { 

for(var x = Math.ceil(this.from); x <= this.to; x++) f(x); 

}, 

// Retorna uma representacao de string do intervalo 

toString: function() { return "(" + this.from + "..." + this.to + } 


// Aqui estao exemplos de 
var r = range(l,3); 
r.includes(2); 
r.foreach(console.log); 
console.log(r); 


de urn objeto range. 

// Cria urn objeto range 
// => verdadeiro: 2 esta no intervalo 
// Imprime 123 
// Imprime (l...3) 


Existem algumas coisas interessantes no codigo do Exemplo 9-1. Esse codigo define uma fun 910 
fabrica range () para criar novos objetos range. Observe que usamos uma propriedade dessa fun 910 
range(), range.methods, como um lugar conveniente para armazenar o objeto prototipo que define 
a classe. Nao ha nada de especial ou idiomatico quanto a colocar o objeto prototipo aqui. Segundo, 
note que a funijao range () define propriedades from e to em cada objeto range. Essas sao proprieda- 
des nao herdadas e nao compartilhadas que definem o estado exclusivo de cada objeto range indi¬ 
vidual. Por fim, note que todos os metodos herdados e compartilhados definidos em range.methods 
utilizam essas propriedades from e to, e que para se referirem a elas, utilizam a palavra-chave this 
para fazer referenda ao objeto a partir do qual foram chamados. Esse uso de this e uma caracterfstica 
fundamental dos metodos de qualquer classe. 


9.2 Classes e construtoras 

O Exemplo 9-1 demonstra um modo de definir uma classe em JavaScript. Contudo, essa nao e 
a maneira idiomatica de fazer isso, pois nao define uma construtora. Uma construtora e uma fun- 
910 destinada a inicializagao de objetos recem-criados. As construtoras sao chamadas usando-se a 
palavra-chave new, conforme descrito na Segao 8.2.3. As chamadas de construtora que utilizam new 
criam o novo objeto automaticamente, de modo que a construtora em si so precisa inicializar o esta¬ 
do desse novo objeto. A caracterfstica fundamental das chamadas de construtora e que a propriedade 
prototype da construtora e usada como prototipo do novo objeto. Isso significa que todos os objetos 
criados com a mesma construtora herdam do mesmo objeto e, portanto, sao membros da mesma 
classe. O Exemplo 9-2 mostra como poderfamos alterar a classe range do Exemplo 9-1 para usar 
uma fun910 construtora em vez de uma fun910 fabrica: 

Exemplo 9-2 Uma classe Range usando uma construtora 

// range2.js: Outra classe representando um intervalo de valores. 

// Esta e a fun^ao construtora que inicializa novos objetos Range. 

// Note que ela nao cria nem retorna 0 objeto. Ela apenas inicializa this, 
function Range(from, to) { 

// Armazena os pontos inicial e final (estado) desse novo objeto range. 

// Essas sao propriedades nao herdadas exclusivas desse objeto. 
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this.from = from; 
this.to = to; 


// Todos os objetos Range herdam desse objeto. 

// Note que o nome de propriedade deve ser "prototype" para que isso funcione. 

Range.prototype = { 

// Retorna true se x esta no intervalo; caso contrario, false 

// Este metodo funciona tanto para intervalos textuais e Date como para numericos. 

includes: function(x) { return this.from <= x && x <= this.to; }, 

// Chama f uma vez para cada inteiro no intervalo. 

II Este metodo so funciona para intervalos numericos. 
foreach: function(f) { 

for(var x = Math.ceil(this.from); x <= this.to; x++) f(x); 

h 

// Retorna uma representacao de string do intervalo 

toString: function() { return "(" + this.from + "..." + this.to + } 


// Aqui estao exemplos de 
var r = new Range(l,3); 
r.includes(2); 
r.foreach(console.log); 
console.log(r); 


de urn objeto range 

// Cria urn objeto range 
// => verdadeiro: 2 esta no intervalo 
// Imprime 123 
// Imprime (1...3) 


E interessante comparar o Exemplo 9-1 com o Exemplo 9-2 com bastante aten^ao e notar as diferen- 
9as entre essas duas tecnicas de defini^ao de classes. Primeiramente, note que mudamos o nome da 
fun<;ao fabrica range( ) para Range( ) quando a convertemos em uma construtora. Essa e uma conven- 
fao de codifica^ao muito comum: de certo modo, as funfoes construtoras definem classes e as classes 
tern nomes que comeqam com letras maiusculas. As fun^oes e os metodos normals tern nomes que 
comeqam com letras minusculas. 


Em seguida, note que a construtora RangeQ e chamada (no final do exemplo) com a palavra- 
-chave new, ao passo que a fun^ao fabrica range () foi chamada sem ela. O Exemplo 9-1 utiliza 
chamada de fun^ao normal (Se?ao 8.2.1) para criar o novo objeto e o Exemplo 9-2 utiliza cha¬ 
mada de construtora (Se$ao 8.2.3). Como a construtora Range () e chamada com new, nao precisa 
chamar inheritQ nem executar qualquer a?ao para criar um novo objeto. O novo objeto e criado 
automaticamente antes que a construtora seja chamada e esta acessivel como valor de this. A 
construtora Range () apenas precisa inicializar this. As construtoras nem mesmo precisam retor- 
nar o objeto recem-criado. A chamada de construtora cria um novo objeto automaticamente, 
chama a construtora como um metodo desse objeto e retorna o novo objeto. O fato de essa cha¬ 
mada de construtora ser tao diferente da chamada de fun^ao normal e outro motivo para darmos 
as construtoras nomes que come?am com letras maiusculas. As construtoras sao escritas para 
serem chamadas como construtoras, com a palavra-chave new, e normalmente nao funcionam 
corretamente se sao chamadas como fun^oes normals. Uma conven^ao de atribui?ao de nomes 
que mantem as fun^oes construtoras distintas das fun^oes normais ajuda os programadores a 
saber quando devem usar new. 
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Outra diferenja fundamental entre o Exemplo 9-1 e o Exemplo 9-2 e o modo de o objeto prototipo 
ser nomeado. No primeiro exemplo, o prototipo era range.methods. Esse era um nome conveniente 
e descritivo, mas arbitrario. No segundo exemplo, o prototipo e Range.prototype, e esse nome e 
obrigatorio. Uma chamada da construtora Range( ) usa Range. prototype automaticamente como pro¬ 
totipo do novo objeto Range. 

Por fim, observe tambem as coisas que nao mudam entre o Exemplo 9-1 e o Exemplo 9-2: os meto- 
dos range sao definidos e chamados da mesma maneira para as duas classes. 

9.2.1 Construtoras e identidade de dasse 

Como vimos, o objeto prototipo e fundamental para a identidade de uma classe: dois objetos sao 
instancias da mesma classe se, e somente se, herdam do mesmo objeto prototipo. A fun^ao constru¬ 
tora que inicializa o estado de um novo objeto nao e fundamental: duas funqties construtoras podem 
ter propriedades prototype que apontam para o mesmo objeto prototipo. Entao, as duas construto¬ 
ras podem ser usadas para criar instancias da mesma classe. 

Mesmo as construtoras nao sendo tao fundamentals quanto os prototipos, a construtora serve como 
face publica de uma classe. Assim, o nome da fun^ao construtora normalmente e adotado como 
nome da classe. Dizemos, por exemplo, que a construtora RangeQ cria objetos Range. Mais fun- 
damentalmente, no entanto, as construtoras sao usadas com o operador instanceof ao se testar a 
participa^ao de objetos como membros de uma classe. Se temos um objeto r e queremos saber se ele 
e um objeto Range, podemos escrever: 

r instanceof Range // retorna true se r herda de Range.prototype 

O operador instanceof nao verifica se r foi inicializada pela construtora Range. Mas verifica se ela 
herda de Range.prototype. Contudo, a sintaxe de instanceof reforja o uso de construtoras como 
identidade publica de uma classe. Vamos ver o operador instanceof outra vez, posteriormente neste 
capftulo. 

9.2.2 A propriedade constructor 

No Exemplo 9-2, configuramos Range. prototype como um novo objeto que continha os metodos da 
nossa classe. Embora isso fosse conveniente para expressar esses metodos como propriedades de um 
unico objeto literal, na verdade nao era necessario criar um novo objeto. Qualquer funpio de Java¬ 
Script pode ser usada como construtora e as chamadas de construtora precisam de uma propriedade 
prototype. Portanto, toda funpio de JavaScript (exceto as fun (joes retornadas pelo metodo Func¬ 
tion, bind () de ECMAScript 5) tern automaticamente uma propriedade prototype. O valor dessa 
propriedade e um objeto que tern uma unica propriedade constructor nao enumeravel. O valor da 
propriedade constructor e o objeto funpio: 

var F = functionQ {}; // Este e um objeto funcao. 

var p = F.prototype; // Este e o objeto prototipo associado a ele. 

var c = p.constructor; // Esta e a funcao associada ao prototipo. 

c === F // => verdadeiro: F. prototype.constructor === F para qualquer funqao 
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A existencia desse objeto prototipo predefinido com sua propriedade constructor significa que os 
objetos normalmente herdam uma propriedade constructor que se refere as suas construtoras. Como 
as construtoras servem como identidade publica de uma classe, essa propriedade constructor fornece 
a classe de um objeto: 

var o = new F(); // Cria um objeto o da classe F 

o.constructor === F // => verdadeiro: a propriedade constructor especifica a classe 

A Figura 9-1 ilustra essa relagao entre a fungao construtora, seu objeto prototipo, a referenda de 
volta do prototipo para a construtora e as instancias criadas com a construtora. 


Construtora 


Prototipo 

Range() 

◄. 

.constructor 

prototype . 

.► 

includes:... 



foreach:... 



toString:... 


Figura 9-1 Uma fungao construtora, seu prototipo e instancias. 


Observe que a Figura 9-1 usa nossa construtora RangeQ como exemplo. Na verdade, contudo, a 
classe Range definida no Exemplo 9-2 sobrescreve com um objeto proprio o objeto Range. prototype 
predefinido. E o novo objeto prototipo que ela define nao tern uma propriedade constructor. Assim, 
as instancias da classe Range, conforme definidas, nao tern uma propriedade constructor. Podemos 
resolver esse problema adicionando uma construtora no prototipo explicitamente: 

Range.prototype = { 

constructor: Range, // Define explicitamente a referenda de volta para a construtora 
includes: function(x) { return this.from <= x && x <= this.to; }, 
foreach: function(f) { 

for(var x = Math.ceil(this.from); x <= this.to; x++) f(x); 

}, 

toString: function() { return "(" + this.from + "..." + this.to + ")"; } 

}; 

Outra tecnica comum e usar o objeto prototipo predefinido com sua propriedade constructor e 
adicionar metodos nele, um por vez: 

// Estende o objeto Range.prototype predefinido para que nao sobrescrevamos 
//a propriedade Range.prototype.constructor criada automaticamente. 

Range.prototype.includes = function(x) { return this.from<=x && x<=this.to; }; 

Range.prototype.foreach = function(f) { 

for(var x = Math.ceil(this.from); x <= this.to; x++) f(x); 

}; 

Range.prototype.toString = functionQ { 

return "(" + this.from + "..." + this.to + ")"; 

}; 
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9.3 Classes estilo Java em JavaScript 

Se voce ja programou em Java ou em uma linguagem orientada a objetos fortemente tipada seme- 
lhante, pode estar acostumado a pensar em quatro tipos de membros de classe: 

Campos de instancia 

Sao as propriedades ou variaveis de instancia que content o estado de objetos individuals. 
Metodos de instancia 

Sao os metodos compartilhados por todas as instancias da classe chamadas por meio de ins¬ 
tancias individuals. 

Campos de classe 

Sao as propriedades ou variaveis associadas a classe e nao as instancias da classe. 

Metodos de classe 

Sao os metodos associados a classe e nao as instancias. 

Um modo pelo qual JavaScript difere da linguagem Java e que suas funpies sao valores e nao ha dis- 
tinpio rigida entre metodos e campos. Se o valor de uma propriedade e uma funpio, essa proprieda- 
de define um metodo; caso contrario, e apenas uma propriedade ou “campo” normal. Apesar dessa 
diferen^a, podemos simular em JavaScript cada uma das quatro categorias de membros de classe da 
linguagem Java. Em JavaScript existem tres objetos diferentes envolvidos em qualquer defini^ao de 
classe (consulte a Figura 9-1) e as propriedades desses tres objetos atuam como diferentes tipos de 
membros de classe: 

Objeto constrictor 

Conforme observamos, a firnfao construtora (um objeto) define um nome para uma classe 
JavaScript. As propriedades adicionadas nesse objeto construtor servem como campos de clas¬ 
se e metodos de classe (dependendo de os valores de propriedade serem fun$oes ou nao). 

Objeto prototipo 

As propriedades desse objeto sao herdadas por todas as instancias da classe e as propriedades 
cujos valores sao fun^oes se comportam como metodos de instancia da classe. 

Objeto instancia 

Cada instancia de uma classe e um objeto por si so e as propriedades definidas diretamente em 
uma instancia nao sao compartilhadas por qualquer outra instancia. As propriedades que nao 
sao firnpio, definidas em instancias, se comportam como os campos de instancia da classe. 

Podemos reduzir o processo de definipio de classe em JavaScript a um algoritmo de tres etapas. 
Primeiramente, escreva uma fun^ao construtora que configure propriedades de instancia em novos 
objetos. Segundo, defina metodos de instancia no objeto prototype da construtora. Terceiro, defina 
campos e propriedades de classe na construtora em si. Podemos ate implementar esse algoritmo 
como uma fun^ao defineClass( ) simples. (Ela utiliza a funpio extend() do Exemplo 6-2, com o 
trecho do Exemplo 8-3): 

// Uma funcao simples para definir classes simples 

function defineClass(constructor, // Uma funcao que configura propriedades de instancia 
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methods, // Metodos de instancia: copiados para o prototipo 
statics) // Propriedades de classe: copiadas para a construtora 

{ 

if (methods) extend(constructor.prototype, methods); 
if (statics) extend(constructor, statics); 
return constructor; 

} 

// Esta e uma variante simples de nossa classe Range 
var SimpleRange = 

defineClass(function(f,t) { this.f = f; this.t = t; }, 

{ 

includes: function(x) { return this.f <= x && x <= this.t;}, 
toString: functionQ { return this.f + "..." + this.t; } 

h 

{ upto: function(t) { return new SimpleRange(0, t); } }); 

O Exemplo 9-3 e uma definiq;ao de classe mais longa. Ela cria uma classe que representa numeros 
complexos e demonstra como simular membros de classe estilo Java usando JavaScript. Ela faz isso 
“manualmente” - sem contar com a funijao defineClassQ anterior. 

Exemplo 9-3 Complex.js: uma classe de numeros complexos 

f* 

* Complex.js: 

* Este arquivo define uma classe Complex para representar numeros complexos. 

* Lembre-se de que urn numero complexo e a soma de urn numero real e urn 

* numero imaginario e de que o numero imaginario i e a raiz quadrada de - 1 . 


* Esta funcao construtora define os campos de instancia r e i em cada 

* instancia que cria. Esses campos contem as partes real e imaginaria 

* do numero complexo: eles sao o estado do objeto. 


function Complex(real, imaginary) { 

if (isNaN(real) || isNaN(imaginary)) 
throw new TypeErrorQ; 
this.r = real; 
this.i = imaginary; 


// Certifica-se de que os dois args 
// Lan^a urn erro se nao forem. 

//A parte real do numero complexo. 
//A parte imaginaria do numero. 


} 


numeros. 


* Os metodos de instancia de uma classe sao definidos como propriedades com valor de 

* funcoes do objeto prototipo. Os metodos definidos aqui sao herdados por todas 

* as instancias e fornecem o comportamento compartilhado da classe. Note que os 

* metodos de instancia de JavaScript devem usar a palavra-chave this para acessar os 

* campos de instancia. 


// Adiciona urn numero complexo em this e retorna a soma em urn novo objeto. 
Complex.prototype.add = function(that) { 

return new Complex(this.r + that.r, this.i + that.i); 

}; 
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// Multiplica esse numero complexo por outro e retorna o produto. 

Complex.prototype.mul = function(that) { 

return new Complex(this.r * that.r - this.i * that.i, 
this.r * that.i + this.i * that.r); 

H 

// Retorna a magnitude de urn numero complexo. Isso e definido 
// como sua distancia em relagao a origem (0,0) do piano complexo. 

Complex.prototype.mag = function() { 

return Math.sqrt(this.r*this.r + this.i*this.i); 

}; 

// Retorna urn numero complexo que e o negativo deste. 

Complex.prototype.neg = function() { return new Complex(-this.r, -this.i); }; 

// Converte urn objeto Complex em uma string de maneira util. 

Complex.prototype.toString = -function() { 

return "{" + this.r + + this.i + "}"; 

}; 

// Testa se esse objeto Complex tern o mesmo valor do outro. 

Complex.prototype.equals = function(that) { 

return that != null && // deve ser definido e nao nulo 

that.constructor === Complex && // e deve ser uma instancia de Complex 

this.r === that.r && this.i === that.i; // e ter os mesmos valores. 

}; 

/* 

* Os campos de classe (como as constantes) e os metodos de classe sao definidos como 

* propriedades da construtora. Note que os metodos de classe geralmente 

* nao usam a palavra-chave this: eles operam somente em seus argumentos. 


// Aqui estao alguns campos de classe que contem numeros complexos predefinidos uteis. 
// Seus nomes estao em maiusculas para indicar que sao constantes. 

// (Em ECMAScript 5, poderiamos tornar essas propriedades somente para leitura.) 
Complex.ZERO = new Complex(0,0); 

Complex.ONE = new Complex(l,0); 

Complex.I = new Complex(o,l); 

// Este metodo de classe analisa uma string no formato retornado pelo 
// metodo de instancia toString e retorna urn objeto Complex ou lanca urn 
// TypeError. 

Complex.parse = function(s) { 

try { // Presume que a analise vai ser bem-sucedida 

var m = Complex._format.exec(s); // Magica de expressao regular 

return new Complex(parseFloat(m[l]), parseFloat(m[2])); 

} catch (x) { // E dispara uma excecao se ela falha 

throw new TypeError("Can't parse "' + s + as a complex number."); 

} 

}; 

// Urn campo de classe "privado", usado em Complex.parseQ acima. 

// 0 sublinhado em seu nome indica que se destina a uso interno 
// e nao deve ser considerado parte da API publica dessa classe. 

Complex._format = / / '\{([ A ,]+),([ A }]+)\}$/; 
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Com a classe Complex do Exemplo 9-3 definida, podemos usar a construtora, os campos de ins¬ 
tancia, os metodos de instancia, os campos de classe e os metodos de classe em um codigo como o 
seguinte: 


var c = new Complex(2,3); // 

var d = new Complex(c.i,c.r); // 

c.add(d).toString(); // 

// Uma expressao mais complexa que 

Complex.parse(c.toStringO). // 

add(c.negO). // 

equals(Complex.ZERO) // 


Cria um novo objeto com a construtora 

Usa propriedades de instancia de c 

=> "{5,5}": usa metodos de instancia 

usa um metodo e um campo de classe 

Converte c em uma string e de volta novamente, 

adiciona seu negativo a ele, 

e ele sempre sera igual a zero 


Embora em JavaScript as classes possam simular membros de classe estilo Java, existem varios recur- 
sos importantes da linguagem Java que as classes de JavaScript nao suportam. Primeiramente, nos 
metodos de instancia das classes Java, os campos de instancia podem ser usados como se fossem va- 
riaveis locais - nao ha necessidade de prefixa-los com this. JavaScript nao faz isso, mas voce poderia 
obter um efeito semelhante usando uma instru^ao with (contudo, isso nao e recomendado): 

Complex.prototype.toString = function!) { 
with(this) { 

return "{" + r + + i + 

} 

}; 


A linguagem Java permite que os campos sejam declarados com final para indicar que sao constan- 
tes, e permite que campos e metodos sejam declarados com private para especificar que sao priva- 
tivos da implementa^ao da classe e nao devem ser visiveis para os usuarios da classe. JavaScript nao 
tern essas palavras-chave, sendo que o Exemplo 9-3 utiliza convenijoes tipograficas para sugerir que 
algumas propriedades (cujos nomes estao em letras maiusculas) nao devem ser alteradas e que outras 
(cujos nomes comepm com um sublinhado) nao devem ser usadas fora da classe. Vamos voltar a 
esses dois assuntos posteriormente no capitulo: as propriedades privadas podem ser simuladas com 
o uso das variaveis locais de uma closure (consulte a Seqao 9.6.6) e as propriedades constantes sao 
possiveis em ECMAScript 5 (consulte a Seqao 9.8.2). 


9.4 Aumentando classes 

O mecanismo de heran^a baseado em prototipos de JavaScript e dinamico: um objeto herda pro¬ 
priedades de seu prototipo, mesmo que as propriedades do prototipo mudem depois de criado o ob¬ 
jeto. Isso significa que podemos aumentar as classes de JavaScript simplesmente adicionando novos 
metodos em seus objetos prototipos. Aqui esta o codigo que adiciona um metodo para calcular o 
conjugado complexo na classe Complex do Exemplo 9-3: 

// Retorna a numero complexo que e o conjugado complexo deste. 

Complex.prototype.conj = functionQ { return new Complex(this.r, -this.i); }; 

O objeto prototipo de classes internas de JavaScript tambem e “aberto” como esse, ou seja, podemos 
adicionar metodos em numeros, strings, arrays, funijoes, etc. Fizemos isso no Exemplo 8-5, quando 
adicionamos um metodo bind() na classe de funfao em implementa^oes ECMAScript 3, onde ele 
ainda nao existia: 

if (!Function.prototype.bind) { 

Function.prototype.bind = function(o /*, args */) { 
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// 0 codigo do metodo bind fica aqui... 

h 

} 

Aqui estao alguns outros exemplos: 

// Chama a funqao f muitas vezes, passando o numero da iteracao 
// Por exemplo, para imprimir "hello" 3 vezes: 

// var n = 3; 

// n.times(function(n) { console.log(n + " hello"); }); 

Number.prototype.times = -function(f, context) { 
var n = Number(this); 

for(var i = 0; i < n; i++) f.call(context, i); 

}; 

// Define o metodo String.trim() de ES5 se ainda nao existir nenhum. 

// Este metodo retorna uma string com espaqo em branco removido do inicio e do fim. 

String.prototype.trim = String.prototype.trim || function() { 

if (!this) return this; // Nao altera a string vazia 

return this.replace(/ A \s+|\s+$/g, ""); // Magica de expressao regular 

}; 

// Retorna o nome de uma funcao. Se ela tern uma propriedade name (nao padronizado), a 
//utiliza. Caso contrario, converte a funcao em uma string e extrai o nome desta string. 

// Retorna uma string vazia para funqoes nao nomeadas como ela mesma. 

Function.prototype.getName = functionQ { 

return this.name || this.toString().match(/function\s*([ A (]*)\(/)[l]; 

Jl 

E possivel adicionar metodos em Object.prototype, tornando-os disponfveis em todos os objetos. 
Contudo, isso nao e recomendado, pois antes de ECMAScript 5 nao ha uma maneira de tornar esses 
metodos complementares nao enumeraveis e, se voce adicionar propriedades em Object.prototype, 
essas propriedades serao reportadas por todos os la^os for/in. Na Se^ao 9.8.1, vamos ver um exem- 
plo de uso do metodo Object.definePropertyQ de ECMAScript 5 para aumentar Object.prototype 
com seguran^a. 

O fato de as classes definidas pelo ambiente hospedeiro (como o navegador Web) poderem ser au- 
mentadas dessa maneira depende da implementa?ao. Em muitos navegadores Web, por exemplo, 
pode-se adicionar metodos em HTMLElement. prototype e esses metodos vao ser herdados pelos objetos 
que representam as marcas HTML no documento corrente. No entanto, isso nao funciona nas ver- 
soes atuais do Internet Explorer da Microsoft, o que limita seriamente a utilidade dessa tecnica para 
programa?ao no lado do cliente. 

9.5 Classes e tipos 

Lembre-se, do Capitulo 3, de que JavaScript define um pequeno conjunto de tipos: nulo, indefinido, 
booleano, numero, string, funcao e objeto. O operador typeof (Seijao 4.13.2) nos permite distinguir 
entre esses tipos. Frequentemente, contudo, e util tratar cada classe como um tipo proprio e fazer a 
distin^ao de objetos com base em suas classes. Os objetos internos de JavaScript basica (e muitas vezes 
os objetos hospedeiros de JavaScript do lado do cliente) podem ser diferenciados com base em seus 
atributos classe (Seijao 6.8.2), usando-se codigo como a funcao classof () do Exemplo 6-4. Mas quan- 
do definimos nossas proprias classes usando as tecnicas mostradas neste capitulo, os objetos instancia 
sempre tern o atributo classe “Objeto”, de modo que a funcao classof () nao ajuda aqui. 
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As subsefoes a seguir explicam tres tecnicas para determinar a classe de um objeto arbitrario: o ope- 
rador instanceof, a propriedade constructor e o nome da fun^ao construtora. Entretanto, nenhuma 
dessas tecnicas e inteiramente satisfatoria. Assim, a se^ao termina com uma discussao sobre tipagem 
do pato, uma filosofia de programa^ao que se concentra no que um objeto pode fazer (quais meto- 
dos ele tem) e nao em qual e sua classe. 

9.5.1 0 operador instanceof 

O operador instanceof foi descrito na Se^ao 4.9.4. O operando do lado esquerdo deve ser o objeto 
cuja classe esta sendo testada e o operando do lado direito deve ser uma funijao construtora que 
da nome a uma classe. A expressao o instanceof c e avaliada como true se o herda de c. prototype. 
A heranija nao precisa ser direta. Se o herda de um objeto que herda de um objeto que herda de 
c. prototype, a expressao ainda vai ser avaliada como true. 

Conforme observado anteriormente neste capitulo, as construtoras atuam como identidade publica 
das classes, mas os prototipos sao a identidade fundamental. Apesar do uso de uma funfao cons¬ 
trutora com instanceof, esse operador na verdade esta testando de quern um objeto herda e nao a 
construtora que foi utilizada para cria-lo. 

Se quiser testar o encadeamento de prototipos de um objeto para um objeto prototipo especifico e 
nao quiser a fun^ao construtora como intermediaria, voce pode usar o metodo isPrototypeOfQ. Por 
exemplo, poderfamos testar se um objeto r e membro da classe range definida no Exemplo 9-1 com 
o seguinte codigo: 

range.methods.isPrototypeOf(r); // range.methods e o objeto prototipo. 

Uma deficiencia do operador instanceof e do metodo isPrototypeOf () e que eles nao nos permitem 
consultar a classe de um objeto, mas somente testar um objeto em rela?ao a uma classe que especifi- 
camos. Uma deficiencia mais seria surge em JavaScript do lado do cliente onde um aplicativo Web 
utiliza mais de uma janela ou quadro. Cada janela ou quadro e um contexto de execuqao distinto e 
cada um tem seu proprio objeto global e seu proprio conjunto de fun^oes construtoras. Dois arrays 
criados em dois quadros diferentes herdam de dois objetos prototipos identicos, porem distintos, e 
um array criado em um quadro nao e uma instancia (instanceof) da construtora Array () de outro 
quadro. 


9.5.2 A propriedade constructor 

Outra maneira de identificar a classe de um objeto e simplesmente usar a propriedade constructor. 
Como as construtoras sao a face publica das classes, essa e uma estrategia simples. Por exemplo: 

function typeAndValue(x) { 

if (x == null) return // Null e undefined nao tem construtoras 

switch(x.constructor) { 
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case Number: return "Number: " + x; 
case String: return "String: + x + 

case Date: return "Date: " + x; 
case RegExp: return "Regexp: " + x; 
case Complex: return "Complex: " + x; 
} 


// Funciona para tipos primitivos 

// E para tipos internos 

// E para tipos definidos pelo usuario 



Note que as expressoes apos a palavra-chave case no codigo anterior sao fun foes. Se estivessemos 
usando o operador typeof ou extraindo o atributo classe do objeto, elas seriam strings. 

Essa tecnica de usar a propriedade constructor esta sujeita ao mesmo problema de instanceof. 
Nem sempre vai funcionar quando houver varies contextos de execufao (como varios quadros 
na janela de um navegador) que compartilham valores. Nessa situafao, cada quadro tem seu 
proprio conjunto de funfoes construtoras: a construtora Array de um quadro nao e a mesma 
construtora Array de outro. 


Alem disso, JavaScript nao exige que todo objeto tenha uma propriedade constructor: essa e uma 
convenfao baseada no objeto prototipo padrao criado para cada funfao, mas e facil omitir, acidental 
ou intencionalmente, a propriedade constructor no prototipo. As duas primeiras classes deste capi- 
tulo, por exemplo, foram definidas de tal modo (nos exemplos 9-1 e 9-2) que suas instancias nao 
tinham propriedades constructor. 


9.5.3 0 nome da construtora 

O principal problema no uso do operador instanceof ou da propriedade constructor para determi- 
nar a classe de um objeto ocorre quando existem varios contextos de execufao e, portanto, varias 
copias das fun foes construtoras. Essas funfoes podem ser identicas, mas sao objetos distintos e, 
portanto, nao sao iguais entre si. 

Uma possivel solufao e usar o nome da funfao construtora como identificador de classe, em vez da 
propria funfao. A construtora Array de uma janela nao e igual a construtora Array de outra janela, 
mas seus nomes sao iguais. Algumas implementafoes de JavaScript tornam o nome de uma funfao 
disponivel por meio de uma propriedade nao padronizada name do objeto funfao. Para implemen¬ 
tafoes sem propriedade name, podemos converter a funfao em uma string e extrair o nome disso. 
(Fizemos isso na Sefao 9.4, quando mostramos como adicionar um metodo getNameQ na classe 
Function.) 

O Exemplo 9-4 define uma funfao type() que retorna o tipo de um objeto como uma string. Ela 
manipula valores primitivos e funfoes com o operador typeof. Para objetos, ela retorna o valor do 
atributo classe ou o nome da construtora. A funfao type() usa a funfao classofQ do Exemplo 6-4 e 
o metodo Function.getNameQ da Sefao 9.4. O codigo dessa funfao e desse metodo foram incluidos 
aqui por simplicidade. 
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Exemplo 9-4 Uma fun$ao typeQ para determinar o tipo de urn valor 


* Retorna o tipo de o como uma string: 

* -Se o e null, retorna "null", se o e NaN, retorna "nan". 

* -Se typeof retorna urn valor diferente de "object", retorna esse valor. 

* (Note que algumas implementacoes identificam regexps como fun<;6es.) 

* -Se a classe de o e qualquer coisa diferente de "Object", retorna isso. 

* -Se o tern uma construtora e essa construtora tern urn nome, retorna-o. 

* -Caso contrario, apenas retorna "Object". 

**/ 

function type(o) { 

var t, c, n; // tipo, classe, nome 

// Caso especial para o valor null: 
if (o === null) return "null"; 

// Outro caso especial: NaN e o unico valor que nao e igual a si mesmo: 
if (o !== o) return "nan"; 

// Usa typeof para qualquer valor diferente de "object". 

// Isso identifica qualquer valor primitivo e tambem fun<;6es. 
if ((t = typeof o) !== "object”) return t; 

// Retorna a classe do objeto, a nao ser que seja "Object". 

// Isso vai identificar a maioria dos objetos nativos. 
if ((c = classof(o)) !== "Object") return c; 

// Retorna o nome da construtora do objeto, se ele tiver uma 
if (o.constructor && typeof o.constructor === "function" && 

(n = o.constructor.getName())) return n; 

// Nao podemos determinar urn tipo mais especifico; portanto, retorna "Object" 
return "Object"; 


// Retorna a classe de urn objeto. 
function classof(o) { 

return Object.prototype.toString.call(o).slice(8,-l); 

}; 


// Retorna o nome de uma funcao (pode ser "") ou null para o que nao for fun^ao 
Function.prototype.getName = function() { 
if ("name" in this) return this.name; 

return this.name = this.toStringQ.match(/function\s*([ / '(]*)\(/)[l]; 

}; 

Essa tecnica de uso do nome da construtora para identificar a classe de um objeto tem o mesmo 
problema de usar a propriedade constructor: nem todos os objetos tem uma propriedade construe- 
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tor. Alem disso, nem todas as fun^oes tem um nome. Se definirmos uma construtora usando uma 
expressao de defini^ao de fun^ao nao nomeada, o metodo getName( ) vai retornar uma string vazia: 

// Esta construtora nao tern nome 

var Complex = function(x,y) { this.r = x; this.i = y; } 

// Esta construtora tem nome 

var Range = function Range(fjt) { this.from = f; this.to = t; } 

9.5.4 Tipagem do pato 

Nenhuma das tecnicas descritas anteriormente para determinar a classe de um objeto esta livre de 
problemas, pelo menos em JavaScript do lado do cliente. Uma alternativa e evitar o problema: em 
vez de perguntar “qual e a classe desse objeto?”, perguntamos “o que esse objeto pode fazer?” Essa 
estrategia de programaqao e comum em linguagens como Python e Ruby e se chama tipagem do pato, 
por causa desta frase (frequentemente atribuida ao poeta James Whitcomb Riley): 

Quando vejo um passaro que caminha como um pato, nada como um pato e grasna como um pato, 
chamo esse passaro de pato. 

Para programadores JavaScript, essa definiijao pode ser entendida como “se um objeto caminha, 
nada e grasna como um Pato, entao podemos trata-lo como um Pato, mesmo que nao herde do 
objeto prototipo da classe Pato”. 

A classe Range do Exemplo 9-2 serve como exemplo. Essa classe foi projetada com intervalos nu- 
mericos em mente. Note, entretanto, que a construtora Range () nao verifica seus argumentos para 
certificar-se de que sejam numeros. No entanto, ela usa o operador > neles; portanto, presume que 
sejam comparaveis. Da mesma forma, o metodo includes () usa o operador <=, mas nao faz outras 
suposi^oes sobre os pontos extremos do intervalo. Como a classe nao impoe um tipo em especial, 
seu metodo includes () funciona para qualquer tipo de ponto extremo que possa ser comparado com 
os operadores relacionais: 

var lowercase = new Range("a", "z"); 

var thisYear = new Range(new Date(2009, 0, l), new Date(20i0, 0, l)); 

O metodo foreachQ de nossa classe Range tambem nao testa explicitamente o tipo dos pontos 
extremos do intervalo, mas o uso de Math . ceil() e do operador ++ significa que ela so funciona com 
pontos extremos numericos. 

Como outro exemplo, lembre-se da discussao sobre objetos semelhantes a um array na Se^ao 7.11. 
Em muitas circunstancias, nao precisamos saber se um objeto e uma instancia verdadeira da classe 
Array: e suficiente saber que ele tem uma propriedade inteira nao negativa length. A existencia de 
length com valor inteiro mostra como os arrays caminham, poderiamos dizer, e qualquer objeto que 
caminhe dessa maneira pode (em muitas circunstancias) ser tratado como um array. 

Lembre-se, contudo, de que a propriedade length de arrays reais tem comportamento especial: 
quando novos elementos sao adicionados, o comprimento (length) e atualizado automaticamente e 
quando o comprimento e configurado com um valor menor, o array e truncado automaticamente. 
Poderiamos dizer que e assim que os arrays nadam e grasnam. Se voce esta escrevendo codigo que 
exige nadar e grasnar, nao pode usar um objeto que apenas caminha como um array. 
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Os exemplos de tipagem do pato apresentados anteriormente envolvem a resposta de objetos ao 
operador < e o comportamento especial da propriedade length. Mais normalmente, contudo, quan- 
do falamos sobre tipagem do pato, estamos falando sobre testar se um objeto implementa um ou 
mais metodos. Uma fun9k) triatloQ fortemente tipada poderia exigir que seu argumento fosse um 
objeto TriAtleta. Uma alternativa com tipagem do pato poderia ser projetada para aceitar qualquer 
objeto que tivesse metodos corridaQ, natacaoQ e ciclismo(). Outra opgao seria refazer nossa classe 
Range de modo que, em vez de usar os operadores < e ++, ela usasse os metodos compareToQ e succ() 
(sucessor) de seus objetos ponto das extremidades. 

Uma estrategia para a tipagem do pato e laissez-faire-, simplesmente supomos que nossos objetos de 
entrada implementam os metodos necessarios e nao fazemos verificagao alguma. Se a suposigao for 
invalida, vai ocorrer um erro quando nosso codigo tentar chamar um metodo inexistente. Outra 
estrategia faz a verificagao dos objetos de entrada. Entretanto, em vez de verificar suas classes, ela 
verifica se eles implementam metodos com os nomes apropriados. Isso nos permite rejeitar mas en- 
tradas mais cedo e pode resultar em mensagens de erro mais informativas. 

O Exemplo 9-5 define uma fungao quacks () (“implements” seria um nome melhor, mas implements e 
uma palavra reservada) que pode ser util na tipagem do pato. quacks () testa se um objeto (o primeiro 
argumento) implementa os metodos especificados pelos argumentos restantes. Para cada argumento 
restante, se o argumento e uma string, ela procura um metodo com esse nome. Se o argumento e um 
objeto, ela verifica se o primeiro objeto implementa metodos com os mesmos nomes dos metodos 
desse objeto. Se o argumento e uma funpio, ela e aceita como sendo uma construtora e a fungao 
verifica se o primeiro objeto implementa metodos com os mesmos nomes do objeto prototipo. 


Exemplo 9-5 Uma fungao para verificagao do tipagem do pato 

// Retorna true se 0 implementa os metodos especificados pelos args restantes. 
function quacks(o /*, ... */) { 

for(var i = lj i < arguments.length; i++) { // para cada argumento apos 0 
var arg = argumentsji]; 
switch(typeof arg) { // Se arg e: 

case 'string': // uma string: procura um metodo com esse nome 

if (typeof o[arg] !== "function") return false; 
continue; 

case 'function': // uma funcao: usa 0 objeto prototipo 

// Se 0 argumento e uma funcao, usamos seu objeto prototipo 
arg = arg.prototype; 

// passa para 0 proximo case 

case 'objeto': // um objeto: procura metodos correspondentes 

for(var m in arg) { // Para cada propriedade do objeto 

if (typeof arg[m] !== "function") continue; // pula 0 que nao for metodo 
if (typeof o[m] !== "function") return false; 

} 


} 


} 


// Se ainda estamos aqui, entao 0 implementa tudo 
return true; 
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Existem duas coisas importantes a serem lembradas arespeito dessafunfao quacks(). Primeiramente, 
ela so testa se um objeto tem uma ou mais propriedades com valor de funfao com nomes especifi- 
cados. A existencia dessas propriedades nao nos informa nada sobre o que essas fun foes fazem ou 
sobre quantos e quais tipos de argumentos elas esperam. Essa, no entanto, e a natureza da tipagem 
do pato. Se voce define uma API que usa tipagem do pato em vez de uma versao de verificafao de 
tipo mais forte, esta criando uma API mais flexivel, mas tambem esta dando ao usuario de sua API 
a responsabilidade de utiliza-la corretamente. O segundo ponto importante a notar sobre a funfao 
quacksQ e que ela nao fiinciona com classes internas. Por exemplo, nao se pode escrever quacks(o, 
Array) para testar se o tem metodos com os mesmos nomes de todos os metodos de Array. E por 
isso que os metodos das classes internas sao nao enumeraveis e o lafo for/in em quacks () nao os ve. 
(Note que isso pode ser solucionado em ECMAScript 5 com o uso de Object.getOwnProperty Na- 
mes().) 



9.6 Tecnicas orientadas a objeto em JavaScript 

Ate aqui, neste capitulo, abordamos os fundamentos de arquitetura das classes em JavaScript: a 
importancia do objeto prototipo, suas conexoes com a funfao construtora, o funcionamento do 
operador instanceof , etc. Nesta sefao, trocamos de marcha e demonstramos varias tecnicas praticas 
(embora nao fundamentais) para programar com classes em JavaScript. Comefamos com dois exem- 
plos de classes nao triviais que por si sos sao interessantes, mas que tambem servem como pontos de 
partida para as discussoes que se seguem. 

9.6.1 Exemplo: uma dasse Set 

Um conjunto e uma estrutura de dados que representa um grupo nao ordenado de valores, sem du- 
plicatas. As operates fundamentais em conjuntos sao: somar valores e testar se um valor e membro 
do conjunto, sendo que os conjuntos geralmente sao implementados de modo que essas operates 
sejam rapidas. Os objetos em JavaScript sao basicamente conjuntos de nomes de propriedade, com 
valores associados a cada nome. Portanto, e simples usar um objeto com um conjunto de strings. 
O Exemplo 9-6 implementa uma classe Set mais geral em JavaScript. Ela funciona mapeando qual- 
quer valor de JavaScript em uma string exclusiva e, entao, usando essa string como um nome de 
propriedade. Os objetos e as funfoes nao tem uma representafao de string concisa e exclusiva, de 
modo que a classe Set precisa definir uma propriedade identificadora em qualquer objeto ou funfao 
armazenada no conjunto. 

Exemplo 9-6 Set.js: um conjunto arbitrario de valores 

function Set() { // Esta e a construtora 

this.values = {}; // As propriedades do objeto this contem o conjunto 

this.n = 0 ; // Quantos valores existem no conjunto 

this.add.apply(this, arguments);// Todos os argumentos sao valores a adicionar 

} 

// Adiciona cada um dos argumentos no conjunto. 

Set.prototype.add = function() { 
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for(var i = 0; i < arguments.length; i++) { 
var val = arguments[i]; 
var str = Set._v2s(val); 
if (Ithis.values.hasOwnProperty(str)) { 
this.values[str] = val; 

} 

} 

return this; 


// Remove cada urn dos argumentos do conjunto. 
Set.prototype.remove = functionQ { 

for(var i = 0; i < arguments.length; i++) { 
var str = Set._v2s(arguments[i]); 
if (this.values.hasOwnProperty(str)) { 
delete this.values[str]; 
this.n--; 

} 

} 

return this; 


// Para cada argumento 

// 0 valor a adicionar no conjunto 

// Transforma-o em uma string 

// Se ainda nao estiver no conjunto 

// Mapeia a string no valor 

// Aumenta o tamanho do conjunto 


// Suporta chamadas de metodo encadeadas 


// Para cada argumento 
// Mapeia em uma string 
// Se estiver no conjunto 
// 0 exclui 

// Diminui o tamanho do conjunto 


// Para encadeamento de metodos 


// Retorna true se o conjunto contem value; caso contrario, false. 
Set.prototype.contains = function(value) { 

return this.values.hasOwnProperty(Set._v2s(value)); 

}; 


// Retorna o tamanho do conjunto. 

Set.prototype.size = function() { return this.n; }; 

// Chama a funqao f no contexto especificado para cada elemento do conjunto. 

Set.prototype.foreach = function(f, context) { 

for(var s in this.values) // Para cada string no conjunto 

if (this.values.hasOwnProperty(s)) // Ignora as propriedades herdadas 

f.call(context, this.values[s]); // Chama f no valor 

}; 


// Esta funqao interna mapeia qualquer valor de JavaScript 
Set._v2s = function(val) { 
switch(val) { 

case undefined: return 'u'; 
case null: return 1 n'; 

case false: return "f'; 
default: switch(typeof val) { 
case 'number': return '#' 

; 'string': return "" 


a string exclusiva. 


Valores primitivos especia 
recebem codigos de 
uma letra. 


} 


// Numeros recebem o prefixo #. 
// Strings recebem o prefixo ''. 
default: return '(?' + objectld(val);// Objetos e funcoes recebem @ 


+ val; 


// Para qualquer objeto, retorna uma string. Esta funcao vai retornar uma 
// string diferente para diferentes objetos e sempre vai retornar a mesma string 
// se for chamada varias vezes para o mesmo objeto. Para fazer isso, ela cria uma 
// propriedade em o. Em ES5j a propriedade seria nao enumeravel e somente para leitura. 
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function objectld(o) { 

var prop = "|**objectid**| 

if (lo.hasOwnProperty(prop)) 
o[prop] = Set._v2s.next++; 
return o[prop]; 


// Nome de propriedade privada para armazenar 
//identificagoes 

// Se o objeto nao tern identificagao 
// Atribui a proxima disponivel 
// Retorna a identificagao 


}; 

Set._v2s.next = 100; // Comega a atribuir identificagoes de objeto neste valor. 


9.6.2 Exemplo: tipos enumeragao 

Um tipo enumeragao e um tipo com um conjunto finito de valores que sao listados (ou “enumera- 
dos”) quando o tipo e definido. Em C e linguagens derivadas, os tipos enumeragao sao declarados 
com a palavra-chave enum. enum e uma palavra reservada (mas nao usada) em ECMAScript 5, que 
deixa aberta a possibilidade para que, algum dia, JavaScript possa ter tipos enumeragao nativos. Ate 
entao, o Exemplo 9-7 mostra como voce pode definir seus proprios tipos enumeragao em JavaScript. 
Note que ele usa a fun910 inherit() do Exemplo 6-1. 


O Exemplo 9-7 consiste em uma unica fungao enumeration(). Contudo, essa nao e uma fungao 
construtora: ela nao define uma classe chamada “enumeration”. Em vez disso, essa e uma fungao 
fabrica: cada chamada cria e retorna uma nova classe. Utilize-a como segue: 


// Cria uma nova classe Coin com quatro valores: Coin.Penny, Coin.Nickel, etc. 

var Coin = enumeration ({Penny: 1 , Nickel:5, Dime: 10 , 0uarter:25}); 

var c = Coin.Dime; // Esta e uma instancia da nova classe 


c instanceof Coin 
c.constructor == Coin // = 

Coin.Quarter + 3*Coin.Nickel // = 

Coin.Dime ==10 // = 

Coin.Dime > Coin.Nickel // = 

String(Coin.Dime) + ":" + Coin.Dime // = 


verdadeiro: instanceof funciona 
verdadeiro: a propriedade constructor funciona 
40 : valores sao convertidos em numeros 
verdadeiro: mais conversao para numeros 
verdadeiro: operadores relacionais funcionam 
"Dime:10": forcado a ser string 


O objetivo desse exemplo e demonstrar que as classes de JavaScript sao muito mais flexiveis e dina- 
micas do que as classes estaticas de linguagens como C++ e Java. 


Exemplo 9-7 Tipos enumeragao em JavaScript 

// Esta fungao cria um novo tipo enumeragao. 0 objeto argumento especifica 
// os nomes e valores de cada instancia da classe. 0 valor de retorno 
// e uma fungao construtora que identifica a nova classe. Note, entretanto, 

// que a construtora lanca uma excegao: voce nao pode usa-la para criar novas 
// instancias do tipo. A construtora retornada tern propriedades que 
// mapeiam 0 nome de um valor no valor em si e tambem um array de valores, 

// uma fungao iteradora foreach() 
function enumeration(namesToValues) { 

// Esta e a funcao construtora ficticia que sera 0 valor de retorno. 
var enumeration = functionQ { throw "Can't Instantiate Enumerations"; }; 

// Os valores enumerados herdam deste objeto. 
var proto = enumeration.prototype = { 

constructor: enumeration, // Identifica 0 tipo 

toString: functionQ { return this.name; }, // Retorna 0 nome 

valueOf: functionQ { return this.value; }, // Retorna 0 valor 
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toJSON: function() { return this.name; } // Para serializacao 

}; 

enumeration.values = []; // Urn array dos objetos value enumerados 


// Agora cria as instancias desse novo 

for(name in namesToValues) { // 

var e = inherit(proto); // 

e.name = name; // 

e.value = namesToValues[name]; // 

enumeration[name] = e; // 

enumeration.values.push(e); // 

} 


Para cada valor 

Cria urn objeto para representa-lo 
Da urn nome a ele 
E urn valor 

Torna-o uma propriedade da construtora 
E armazena no array values 


// Urn metodo de classe para iterar entre as instancias da classe 
enumeration.foreach = function(f,c) { 

for(var i = 0; i < this.values.length; i++) f.call(cjthis.values[i]); 

}; 


// Retorna a construtora que identifica o novo tipo 
return enumeration; 

} 

O “hello world” dos tipos enumera^ao e usar um tipo enumera^ao para representar os naipes de 
um baralho. O Exemplo 9-8 usa a funijao enumeration() dessa maneira e tambem define classes para 
representar cartas e baralhos . 

Exemplo 9-8 Representando cartas com tipos enumeragao 

// Define uma classe para representar cartas de baralho 
function Card(suit, rank) { 

this.suit = suit; // Cada carta tern um naipe 

this.rank = rank; // e uma posicao 

} 

// Esses tipos enumeracao definem o naipe e os valores da posicao 
Card.Suit = enumeration({Clubs: 1, Diamonds: 2, Hearts:3j Spades:4}); 

Card.Rank = enumeration({Two: 2, Three: 3j Four: 4, Five: 5, Six: 6, 

Seven: 7 , Eight: 8, Nine: 9, Ten: 10, 

Jack: 11, Oueen: 12, King: 13, Ace: 14}); 

// Define uma representaqao textual para uma carta 
Card.prototype.toString = functionQ { 

return this.rank.toStringQ + " of " + this.suit.toString(); 

}; 

// Compara o valor de duas cartas como no poquer 
Card.prototype.compareTo = function(that) { 
if (this.rank < that.rank) return -1; 
if (this.rank > that.rank) return 1; 
return 0; 

}; 

// Uma funcao para ordenar as cartas como no poquer 


Este exemplo e baseado em um outro, de Joshua Bloch, escrito em Java, disponlvel no endere^o http://jcp.org!'aboutjava/ 
communityprocessljsrltigerlenum.html. 
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Card.orderByRank = function(a,b) { return a.compareTo(b); }; 

// Uma fun^ao para ordenar as cartas como no bridge 

Card.orderBySuit = -Function(a,b) { 
if (a.suit < b.suit) return -l; 
if (a.suit > b.suit) return 1; 
if (a.rank < b.rank) return -1; 
if (a.rank > b.rank) return 1; 
return 0; 

}; 


// Define uma classe para representar urn baralho padrao 
function Deck() { 

var cards = this.cards = []; // Urn maco de cartas e apenas urn array de cartas 

Card.Suit.foreach(function(s) { // Inicializa o array 
Card.Rank.foreach(function(r) { 

cards.push(new Card(s,r)); 

I); 


} 


}); 


// Metodo shuffle: embaralha as cartas no local e retorna o ma^o 
Deck.prototype.shuffle = function() { 

// Para cada elemento no array, troca por urn elemento mais baixo escolhido 
//aleatoriamente 

var deck = this.cards, len = deck.length; 
for(var i = len-lj i > 0; i--) { 

var r = Math.floor(Math.random()*(i+l)), temp; // Numero aleatorio 

temp = deck[i], deck[i] = deck[r], deck[r] = temp; // Troca 

} 

return this; 


// Metodo deal: retorna urn array de cartas 
Deck.prototype.deal = function(n) { 

if (this.cards.length < n) throw "Out of cards"; 
return this.cards.splice(this.cards.length-n, n); 


// Cria urn novo ma^o de cartas, embaralha e distribui uma mao de bridge 

var deck = (new Deck()).shuffleQ; 

var hand = deck.deal(lB).sort(Card.orderBySuit); 


9.6.3 Metodos de conversao padrao 

A Se$ao 3.8.3 e a Se^ao 6.10 descreveram importantes metodos usados para conversao de tipo de 
objetos, alguns dos quais sao chamados automaticamente pelo interpretador JavaScript quando a 
conversao e necessaria. Nao e preciso implementar esses metodos para cada classe que se escreve, mas 
eles sao importantes e nao os implementar para suas classes deve ser uma escolha consciente e nao 
uma simples desaten^ao. 

O primeiro e mais importante metodo e toString(). O objetivo desse metodo e retornar uma repre- 
senta^ao de string de um objeto. JavaScript chama esse metodo automaticamente, caso seja utilizado 
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um objeto onde e esperada uma string - como um nome de propriedade, por exemplo, ou com o 
operador + para fazer concatena^ao de strings. Se voce nao implementar esse metodo, sua classe vai 
herdar a implementa^ao padrao de Object. prototype e vai converter a string inutil “[object Object]”. 
Um metodo toString( ) poderia retornar uma string legivel, conveniente para exibir para os usuarios 
finais de seu programa. Contudo, mesmo que isso nao seja necessario, muitas vezes e util definir 
toString() para facilitar a depura^ao. As classes Range e Complex, nos exemplos 9-2 e 9-3, tern 
metodos toStringQ, assim como os tipos enumera^ao do Exemplo 9-7. Vamos definir um metodo 
toString() para a classe Set do Exemplo 9-6 a seguir. 

O metodo toLocaleStringQ e estreitamente relacionado a toStringQ: ele deve converter um 
objeto em uma string compativel com a localidade. Por padrao, os objetos herdam um metodo 
toLocaleStringQ que simplesmente chama seus metodos toStringQ. Alguns tipos internos tern me¬ 
todos toLocaleStringQ uteis que retornam strings compativeis com a localidade. Se voce se encon- 
trar escrevendo um metodo toStringQ que converte outros objetos em strings, deve definir tambem 
um metodo toLocaleStringQ que fa<ja essas conversoes chamando esse metodo nos objetos. Vamos 
fazer isso para a classe Set a seguir. 

O terceiro metodo e valueOfQ. Sua tarefa e converter um objeto em um valor primitivo. O meto¬ 
do valueOfQ e chamado automaticamente quando um objeto e usado em um contexto numerico, 
com operadores aritmeticos (exceto +) e com os operadores relacionais, por exemplo. A maioria dos 
objetos nao tern uma representagio primitiva razoavel e nao define esse metodo. Contudo, os tipos 
enumera?ao no Exemplo 9-7 demonstram um caso em que o metodo valueOfQ e importante. 

O quarto metodo e toJSONQ, que e chamado automaticamente por JSON.stringifyQ. O formato 
JSON se destina a serializaQio de estruturas de dados e pode manipular valores primitivos, arrays e 
objetos comuns de JavaScript. Ele nao conhece classes e, ao serializar um objeto, ignora o prototipo 
e a construtora do objeto. Se JSON.stringifyQ e chamado em um objeto Range ou Complex, por 
exemplo, ele retorna uma string como {"from": l, "to" : 3} ou {"r" : 1, "i" : -l}. Se voce passar essas 
strings para JSON. parseQ, vai obter um objeto simples com propriedades adequadas a objetos Range 
e Complex, mas que nao herdam os metodos Range e Complex. 

Esse tipo de serializa^ao e apropriado para classes como Range e Complex, mas para outras classes 
talvez voce queira escrever um metodo toJSONQ para definir algum outro formato de serializa^ao. Se 
um objeto tern um metodo toJ SON (), J SON. stringify () nao serializa o objeto, mas em vez disso cha¬ 
ma toJSONQ e serializa o valor (primitivo ou objeto) que ele retorna. Os objetos Date, por exemplo, 
tern um metodo toJSONQ que retorna uma representa^ao de string da data. Os tipos enumera^ao 
do Exemplo 9-7 fazem o mesmo: seus metodos toJSONQ sao iguais aos seus metodos toStringQ. O 
analogo JSON mais proximo a um conjunto e o array; portanto, vamos definir a seguir um metodo 
toJSONQ que converte um objeto Set em um array de valores. 

A classe Set do Exemplo 9-6 nao define nenhum desses metodos. Um conjunto nao tern uma re- 
presenta^ao primitiva; portanto, nao faz sentido definir um metodo valueOfQ, mas a classe prova- 
velmente deve ter metodos toStringQ, toLocaleStringQ e toJSONQ. Podemos fazer isso com codigo 
como o seguinte. Observe o uso da fuinjao extend() (Exemplo 6-2) para adicionar metodos em Set. 
prototype: 
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// Adiciona esses metodos no objeto prototipo Set. 
extend(Set.prototype, { 

// Converte urn conjunto em uma string 
toString: function() { 
var s = "{\ i = 0; 

this.foreach(function(v) { s += ((i++ > 0)?", + v; }); 

return s + 

}, 

// Como toString, mas chama toLocaleString em todos os valores 
toLocaleString : functionQ { 
var s = i = 0; 
this.foreach(function(v) { 

if (i++ > o) s += ", 

if (v == null) s += v; // null & undefined 

else s += v.toLocaleString(); // todos os outros 

J); 

}, 

// Converte urn conjunto em urn array de valores 
toArray: function() { 
var a = []; 

this.foreach(function(v) { a.push(v); }); 

} retUln 

}); 

// Trata conjuntos como arrays para os propositos da conversao em string DSON. 

Set.prototype.toDSON = Set.prototype.toArray; 



9.6.4 Metodos de compara^ao 

Os operadores de igualdade de JavaScript comparam objetos por referenda, e nao por valor. Isto e, 
dadas duas referencias do objeto, eles verificam se ambas sao para o mesmo objeto. Esses operadores 
nao verificam se dois objetos diferentes tem os mesmos nomes de propriedade e valores. Frequente- 
mente e util comparar dois objetos distintos quanto a igualdade ou mesmo quanto a ordem relativa 
(como fazem os operadores < e >). Se voce define uma classe e quer comparar instancias dessa classe, 
deve definir metodos apropriados para fazer essas compara^oes. 

A linguagem de programa?ao Java utiliza metodos para compara^ao de objetos e adotar as con- 
venfoes Java e comum e util em JavaScript. Para permitir que instancias de sua classe sejam 
testadas quanto a igualdade, defina um metodo de instancia chamado equals(). Ele deve receber 
um unico argumento e retornar true se esse argumento for igual ao objeto em que e chamado. 
E claro que flea por sua conta decidir o que signiflca “igual” no contexto de sua classe. Para 
classes simples, muitas vezes voce pode simplesmente comparar as propriedades constructor para 
certiflcar-se de que os dois objetos sao do mesmo tipo e, entao, comparar as propriedades de ins¬ 
tancia dos dois objetos para certiflcar-se de que elas tem os mesmos valores. A classe Complex no 
Exemplo 9-3 tem um metodo equals () desse tipo, sendo que podemos escrever um semelhante 
para a classe Range facilmente: 
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// A classe Range sobrescreveu sua propriedade constructor. Portanto, a adiciona agora. 
Range.prototype.constructor = Range; 

// Urn Range nao e igual a nada que nao seja um intervalo. 

// Dois intervalos sao iguais se, e somente se, seus pontos extremos sao iguais. 

Range.prototype.equals = function(that) { 

if (that == null) return false; // Rejeita null e undefined 
if (that.constructor !== Range) return false; // Rejeita o que nao e intervalo 
// Agora retorna true se, e somente se, os dois pontos extremos sao iguais. 
return this.from == that.from && this.to == that.to; 

} 

Definir um metodo equals () para nossa classe Set e um pouco mais complicado. Nao podemos 
apenas comparar a propriedade values de dois conjuntos; precisamos fazer uma compara?ao mais 
profunda: 

Set.prototype.equals = function(that) { 

// Atalho para caso trivial 
if (this === that) return true; 

// Se o objeto that nao e um conjunto, nao e igual a this. 

// Usamos instanceof para permitir qualquer subclasse de Set. 

// Poderiamos moderar esse teste se quisessemos uma verdadeira tipagem do pato. 

// Ou poderiamos torna-lo mais forte para verificar this.constructor == that. 

// constructor 

// Note que instanceof corretamente rejeita valores null e undefined 
if (!(that instanceof Set)) return false; 

// Se dois conjuntos nao tern o mesmo tamanho, eles nao sao iguais 
if (this.sizeQ != that.sizeQ) return false; 

// Agora verifica se todo elemento em this tambem esta em that. 

// Usa uma exceqao para sair do foreach, caso os conjuntos nao sejam iguais. 
try { 

this.foreach(function(v) { if (Ithat.contains(v)) throw false; }); 
return true; // Todos os elementos coincidiram: os conjuntos sao iguais. 

} catch (x) { 

if (x === false) return false; // Um elemento em this nao esta em that, 
throw x; // Alguma outra exceqao: relanqa-a. 

} 

}; 

As vezes e util comparar objetos de acordo com alguma ordena^ao. Isto e, para algumas classes, e 
possfvel dizer que uma instancia e “menor que” ou “maior que” outra instancia. O objeto Range po- 
deria ser ordenado com base no valor de seu limite inferior, por exemplo. Os tipos enumera?ao po- 
deriam ser ordenados alfabeticamente por nome ou numericamente pelo valor associado (supondo 
que o valor associado seja um numero). Os objetos de Set, por outro lado, nao tern uma ordena^ao 
natural. 

Se voce tenta usar objetos com operadores relacionais, como < e <=, JavaScript chama primeiro o me¬ 
todo valueOfQ dos objetos e, se esse metodo retorna um valor primitivo, compara esses valores. Os 
tipos enumera?ao retornados pelo metodo enumeration!) do Exemplo 9-7 tern um metodo valueOfQ 
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e podem ser comparados significativamente com os operadores relacionais. Contudo, a maioria das 
classes nao tem um metodo valueO-fQ. Para comparar objetos desses tipos de acordo com uma orde- 
na<jao defmida explicitamente de sua propria escolha, voce pode (novamente, seguindo a conven^ao 
Java) definir um metodo chamado compareTo(). 

O metodo compareToQ deve aceitar um unico argumento e compara-lo com o objeto no qual o 
metodo e chamado. Se o objeto this for menor do que o argumento, compareToQ deve retornar um 
valor menor do que zero. Se o objeto this for maior do que o objeto argumento, o metodo deve 
retornar um valor maior do que zero. E se os dois objetos sao iguais, o metodo deve retornar zero. 
Essas convenedes sobre o valor de retorno sao importantes e permitem substituir as seguintes expres- 
soes para operadores relacionais e de igualdade: 

Substitua isto Por isto 

a < b a.compareTo(b) < 0 

a <= b a.compareTo(b) <= 0 

a > b a.compareTo(b) > 0 

a >= b a.compareTo(b) >= 0 

a == b a.compareTo(b) == 0 

a != b a.compareTo(b) != 0 

A classe Card do Exemplo 9-8 define um metodo compareToQ desse tipo e podemos escrever um 
metodo semelhante para a classe Range, a fim de ordenar os intervalos pelos seus limites inferiores: 
Range.prototype.compareTo = function(that) { 
return this.from - that.from; 

}; 

Observe que a subtra^ao feita por esse metodo retorna corretamente um valor menor do que zero, 
igual a zero ou maior do que zero, de acordo com a ordem relativa dos dois Ranges. Como a enu- 
mera^ao Card.Rank no Exemplo 9-8 tem um metodo valueOfQ, poderiamos ter usado esse mesmo 
truque idiomatico no metodo compareToQ da classe Card. 

Os metodos equals () anteriores fazem verifica^ao de tipo em seus argumentos e retornam false 
para indicar desigualdade se o argumento for do tipo errado. O metodo compareToQ nao tem qual- 
quer valor de retorno que indique “esses dois valores nao sao comparaveis”; portanto, um metodo 
compareToQ que faz verifica^ao de tipo normalmente deve lanfar um erro quando for passado um 
argumento do tipo errado. 

Observe que o metodo compareToQ que definimos para a classe Range anterior retorna 0 quando 
dois intervalos tem o mesmo limite inferior. Isso significa que, no que diz respeito a compareToQ, 
quaisquer dois intervalos que comepm no mesmo ponto sao iguais. Essa definiijao de igualdade 
e incompativel com a definiijao usada pelo metodo equals (), que exige que os dois pontos extre- 
mos sejam coincidentes. No^oes incompativeis de igualdade podem ser uma fonte fatal de erros, 
por isso e melhor tornar seus metodos equalsQ e compareToQ compatfveis. Aqui esta um metodo 
compareTo( ) revisado para a classe Range. Ele e compativel com equals () e tambem lan^a um erro se 
for chamado com um valor que nao pode ser comparado: 
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// Ordena intervalos pelo limite inferior ou pelo limite superior, caso os limites 
// inferiores sejam iguais. 

// Lanca um erro se for passado um valor que nao seja Range. 

// Retorna 0 se, e somente se, this.equals(that). 

Range.prototype.compareTo = function(that) { 
if (!(that instanceof Range)) 

throw new Error("Can't compare a Range with " + that); 
var diff = this.from - that.from; // Compara os limites inferiores 

if (diff == 0) diff = this.to - that.to; // Se sao iguais, compara os limites 
// superiores 

return diff; 

}; 

Uma razao para definir um metodo compareTo() para uma classe e para que arrays de instancias dessa 
classe possam ser classificados. O metodo Array. sort () aceita como argumento opcional uma fun^ao 
de compara?ao que utiliza as mesmas convenijoes de valor de retorno do metodo compareToQ. Dado 
o metodo compareTo () mostrado anteriormente, e facil classificar um array de objetos Range com um 
codigo como o seguinte: 

ranges.sort(function(a,b) { return a.compareTo(b); }); 

A classifica^ao e suficientemente importante para que se deva considerar a definRao desse tipo de 
fun^ao de compara^ao de dois argumentos como um metodo de classe para qualquer classe em que 
seja definido um metodo de instancia compareToQ. Um pode ser facilmente definido em termos do 
outro. Por exemplo: 

Range.byLowerBound = function(a,b) { return a.compareTo(b); }; 

Com um metodo como esse defmido, a classifica^ao se torna mais simples: 
ranges. sort (Range. by LowerBound); 

Algumas classes podem ser ordenadas de mais de uma maneira. A classe Card, por exemplo, define 
um metodo de classe que ordena cartas pelo naipe e outro que as ordena pela posi^ao. 

9.6.5 Emprestando metodos 

Nao ha nada de especial sobre os metodos em JavaScript: eles sao simplesmente fun^oes atribufdas 
a propriedades de objeto e chamadas “por meio de” ou “em” um objeto. Uma unica funijao pode 
ser atribuida a duas propriedades e, entao, servir como dois metodos. Fizemos isso em nossa classe 
Set, por exemplo, quando copiamos o metodo toArrayQ e o fizemos funcionar tambem como um 
metodo toJSONQ. 

Uma unica fun^ao pode ate ser usada como metodo de mais de uma classe. A maioria dos meto¬ 
dos internos da classe Array, por exemplo, e definida genericamente e se voce define uma classe 
cujas instancias sao objetos semelhantes a um array, pode copiar fun^oes de Array.prototype 
no objeto prototipo de sua classe. Se voce examinar JavaScript atraves da lente das linguagens 
orientadas a objetos classicas, o uso de metodos de uma classe como metodos de outra pode ser 
considerado uma forma de heranfa multipla. Contudo, JavaScript nao e uma linguagem orien- 
tada a objetos classica e prefiro descrever esse tipo de reutiliza^ao de metodo usando o termo 
informal emprestimo. 
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Nao sao apenas os metodos de Array que podem ser emprestados: podemos escrever nossos pro- 
prios metodos genericos. O Exemplo 9-9 define metodos genericos toString() e equalsQ que sao 
convenientes para uso por classes simples como nossas Range, Complex e Card. Se a classe Range 
nao tivesse um metodo equals(), poderfamos emprestar o metodo generico equals() como segue: 
Range.prototype.equals = generic.equals; 

Note que o metodo generic.equals () faz apenas uma comparaqao superficial e nao e adequado para 
uso com classes cujas propriedades de instancia se referem a objetos com seus proprios metodos 
equalsQ. Note tambem que esse metodo inclui codigo de caso especial para manipular a proprieda- 
de adicionada nos objetos quando sao inseridos em um Set (Exemplo 9-6). 

Exemplo 9-9 Metodos genericos para emprestimo 
var generic = { 

// Retorna uma string que contem o nome da funqao construtora 
// se estiver disponivel e os nomes e valores de todas as propriedades 
// nao herdadas que nao sao funqoes. 
toString: functionQ { 

// Se o objeto tern uma construtora e a construtora tern um nome, 

// usa esse nome de classe como parte da string retornada. Note que 
// a propriedade name de funqoes nao e padronizada e nao e suportada 
// em qualquer lugar. 

if (this.constructor && this.constructor.name) 
s += this.constructor.name + ": 

// Agora enumera todas as propriedades nao herdadas que nao sao funqoes 
var n = 0; 

for(var name in this) { 

if (Ithis.hasOwnProperty(name)) continue; // pula props herdadas 
var value = this[name]; 

if (typeof value === "function") continue; // pula metodos 
if (n++) s 

} 

}, 

// Testa a igualdade comparando as construtoras e as propriedades de instancia 
// de this e that. So funciona para classes cujas propriedades de instancia sao 
// valores primitivos que podem ser comparados com ===. 

// Como um caso especial, ignora a propriedade especial adicionada pela classe Set. 
equals: function(that) { 

if (that == null) return false; 

if (this.constructor !== that.constructor) return false; 
for(var name in this) { 

if (name === "|**objectid**|") continue; // pula prop especial, 

if (Ithis.hasOwnProperty(name)) continue; // pula herdadas 

if (this[name] !== that[name]) return false; // compara valores 

} 

return true; // Se todas as propriedades coincidiram, os objetos sao iguais. 

} 

}; 
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9.6.6 Estado privado 

Na programa?ao orientada a objetos classica, frequentemente e um objetivo encapsular ou ocultar o 
estado de um objeto dentro do objeto, permitindo o acesso a esse estado somente por meio dos me- 
todos do objeto, possibilitando assim que as variaveis de estado importantes sejam lidas ou gravadas 
diretamente. Para atingir esse objetivo, linguagens como Java permitem a declara<jao de campos de 
instancia “privados” de uma classe, que sao acessfveis somente para o metodo de instancia da classe 
e nao podem ser vistos fora dela. 

Podemos ter algo proximo aos campos privados de instancia usando variaveis (ou argumentos) cap- 
turadas na closure da chamada de construtora que cria uma instancia. Para fazer isso, definimos 
funqties dentro da construtora (para que elas tenham acesso aos argumentos e as variaveis da cons¬ 
trutora) e atribuimos essas fun (joes as propriedades do objeto recem-criado. O Exemplo 9-10 mostra 
como podemos fazer isso para criar uma versao encapsulada de nossa classe Range. Em vez de ter 
propriedades from e to que fornecem os pontos extremos do intervalo, as instancias dessa nova versao 
da classe tern metodos from e to que retornam os pontos extremos do intervalo. Esses metodo from() 
e to() sao definidos no objeto Range individual e nao sao herdados do prototipo. Os outros meto¬ 
dos de Range sao definidos no prototipo, como sempre, mas modificados para chamar os metodos 
from() e to(), em vez de ler os pontos extremos diretamente das propriedades. 

Exemplo 9-10 Uma classe Range com pontos extremos encapsulados fracamente 
function Range(from, to) { 

// Nao armazena os pontos extremos como propriedades desse objeto. Em vez disso 
// define funcoes de acesso que retornam os valores de ponto extremo. 

II Esses valores sao armazenados na closure, 
this.from = functionQ { return from; }; 
this.to = functionQ { return to; }; 

} 

//Os metodos do prototipo nao podem ver os pontos extremos diretamente: eles precisam 
// chamar os metodos de acesso exatamente como todos os demais. 

Range.prototype = { 

constructor: Range, 

includes: function(x) { return this.fromQ <= x && x <= this.toQ; }, 
foreach: function(f) { 

for(var x=Math.ceil(this.from()), max=this.to(); x <= max; x++) f(x); 

>. 

toString: functionQ { return "(" + this.fromQ + "..." + this.toQ + '')''; } 

}; 

Essa nova classe Range define metodos para consultar os pontos extremos de um intervalo, mas ne- 
nhum metodo ou propriedade para configurar esses pontos extremos. Isso proporciona as instancias 
dessa classe uma especie de imutabilidade: se usados corretamente, os pontos extremos de um objeto 
Range nao vao mudar depois de ele ter sido criado. No entanto, a nao ser que usemos recursos de 
ECMAScript 5 (consulte a Seijao 9.8.3), as propriedades from e to ainda sao gravaveis e os objetos de 
Range nao sao realmente imutaveis: 

var r = new Range(l,5); // Um intervalo "imutavel" 

r.from = functionQ { return 0; }; // Muda pela substituiqao do metodo 
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Lembre-se de que existe uma sobrecarga nessa tecnica de encapsulamento. Uma classe que utiliza 
uma closure para encapsular seu estado quase certamente vai ser mais lenta e maior do que a classe 
equivalente com variaveis de estado nao encapsuladas. 

9.6.7 Sobrecarga de construtora e metodos de fabrica 

As vezes queremos permitir que os objetos sejam inicializados de mais de uma maneira. Talvez quei- 
ramos criar um objeto Complex inicializado com um raio e um angulo (coordenadas polares), em 
vez dos componentes real e imaginario, por exemplo, ou queiramos criar um Set cujos membros sao 
os elementos de um array, em vez dos argumentos passados para a construtora. 

Um modo de fazer isso e sobrecarregar a construtora e faze-la realizar diferentes tipos de inicializa^ao, 
dependendo dos argumentos passados. Aqui esta uma versao sobrecarregada da construtora Set, por 
exemplo: 

function Set() { 

this.values = {}; // As propriedades desse objeto contem o conjunto 

this.n = 0; // Ouantos valores existem no conjunto 

// Se for passado um unico objeto semelhante a um array, adiciona seus elementos no 
// conjunto. Caso contrario, adiciona todos os argumentos no conjunto 
if (arguments.length == 1 && isArrayLike(arguments[0])) 
this.add.apply(this, argumentsfo]); 
else if (arguments.length > 0) 

this.add.apply(this, arguments); 

} 

Definir a construtora Set() dessa maneira nos permite listar explicitamente os membros do con¬ 
junto na chamada da construtora ou passar um array de membros para a construtora. Contudo, a 
construtora tern uma infeliz ambiguidade: nao podemos utiliza-la para criar um conjunto que tenha 
um array como seu unico membro. (Para fazer isso, precisariamos criar um conjunto vazio e, entao, 
chamar o metodo add() explicitamente.) 

No caso de numeros complexos inicializados com coordenadas polares, sobrecarregar a construtora 
nao e viavel. As duas representa^oes de numeros complexos envolvem dois numeros em ponto flutu- 
ante e, a nao ser que adicionemos um terceiro argumento na construtora, nao ha modo de ela exami- 
nar seu argumentos e determinar qual representa^ao e desejada. Em vez disso, podemos escrever um 
metodo de fabrica - um metodo de classe que retorna uma instancia da classe. Aqui esta um metodo 
de fabrica para retornar um objeto Complex inicializado com coordenadas polares: 

Complex.polar = function(r, theta) { 

return new Complex(r*Math.cos(theta), r*Math.sin(theta)); 

}; 

E aqui esta um metodo de fabrica para inicializar um Set a partir de um array: 

Set.fromArray = function(a) { 

s = new Set(); // Cria um novo conjunto vazio 

s.add.apply(s, a); // Passa elementos do array a para o metodo add 
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return s; // Retorna o novo conjunto 

}; 

A vantagem dos metodos de fabrica aqui e que voce pode dar a eles o nome que quiser, e metodos 
com nomes diferentes podem fazer diferentes tipos de inicializa^ao. No entanto, como as constru- 
toras servem como identidade publica de uma classe, normalmente existe apenas uma construtora 
por classe. Entretanto, essa nao e uma regra absoluta. Em JavaScript e possivel definir varias fun^oes 
construtoras que compartilham um unico objeto prototipo e, se voce fizer isso, os objetos criados 
por qualquer uma das construtoras serao do mesmo tipo. Essa tecnica nao e recomendada, mas aqui 
esta uma construtora auxiliar desse tipo: 

// Uma construtora auxiliar para a classe Set. 
function SetFromArray(a) { 

// Inicializa o novo objeto chamando Set() como funqao, 

// passando os elementos de a como argumentos individuais. 

Set.apply(this, a); 

} 

// Configura o prototipo de modo que SetFromArray crie instancias de Set 
SetFromArray.prototype = Set.prototype; 

var s = new SetFromArray![1,2,3]); 
s instanceof Set // => verdadeiro 

Em ECMAScript 5, o metodo bind() de fun^oes tern comportamento especial que o permite criar 
esse tipo de construtora auxiliar. Consulte a Seqao 8.7.4. 

9.7 Subclasses 

Na programafao orientada a objetos, uma classe B pode estender ou fazer uma subclasse de ou- 
tra classe A. Dizemos que A e a superclasse e B e a subclasse. As instancias de B herdam todos os 
metodos de instancia de A. A classe B pode definir seus proprios metodos de instancia, alguns 
dos quais podem anular metodos de mesmo nome deflnidos pela classe A. Se um metodo de 
B anula um metodo de A, o metodo de B as vezes pode chamar o metodo anulado de A: isso e 
chamado de encadeamento de metodos. Da mesma forma, a construtora da subclasse B() as vezes 
pode chamar a construtora da superclasse A(). Isso e chamado de encadeamento de construtoras. 
As proprias subclasses podem ter subclasses e ao se trabalhar com hierarquias de classes, as vezes 
e util definir classes abstratas. Uma classe abstrata e aquela que define um ou mais metodos sem 
uma implementa^ao. A implementa?ao desses metodos abstratos e deixada para as subclasses con- 
cretas da classe abstrata. 

O segredo da criafao de subclasses em JavaScript e a inicializafao correta do objeto prototipo. 
Se a classe B estende A, entao B. prototype deve ser herdeira de A. prototype. Assim, as instancias 
de B herdam de B. prototype que, por sua vez, herda de A. prototype. Esta se^ao demonstra cada um 
dos termos relacionados as subclasses deflnidos anteriormente e tambem aborda uma alternativa as 
subclasses, conhecida como composigao. 
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Usando a classe Set do Exemplo 9-6 como ponto de partida, esta secjao vai demonstrar como se 
define subclasses, como encadear construtoras e metodos anulados, como usar composifao em vez 
de heranfa e, finalmente, como separar a interface da implementa^ao, com classes abstratas. A secjao 
termina com um exemplo prolongado que define uma hierarquia de classes Set. Note que os primei- 
ros exemplos desta se^ao se destinam a demonstrar as tecnicas basicas das subclasses. Alguns desses 
exemplos tern falhas importantes que serao tratadas posteriormente na se^ao. 



9.7.1 Definindo uma subdasse 

Os objetos de JavaScript herdam propriedades (normalmente metodos) do objeto prototipo de suas 
classes. Se um objeto O e uma instancia de uma classe BeBe uma subclasse de A, entao O tambem 
deve herdar propriedades de A. Providenciamos isso garantindo que o objeto prototipo de B herde 
do objeto prototipo de A. Usando nossa firnfao inherit() (Exemplo 6-1), escrevemos: 

B.prototype = inherit(A.prototype); // A subclasse herda da superclasse 
B.prototype.constructor = B; // Sobrescreve a prop, construtora herdada. 

Essas duas linhas de codigo sao o segredo da cria^ao de subclasses em JavaScript. Sem elas, o objeto 
prototipo sera um objeto normal - um objeto que herda de Object.prototype - e isso significa que 
sua classe sera uma subclasse de Object, assim como todas as classes. Se adicionamos essas duas li¬ 
nhas na firnfao defineClassQ (da Se^ao 9.3), podemos transforma-la na fun^ao defineSubclassQ e 
no metodo Function.prototype.extendQ, mostrados no Exemplo 9-11. 

Exemplo 9-11 Utilitarios de definigao de subclasse 

// Uma funcao simples para criar subclasses simples 

function defineSubclass(superclass, // Construtora da superclasse 

constructor, // A construtora da nova subclasse 

methods, // Metodos de instancia: copiados no prototipo 

statics) // Propriedades de classe: copiadas na construtora 

{ 

// Configura o objeto prototipo da subclasse 
constructor.prototype = inherit(superclass.prototype); 
constructor.prototype.constructor = constructor; 

// Copia methods e statics como fariamos para uma classe normal 
if (methods) extend(constructor.prototype, methods); 
if (statics) extend(constructor, statics); 

// Retorna a classe 
return constructor; 

} 

// Tambem podemos fazer isso como um metodo da construtora da superclasse 
Function.prototype.extend = function(constructor, methods, statics) { 
return defineSubclass(this, constructor, methods, statics); 

}; 

O Exemplo 9-12 demonstra como se escreve uma subclasse “manualmente”, sem usar a funijao 
defineSubclassQ. Ele define uma subclasse SingletonSet de Set. Um SingletonSet e um conjunto 
especializado que e somente para leitura e tern um unico membro constante. 
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Exemplo 9-12 SingletonSet: uma subdasse de conjunto simples 

//A funqao construtora 
function SingletonSet(member) { 

this.member = member; // Lembra o unico membro do conjunto 

} 


// Cria urn objeto prototipo que herda do prototipo de Set. 

SingletonSet.prototype = inherit(Set.prototype); 

// Agora adiciona propriedades no prototipo. 

// Essas propriedades anulam as propriedades de mesmo nome de Set.prototype. 

extend(SingletonSet.prototype, { 

// Configura a propriedade constructor apropriadamente 
constructor: SingletonSet, 

// Esse conjunto e somente para leitura: add() e remove() lancam erros 
add: functionQ { throw "read-only set"; }, 
remove: functionQ { throw "read-only set"; }, 

//Urn SingletonSet sempre tern tamanho 1 
size: functionQ { return 1; }, 

// Basta chamar a funcao uma vez, passando o unico membro. 
foreach: functionQ, context) { f.call(context, this.member); }, 

// 0 metodo containsQ e simples: true somente para urn valor 
contains: function(x) { return x === this.member; } 

}); 

Nossa classe SingletonSet tem uma implementa^ao muito simples que consiste em cinco definifoes 
de metodo simples. Ela implementa esses cinco metodos Set basicos, mas herda metodos como 
toStringQ, toArrayQ e equalsQ de sua superclasse. Essa heran^a de metodos e o motivo de definir- 
mos subclasses. O metodo equalsQ da classe Set (definida na Se^ao 9.6.4), por exemplo, compara 
qualquer instancia de Set que tenha metodos sizeQ e foreachQ funcionando, com qualquer Set que 
tenha metodos sizeQ e containsQ funcionando. Como SingletonSet e uma subclasse de Set, ela 
herda essa implementa^ao de equalsQ automaticamente e nao precisa escrever a sua propria. Evi- 
dentemente, dada a natureza radicalmente simples de conjuntos singleton, pode ser mais eficiente 
SingletonSet definir sua propria versao de equalsQ: 

SingletonSet.prototype.equals = function(that) { 

return that instanceof Set && that.size()==l && that.containsfthis.member); 

}; 


Note que SingletonSet nao empresta uma lista de metodos de Set estaticamente: ela herda os meto¬ 
dos da classe Set dinamicamente. Se adicionamos um novo metodo em Set. prototype, ele se torna 
imediatamente dispom'vel para todas as instancias de Set e de SingletonSet (supondo que Singleton¬ 
Set ainda nao defina um metodo com o mesmo nome). 

9.7.2 Encadeamento de construtoras e de metodos 

A classe SingletonSet da ultima se^ao definiu uma implementa?ao de conjunto completamente nova 
e substituiu totalmente os metodos basicos que herdou de sua superclasse. Frequentemente, contu- 
do, quando definimos uma subclasse, queremos apenas aumentar ou modificar o comportamento 
de nossos metodos de superclasse e nao substitui-los completamente. Para fazer isso, a construtora 
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e os metodos da subclasse chamam a (ou encadeiam para a) construtora da superclasse e os metodos 
da superclasse. 

O Exemplo 9-13 demonstra isso. Ele define uma subclasse de Set chamada NonNullSet: um conj un¬ 
to que nao permite null nem undefined como membros. Para restringir a participa^ao de membros 
dessa maneira, NonNullSet precisa testar valores nulos e indefinidos em seu metodo add(). Mas ela 
nao quer reimplementar o metodo add( ) completamente, de modo que encadeia na versao da super¬ 
classe do metodo. Observe tambem que a construtora NonNullSetQ nao executa uma a^ao propria: 
ela simplesmente passa seus argumentos para a construtora da superclasse (chamando-a como uma 
fiinfao e nao como uma construtora) para que a construtora da superclasse possa inicializar o objeto 
recem-criado. 

Exemplo 9-13 Encadeamento de construtoras e de metodos da subclasse na superclasse 

/* 

* NonNullSet e uma subclasse de Set que nao permite null e undefined 

* como membros do conjunto. 

function NonNullSetQ { 

// Apenas encadeia em nossa superclasse. 

// Chama a construtora da superclasse como uma fun^ao normal para inicializar 
// o objeto que foi criado por essa chamada de construtora. 

Set.apply(this, arguments); 

} 

// Torna NonNullSet uma subclasse de Set: 

NonNullSet.prototype = inherit(Set.prototype); 

NonNullSet.prototype.constructor = NonNullSet; 

// Para excluir null e undefined, precisamos apenas anular o metodo add() 

NonNullSet.prototype.add = functionQ { 

// Procura argumentos null ou undefined 
for(var i = 0; i < arguments.length; i++) 
if (arguments[i] == null) 

throw new Error("Can't add null or undefined to a NonNullSet"); 

// Encadeia para a superclasse para fazer a inser^ao real 
return Set.prototype.add.apply(this, arguments); 

H 

Vamos generalizar essa ncxjao de conjunto nao nulo em um “conjunto filtrado”: aquele cujos mem¬ 
bros devem passar por uma fumjao filtro antes de serem adicionados. Vamos definir uma fun^ao 
fabrica de classe (como a fiinfao enumeration () do Exemplo 9-7) em que e passada uma funpio filtro 
e retorna uma nova subclasse de Set. Na verdade, podemos generalizar ainda mais e definir nossa 
fabrica de classe de modo a receber dois argumentos: a classe que vai ser subclasse e o filtro a ser 
aplicado em seu metodo add(). Vamos chamar esse metodo de fabrica de filteredSetSubclassQ e 
podemos usa-lo como segue: 

// Define uma classe conjunto que contem somente strings 
var StringSet = filteredSetSubclass(Set, 

function(x) {return typeof x==="string";}); 

// Define uma classe conjunto que nao permite null, undefined nem fun^oes 
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var MySet = filteredSetSubclass(NonNullSet, 

function(x) {return typeof x !== "function";}); 

O codigo dessa fun^ao fabrica de classe esta no Exemplo 9-14. Observe como essa furuQo faz o mes- 
mo encadeamento de metodos e de construtoras feito por NonNullSet. 

Exemplo 9-14 Uma fabrica de classe e encadeamento de metodos 

* Esta fun<;ao retorna uma subclasse da classe Set especificada e anula 

* o metodo add() dessa classe para aplicar o filtro especificado. 

*f 

function filteredSetSubclass(superclass, filter) { 

var constructor = functionQ { //A construtora da subclasse 

superclass.apply(this, arguments); // Encadeia para a superclasse 

}; 

var proto = constructor.prototype = inherit(superclass.prototype); 
proto.constructor = constructor; 
proto.add = functionQ { 

// Aplica o filtro em todos os argumentos antes de adicionar algo 
for(var i = 0; i < arguments.length; i++) { 
var v = arguments[i]; 

if (Ifilter(v)) throw("value " + v + " rejected by filter"); 

} 

// Encadeia em nossa implementacao da superclasse add 
superclass.prototype.add.apply(this, arguments); 

}; 

return constructor; 

} 

Um ponto interessante a notar no Exemplo 9-14 e que, envolvendo uma funcQo no codigo de cria- 
fao de nossa subclasse, podemos usar o argumento superclass em nosso codigo de encadeamento 
de construtoras e de metodos, em vez de codificar o nome da superclasse. Isso signiflca que, se 
quisessemos alterar a superclasse, precisarfamos altera-la em apenas um ponto, em vez de procurar 
cada meiifao dela em nosso codigo. Comprovadamente, essa e uma tecnica que vale a pena usar, 
mesmo que nao estejamos definindo uma fabrica de classe. Por exemplo, poderfamos reescrever 
nossa NonNullSet usando uma fumjao empacotadora e o metodo Function.prototype.extendQ (do 
Exemplo 9-11), como segue: 

var NonNullSet = (functionQ { // Define e chama function 

var superclass = Set; // Especifica a superclasse somente uma vez. 

return superclass.extend( 

functionQ { superclass.apply(this, arguments); }, // a construtora 

{ //os metodos 

add: functionQ { 

// Procura argumentos null ou undefined 
for(var i = 0; i < arguments.length; i++) 
if (arguments[i] == null) 

throw new Error("Can't add null or undefined"); 

// Encadeia para a superclasse para fazer a inser^ao real 
return superclass.prototype.add.apply(this, arguments); 

} 

}); 

}Q)i 
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Por fim, e importante enfatizar que a capacidade de criar fabricas de classe como essa provem da 
natureza dinamica de JavaScript. As fabricas de classe sao um recurso poderoso e util que nao tem 
equivalente em linguagens como Java e C++. 

9.7.3 Composite) i/ersi/s subclasses 

Na seejao anterior, queriamos definir conjuntos que restringissem seus membros de acordo com 
certos criterios e usamos subclasses para fazer isso, criando uma subclasse personalizada de uma 
implementa^ao de conjunto especifica que utilizava uma fun^ao filtro especificada para restringir a 
participa^o como membro no conjunto. Cada combina^ao de superclasse e fun<;ao filtro exigiu a 
criato de uma nova classe. 



No entanto, ha uma maneira melhor de fazer isso. Um principio bastante conhecido no projeto 
orientado a objetos e “prefira a composite em vez da heranfa” • Nesse caso, podemos usar com¬ 
posite definindo uma nova implementato de conjunto que “empacota” outro objeto conjunto e 
encaminha pedidos para ele, apos filtrar os membros proibidos. O Exemplo 9-15 mostra como isso 
e feito. 


Exemplo 9-15 Composito de conjuntos em vez de subclasses 

/* 

* Um FilteredSet empacota um objeto conjunto especificado e aplica um filtro especificado 

* nos valores passados para seu metodo add(). Todos os outros metodos de conjunto basicos 

* simplesmente encaminham para a instancia do conjunto empacotado. 

var FilteredSet = Set.extend( 

function FilteredSet(set, filter) { // A construtora 
this.set = set; 
this.filter = filter; 

}. 

{ //Os metodos de instancia 
add: functionQ { 

// Se temos um filtro, o aplicamos 
if (this.filter) { 

for(var i = 0; i < arguments.length; i++) { 
var v = arguments[i]; 
if (Ithis.filter(v)) 

throw new Error("FilteredSet: value " + v + 

" rejected by filter”); 

} 

} 

// Agora encaminha o metodo add() para this.set.add() 
this.set.add.apply(this.set, arguments); 
return this; 

h 

// 0 restante dos metodos apenas encaminha para this.set e nao faz mais nada. 
remove: functionQ { 


2 Consulte Design Patterns, de Erich Gamma et al., ou Effective Java, de Joshua Bloch, por exemplo. 
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this.set.remove.apply(this.set, arguments); 
return this; 

h 

contains: function(v) { return this.set.contains(v); }, 
size: function() { return this.set.sizeQ; }, 
foreach: function(f,c) { this.set.-foreach(-f,c); } 

}); 

Uma das vantagens de usar composi^ao nesse caso e que apenas uma subclasse de FilteredSet e exi- 
gida. Instancias dessa classe podem ser criadas para restringir a participa?ao como membro de qual- 
quer outra instancia do conjunto. Em vez de usarmos a classe NonNullSet definida anteriormente, 
por exemplo, podemos fazer isto: 

var s = new FilteredSet(new Set(), function(x) { return x !== null; }); 

Podemos ate filtrar um conjunto filtrado: 

var t = new FilteredSet(s, { function(x} { return !(x instanceof Set); }); 

9.7.4 Hierarquias de classe e classes abstratas 

Na se<jao anterior voce foi estimulado a “preferir a composi^ao em vez da he ran 9a”. Mas para ilus- 
trarmos esse principio, criamos uma subclasse de Set. Fizemos isso para que a classe resultante fosse 
instanceof Set e para que ela pudesse herdar os metodos auxiliares uteis de Set, como toStringQ 
e equalsQ. Esses sao motivos pragmaticos validos, mas ainda teria sido otimo fazer composi^ao de 
conjunto sem fazer a subclasse de uma implementa^ao concreta como a classe Set. Pode-se dizer algo 
semelhante a respeito de nossa classe SingletonSet do Exemplo 9-12 - essa classe e uma subclasse 
de Set, de modo que poderia herdar os metodos auxiliares, mas sua implementafao seria completa- 
mente diferente de sua superclasse. SingletonSet nao e uma versao especializada da classe Set, mas 
um tipo de Set completamente diferente. SingletonSet deve ser irma de Set na hierarquia de classes, 
nao uma descendente. 

Nas linguagens OO classicas bem como em JavaScript, a solufao e separar a interface da imple- 
mentafao. Suponha que definamos uma classe AbstractSet que implementa os metodos auxilia¬ 
res, como toString(), mas nao implementa os metodos basicos, como foreach(). Entao, nossas 
implementa$6es de conjunto. Set, SingletonSet e FilteredSet, podem ser todas subclasses de 
AbstractSet. FilteredSet e SingletonSet nao serao mais subclasses de uma implementafao nao 
relacionada. 

O Exemplo 9-16 leva essa estrategia adiante e define uma hierarquia de classes de conjunto abstra¬ 
tas. AbstractSet define apenas um metodo abstrato, containsQ. Qualquer classe que pretenda ser 
um conjunto deve definir pelo menos esse metodo. Em seguida, criamos a subclasse de AbstractSet 
para definir AbstractEnumerableSet. Essa classe adiciona os metodos abstratos size() e foreach () 
e define metodos concretos liteis (toStringQ, toArrayQ, equalsQ etc.) sobre eles. AbstractEnu¬ 
merableSet nao define metodos add() nem removeQ e representa conjuntos somente para leitura. 
SingletonSet pode ser implementada como uma subclasse concreta. Por fim, definimos Abstrac- 
tWritableSet como uma subclasse de AbstractEnumerableSet. Esse ultimo conjunto abstrato define 
os metodos abstratos add() e removeQ, e implementa metodos concretos, como unionQ e inter- 
sectionQ, que os utilizam. AbstractWritableSet e a superclasse apropriada para nossas classes Set 
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e FilteredSet. Contudo, foi omitida nesse exemplo e uma nova implementa^ao concreta, chamada 
ArraySet, foi inclufda em seu lugar. 

O Exemplo 9-16 e longo, mas vale a pena le-lo inteiramente. Note que ele usa Function.prototype. 
extend() como um atalho para criar subclasses. 

Exemplo 9-16 Uma hierarquia de classes Set abstratas e concretas 



// Uma funqao conveniente que pode ser usada por qualquer metodo abstrato 
function abstractmethod!) { throw new Error("abstract method”); } 


/* 

* A classe AbstractSet define um unico metodo abstrato, contains!). 

function AbstractSet!) { throw new Error("Can't instantiate abstract classes");} 
AbstractSet.prototype.contains = abstractmethod; 

/* 

* NotSet e uma subclasse concreta de AbstractSet. 

* Todos os membros desse conjunto sao valores que nao sao membros de qualquer 

* outro conjunto. Como ele e definido em termos de outro conjunto, nao 

* e gravavel e, como tern infinitos membros, nao e enumeravel. 

* Tudo que podemos fazer com ele e testar a participacao como membro. 

* Note que, para definir essa subclasse, estamos usando o metodo Function.prototype. 

* extend!) que definimos anteriormente. 

var NotSet = AbstractSet.extend! 

function NotSet(set) { this.set = set; }, 

{ 

contains: function(x) { return !this.set.contains(x); }, 
toString: function(x) { return + this.set.toStringQ; }, 
equals: function(that) { 

return that instanceof NotSet && this.set.equals(that.set); 

} 

} 

); 

/* 

* AbstractEnumerableSet e uma subclasse abstrata de AbstractSet. 

* Ela define os metodos abstratos size() e foreach(), e entao implementa 

* os metodos concretos isEmptyQ, toArrayQ, to[Locale]String() e equals!) 

* sobre eles. As subclasses que implementam contains!), size() e foreachQ 

* obtem gratuitamente esses cinco metodos concretos. 

var AbstractEnumerableSet = AbstractSet.extend! 

function!) { throw new Error("Can't instantiate abstract classes"); }, 

{ 

size: abstractmethod, 
foreach: abstractmethod, 

isEmpty: function!) { return this.sizeQ == 0; }, 
toString: function!) { 
var s = "{", i = 0; 
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this.foreach(function(v) { 



> 0) 


}); 


h retUin } ’ 

toLocaleString : function() { 




this.foreach(function(v) { 


if (i++ > 0) s += ", 

if (v == null) s += v; 

else s += v.toLocaleStringQ; 


// null & undefined 
// todos os outros 


J); 

h 

toArray: function() { 


var a = []; 


this.foreach(function(v) { a.push(v); }); 
return a; 


equals: function(that) { 

if (!(that instanceof AbstractEnumerableSet)) return false; 

// Se eles nao tern o mesmo tamanho, nao sao iguais 
if (this.sizeQ != that.size()) return false; 

// Agora verifica se todo elemento em this tambem esta em that, 
try { 

this.foreach(function(v) {if (ithat.contains(v)) throw false;}); 
return true; // Todos os elementos coincidiram: os conjuntos sao iguais. 
} catch (x) { 

if (x === false) return false; // Os conjuntos nao sao iguais 
throw x; // Alguma outra exceqao ocorreu: relanqa-a. 


} 


} 


}); 


* SingletonSet e uma subclasse concreta de AbstractEnumerableSet. 

* Urn conjunto singleton e um conjunto somente para leitura com um so membro. 
*/ 

var SingletonSet = AbstractEnumerableSet.extend( 

function SingletonSet(member) { this.member = member; }, 

{ 

contains: function(x) { return x === this.member; }, 
size: functionQ { return 1; }, 

foreach: function(f,ctx) { f.call(ctx, this.member); } 

} 


); 


* AbstractWritableSet e uma subclasse abstrata de AbstractEnumerableSet. 

* Ela define os metodos abstratos add() e removeQ e, entao, implementa 

* os metodos concretos unionQ, intersection() e differenceQ sobre eles. 
*/ 

var AbstractWritableSet = AbstractEnumerableSet.extend( 

functionQ { throw new Error("Can't instantiate abstract classes"); }, 
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{ 

add: abstractmethodj 
remove: abstractmethodj 
union: function(that) { 
var self = this; 

that.foreach(function(v) { self.add(v); }); 
return this; 

h 

intersection: function(that) { 
var self = this; 

this.foreach(function(v) { if (Ithat.contains(v)) self.remove(v);}); 
return this; 

h 

difference: function(that) { 
var self = this; 

that.foreach(function(v) { self.remove(v); }); 
return this; 

} 

}); 

/* 

* Uma ArraySet e uma subclasse concreta de AbstractWritableSet. 

* Ela representa os elementos do conjunto como urn array de valores e utiliza uma pesquisa 

* linear do array em seu metodo contains(). Como o metodo containsQ 

* e 0(n) em vez de 0(i)j so deve ser usado para conjuntos relativamente 

* pequenos. Note que essa implementacao conta com os metodos de Array de ES5 

* indexOfQ e forEachQ. 

var ArraySet = AbstractWritableSet.extend( 
function ArraySet() { 
this.values = []; 
this.add.apply(thiSj arguments); 

>, 

{ 

contains: function(v) { return this.values.indexOf(v) != -1; }j 
size: functionQ { return this.values.length; }, 
foreach: function(f,c) { this.values.forEach(f, c); }, 
add: functionQ { 

for(var i = 0; i < arguments.length; i++) { 
var arg = arguments[i]; 

if (Ithis.contains(arg)) this.values.push(arg); 

} 

return this; 

h 

remove: functionQ { 

for(var i = 0; i < arguments.length; i++) { 
var p a this.values.indexOf(arguments[i]); 
if (p == -i) continue; 
this.values.splice(p, l); 

} 

return this; 

} 

} 

); 
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9.8 Classes em ECMAScript 5 

ECMAScript 5 adiciona metodos para especificar atributos de propriedade (getters, setters, capa- 
cidade de enumera^ao, de grava^ao e de configura^ao) e para restringir a capacidade de estender 
objetos. Esses metodos foram descritos na Se^ao 6.6, na Se^ao 6.7 e na Secjao 6.8.3, mas mostram-se 
muito uteis na definifao de classes. As subse^oes a seguir demonstram como utilizar esses recursos de 
ECMAScript 5 para tornar suas classes mais robustas. 

9.8.1 Tornando propriedades nao enumeraveis 

A classe Set do Exemplo 9-6 usou um truque para armazenar objetos como membros de conjunto: 
ela definiu uma propriedade “identifica^ao do objeto” em todo objeto adicionado ao conjunto. Pos- 
teriormente, se outro codigo utilizar esse objeto em um la?o for/in, essa propriedade adicionada vai 
ser retornada. ECMAScript 5 nos permite evitar isso, tornando as propriedades nao enumeraveis. O 
Exemplo 9-17 demonstra como fazer isso com Object.definePropertyQ e tambem mostra como se 
define uma funijao getter e como testar se um objeto e extensivel. 

Exemplo 9-17 Definindo propriedades nao enumeraveis 

// Encerra nosso codigo em uma funcao para que possamos definir variaveis no escopo da 
// funqao 
(functionQ { 

// Define objectld como uma propriedade nao enumeravel herdada por todos os objetos. 
// Ouando essa propriedade e lida, a funcao getter e chamada. 

// Ela nao tern setter; portanto, e somente para leitura. 

// Ela nao e configuravel; portanto, nao pode ser excluida. 

Object.defineProperty(Object.prototype, "objectld", { 

get: idGetter, // Metodo para obter value 

enumerable: false, // Nao enumeravel 

configurable: false // Nao pode exclui-la 

})S 

// Esta e a funcao getter chamada quando objectld e lida 

function idGetterQ { // Uma funqao getter para retornar a identificacao 

if (!(idprop in this)) { // Se o objeto ainda nao tern uma identificaqao 

if (!Object.isExtensible(this)) // E se podemos adicionar uma propriedade 
throw Error("Can't define id for nonextensible objects"); 
Object.defineProperty(this, idprop, { // Fornece uma a ele agora. 

value: nextid++, // Este e o valor 

writable: false, // Somente para leitura 

enumerable: false, // Nao enumeravel 

configurable: false // Nao pode ser excluida 

}); 

} 

return this[idprop]; // Agora retorna o valor ja existente ou o novo 

}; 

// Essas variaveis sao usadas por idGetterQ e sao privativas dessa funcao 
var idprop = "|**objectId**|"; // Presume que essa propriedade nao esta em uso 

var nextid = l; // Comeqa a atribuir identificacoes neste na 

}()); // Chama a funqao empacotadora para executar o codigo imediatamente 
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9.8.2 Definindo classes imutaveis 

Alem de tornar propriedades nao enumeraveis, ECMAScript 5 nos permite transforma-las em so- 
mente para leitura, o que e util se queremos definir classes cujas instancias sao imutaveis. O Exemplo 
9-18 e uma versao imutavel de nossa classe Range que faz isso usando Object.definePropertiesQ 
e com Object.create(). Tambem usa Object.defineProperties() para configurar o objeto prototipo 
da classe, tornando os metodos de instancia nao enumeraveis, assim como os metodos das classes 
internas. Na verdade, ele vai mais longe do que isso e transforma esses metodos de instancia em 
somente para leitura e impossiveis de excluir, o que impede qualquer altera^ao dinamica (“monkey- 
-patching”) na classe. Por fim, como um truque interessante, o Exemplo 9-18 tem uma fun<;ao cons- 
trutora que funciona como uma funijao fabrica quando chamada sem a palavra-chave new. 

Exemplo 9-18 Uma classe imutavel com propriedades e metodos somente para leitura 

// Esta funfao funciona com ou sem 'new': uma fun^ao construtora e fabrica 
function Range(from,to) { 

// Estes sao descritores para as propriedades somente para leitura from e to. 
var props = { 

from: {value:from, enumerable:true, writable:false, configurable:false}, 
to: {value:to, enumerable:true, writable:false, configurable:false} 

}; 

if (this instanceof Range) 

Object.defineProperties(this, props) 

else 

return Object.create(Range.prototype 


// Se adicionamos propriedades no objeto Range.prototype da mesma maneira, 

// entao podemos configurar atributos nessas propriedades. Como nao especificamos 
// enumerable, writable nem configurable, todos eles sao false por padrao. 

Object.defineProperties(Range.prototype, { 
includes: { 

value: function(x) { return this.from <= x && x <= this.to; } 

}. 

foreach: { 

value: function(f) { 

for(var x = Math.ceil(this.from); x <= this.to; x++) f(x); 

} 

}. 

toString: { 

value: function() { return "(" + this.from + "..." + this.to + ")"; } 

} 

}); 

O Exemplo 9-18 usa Object.definePropertiesQ e Object.createQ para definir propriedades imu¬ 
taveis e nao enumeraveis. Esses metodos sao poderosos, mas os objetos descritores de propriedade 
que exigem podem tornar o codigo diffcil de ler. Uma alternativa e definir fun^oes utilitarias para 
modificar os atributos de propriedades que ja foram definidas. O Exemplo 9-19 mostra duas dessas 
funfoes utilitarias. 


// Se for chamada como uma construtora 
// Define as propriedades 
// Caso contrario, como uma fabrica 
// Cria e retorna um novo 
// objeto Range com props 
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Exemplo 9-19 Utilitarios descritores de propriedade 

// Transforma as propriedades nomeadas (ou todas) de o em nao gravaveis e nao configuraveis. 
function freezeProps(o) { 

var props = (arguments.length == l) // Se 1 arg 

? Object.getOwnPropertyNames(o) // usa todas as props 

: Array.prototype.splice.call(arguments, l); // senao, as props nomeadas 

props.forEach(function(n) { // Transforma cada uma em somente para leitura e permanente 
// Ignora propriedades nao configuraveis 

if (!Object.getOwnPropertyDescriptor(o,n).configurable) return; 
Object.defineProperty(o, n, { writable: false, configurable: false }); 

}); 

return o; // Para que possamos continuar usando 


// Transforma as propriedades nomeadas (ou todas) de o em nao enumeraveis, se forem 
// configuraveis. 
function hideProps(o) { 

var props = (arguments.length == l) // Se 1 arg 

? Object.getOwnPropertyNames(o) // usa todas as props 

: Array.prototype.splice.call(arguments, l); // senao, as props nomeadas 

props.forEach(function(n) { // Oculta cada uma do laqo for/in 
// Ignora propriedades nao configuraveis 

if (!Object.getOwnPropertyDescriptor(o,n).configurable) return; 

Object.defineProperty(o, n, { enumerable: false }); 

})1 

} 

Object.defineProperty() e Object.definePropertiesQ podem ser usados para criar novas proprieda¬ 
des e tambem para modificar os atributos de propriedades ja existentes. Quando usados para definir 
novas propriedades, os atributos omitidos sao false por padrao. Entretanto, quando usados para 
alterar propriedades ja existentes, os atributos omitidos fleam inalterados. Na funijao hidePropsQ 
anterior, por exemplo, especificamos somente o atributo enumerable, pois esse e o unico que quere- 
mos modificar. 

Com essas fun^oes utilitarias definidas, podemos aproveitar os recursos de ECMAScript 5 para es- 
crever uma classe imutavel sem alterar substancialmente a maneira de escrevermos classes. O Exem¬ 
plo 9-20 mostra uma classe imutavel Range que usa nossas fun^oes utilitarias. 

Exemplo 9-20 Uma classe imutavel mais simples 

function Range(from, to) { // Construtora para uma classe Range imutavel 

this.from = from; 
this.to = to; 

freezeProps(this); // Torna as propriedades imutaveis 

} 

Range.prototype = hideProps({ // Define prototype com propriedades nao enumeraveis 
constructor: Range, 

includes: function(x) { return this.from <= x && x <= this.to; }, 
foreach: function(f) {for(var x=Math.ceil(this.from);x<=this.to;x++) f(x);}, 
toString: function() { return "(" + this.from + "..." + this.to + ")"; } 
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9.8.3 Encapsulando o estado do objeto 

A Segao 9.6.6 e o Exemplo 9-10 mostraram como variaveis ou argumentos de uma fungao constru- 
tora podem ser usados como estado privado dos objetos criados por essa construtora. A desvantagem 
dessa tecnica e que, em ECMAScript 3, os metodos de acesso que dao acesso a esse estado podem 
ser substituidos. ECMAScript 5 nos permite encapsular nossas variaveis de estado de modo mais ro- 
busto, definindo metodos getter e setter de propriedades que nao podem ser excluidos. O Exemplo 
9-21 demonstra isso. 

Exemplo 9-21 Uma dasse Range com extremidades fortemente encapsuladas 

// Esta versao da classe Range e mutavel, mas encapsula suas variaveis 
// limites para manter invariante o fato de que from <= to. 
function Range(from, to) { 

// Verifica o que a invariante contem quando criamos 
if (from > to) throw new Error("Range: from must be <= to”); 

// Define os metodos de acesso que mantem a invariante 
function getFromQ { return from; } 
function getToQ { return to; } 

function setFrom(f) { // Nao permite que from seja configurado > to 

if (f <= to) from = f; 

else throw new Error("Range: from must be <= to"); 

} 

function setTo(t) { // Nao permite que to seja configurado < from 

if (t >= from) to = t; 

else throw new Error("Range: to must be >= from"); 

} 

// Cria propriedades enumeraveis e nao configuraveis que usam os metodos de acesso 
Object.defineProperties(this, { 

from: {get: getFrom, set: setFrom, enumerable:true, configurable:false}, 
to: { get: getTo, set: setTo, enumerable:true, configurable:false } 

}); 

} 

// 0 objeto prototipo nao mudou em relagao aos exemplos anteriores. 

// Os metodos de instancia leem from e to como se fossem propriedades normais. 

Range.prototype = hideProps({ 
constructor: Range, 

includes: function(x) { return this.from <= x && x <= this.to; }, 
foreach: function(f) {for(var x=Math.ceil(this.from);x<=this.to;x++) f(x);}, 
toString: functionQ { return "(" + this.from + "..." + this.to + ")"; } 

}); 

9.8.4 Impedindoextensoesdeclasse 

Normalmente considera-se uma caracterfstica de JavaScript as classes poderem ser estendidas dina- 
micamente pela adigao de novos metodos no objeto prototipo. ECMAScript 5 permite evitar isso, 
caso se queira. Object.preventExtensionsQ torna um objeto nao extensivel (Segao 6.8.3), ou seja, 
nenhuma propriedade nova pode ser adicionada nele. Object.sealQ leva isso um passo adiante: 
impede a adigao de novas propriedades e tambem transforma todas as propriedades atuais em nao 
configuraveis, de modo que nao podem ser excluidas. (No entanto, uma propriedade nao configu- 
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ravel ainda pode ser gravavel e ainda pode ser convertida em uma propriedade somente de leitura.) 
Para impedir extensoes em Object.prototype, basta escrever: 

Object.seal(Object.prototype); 

Outro recurso dinamico de JavaScript e a capacidade de substituir (ou fazer “monkey-patch”) me- 
todos de um objeto: 

var original_sort_method = Array.prototype.sort; 

Array.prototype.sort = -function() { 
var start = new DateQ; 
original_sort_method.apply(this, arguments); 
var end = new DateQ; 

console.log("Array sort took " + (end - start) + " milliseconds."); 

}; 

Esse tipo de altera^ao pode ser evitado transformando-se os metodos de instancia em somente para 
leitura. A fun^ao utilitaria freezeProps( ) definida anteriormente e uma maneira de fazer isso. Outra 
e com Object.freezeQ, que faz tudo que Object.sealQ faz, mas tambem transforma todas as pro- 
priedades em somente para leitura e nao configuraveis. 

Existe uma caracteristica das propriedades somente para leitura que e importante entender ao se 
trabalhar com classes. Se um objeto o herda uma propriedade somente para leitura p, uma ten- 
tativa de atribuir em o.p vai falhar e nao vai criar uma nova propriedade em o. Se quiser anular 
uma propriedade somente de leitura herdada, voce tern de usar Object.definePropertyQ ou Object. 
definePropertiesQ ou Object.createQ para criar a nova propriedade. Isso significa que, se voce 
transforma em somente para leitura os metodos de instancia de uma classe, torna-se significativa- 
mente mais dificil as subclasses anularem esses metodos. 

Normalmente nao e necessario bloquear objetos prototipos como esses, mas existem algumas cir- 
cunstancias em que impedir extensoes em um objeto pode ser util. Pense na funijao fabrica de classe 
enumerationQ do Exemplo 9-7. Aquela funijao armazenava as instancias de cada tipo enumeraqao em 
propriedades do objeto construtor e tambem no array values da construtora. Essas propriedades e 
esse array servem como uma lista oficial das instancias do tipo enumeraqao e e interessante congela- 
-las para que novas instancias nao possam ser adicionadas e as instancias ja existentes nao possam 
ser excluidas nem alteradas. Na funfao enumerationQ, podemos simplesmente adicionar as seguintes 
linhas de codigo: 

Object.freeze(enumeration.values); 

Object.freeze(enumeration); 

Observe que, chamando Object.freezeQ no tipo enumera^ao, impedimos o futuro uso da pro¬ 
priedade objectld definida no Exemplo 9-17. Uma solu^ao para esse problema e ler a propriedade 
objectld (chamando o metodo de acesso subjacente e configurando a propriedade interna) do tipo 
enumera^ao uma vez, antes de congela-la. 

9.8.5 Subclasses e ECMAScript 5 

O Exemplo 9-22 demonstra como fazer subclasses usando recursos de ECMAScript 5. Ele define 
uma classe StringSet como uma subclasse da classe AbstractWritableSet do Exemplo 9-16. A princi¬ 
pal caracteristica desse exemplo e o uso de Object.create () para criar um objeto prototipo que herda 
do prototipo da superclasse e tambem define as propriedades do objeto recem-criado. A dificuldade 
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dessa estrategia, conforme mencionado anteriormente, e que ela exige o uso de descritores de pro- 
priedade complicados. 

Outro ponto interessante a respeito desse exemplo e que ele passa null para Object, create () a fim de 
criar um objeto que nao herda nada. Esse objeto e usado para armazenar os membros do conjunto 
e o fato de nao ter prototipo nos permite utilizar o operador in com ele, em vez do metodo hasOwn- 
PropertyQ. 



Exemplo 9-22 StringSet: uma subclasse de Set usando ECMAScript 5 
function StringSetQ { 

this.set = Object.create(null); // Cria um objeto sem prototipo 
this.n = 0; 

this.add.apply(this, arguments); 


// Note que com Object.create podemos herdar do prototipo da superclasse 
// e definir metodos em uma unica chamada. Como nao especificamos nenhuma das 
// propriedades writable, enumerable e configurable, todas elas sao false por padrao. 
// Metodos somente para leitura tornam mais complicado fazer subclasses dessa classe. 
StringSet.prototype = Object.create(AbstractWritableSet.prototype, { 
constructor: { value: StringSet }, 

contains: { value: function(x) { return x in this.set; } }, 
size: { value: function(x) { return this.n; } }, 

foreach: { value: function(f,c) { Object.keys(this.set).forEach(f,c); } }, 
add: { 

value: function() { 

for(var i = 0; i < arguments.length; i++) { 
if (!(argumentsfi] in this.set)) { 
this.set[arguments[i]] = true; 
this.n++; 

} 

} 

return this; 

} 

}, 

remove: { 

value: function() { 

for(var i = 0; i < arguments.length; i++) { 
if (argumentsfi] in this.set) { 

delete this.set[arguments[i]]; 
this.n--; 

} 

} 

return this; 

} 

} 

}); 


9.8.6 Descritores de propriedade 

A Segao 6.7 descreveu os descritores de propriedade de ECMAScript 5, mas nao incluiu muitos 
exemplos de uso. Conclufmos esta segao sobre ECMAScript 5 com um exemplo estendido que 
vai demonstrar muitas operagoes nas propriedades de ECMAScript 5. O Exemplo 9-23 adiciona 
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um metodo properties() (nao enumeravel, e claro) em Object.prototype. O valor de retorno desse 
metodo e um objeto que representa uma lista de propriedades e define metodos uteis para exibir as 
propriedades e os atributos (util para depuraqao), para obter descritores de propriedade (util quando 
se quer copiar propriedades junto com seus atributos) e para configurar atributos nas propriedades 
(alternativas uteis as fun^oes hidePropsQ e freezePropsQ, definidas anteriormente). Este exemplo 
demonstra a maioria dos recursos de ECMAScript 5 relacionados as propriedades e tambem utiliza 
uma tecnica de codificafao modular que vai ser discutida na proxima sepio. 

Exemplo 9-23 Utilitarios de propriedades de ECMAScript 5 

* Define um metodo propertiesQ em Object.prototype que retorna um 

* objeto representando as propriedades nomeadas do objeto no qual 

* e chamado (ou representando todas as propriedades proprias do objeto, se 

* for chamado sem argumentos). 0 objeto retornado define quatro metodos 

* uteis: toStringQ, descriptorsQ, hide() e show(). 

(function namespaceQ { // Empacota tudo em um escopo de funqao privado 

// Esta e a funcao que sera um metodo de todos os objetos 
function properties() { 

var names; // Um array de nomes de propriedade 

if (arguments.length == o) // Todas as propriedade proprias de this 

names = Object.getOwnPropertyNames(this); 
else if (arguments.length == 1 && Array.isArray(arguments[0])) 
names = arguments[0]; // Ou um array de nomes 

else // Ou os nomes que estao na lista de argumentos 

names = Array.prototype.splice.call(arguments, 0); 

// Retorna um novo objeto Properties representando as propriedades nomeadas 
return new Properties(this, names); 

} 


// A transforma uma nova propriedade nao enumeravel de Object.prototype. 
// Esse e o unico valor exportado desse escopo de funqao privado. 

Object.defineProperty(Object.prototype, "properties", { 
value: properties, 

enumerable: false, writable: true, configurable: true 
})i 


// Esta funcao construtora e chamada pela funcao propertiesQ anterior. 

// A classe Properties representa um conjunto de propriedades de um objeto. 
function PropertiesQ, names) { 

this.o = o; I/O objeto ao qual as propriedades pertencem 

this.names = names; // Os nomes das propriedades 

} 

// Transforma as propriedades representadas por esse objeto em nao enumeraveis 
Properties.prototype.hide = functionQ { 

var o = this.o, hidden = { enumerable: false }; 
this.names.forEach(function(n) { 

if (o.hasOwnProperty(n)) 
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return this; 

}; 


Object.defineProperty(o, n, hidden); 

}); 


// Transforma essas propriedades em somente para leitura e nao configuraveis 
Properties.prototype.freeze = functionQ { 

var o = this.o, frozen = { writable: false, configurable: false }; 
this.names.forEach(function(n) { 

if (o.hasOwnProperty(n)) 

Object.defineProperty(o, n, frozen); 

}); 

return this; 

}; 

// Retorna urn objeto que mapeia nomes em descritores para essas propriedades. 

// Usa this para copiar as propriedades junto com seus atributos: 

// Object.defineProperties(dest, src.properties().descriptorsQ); 

Properties.prototype.descriptors = functionQ { 
var o = this.o, desc = {}; 
this.names.forEach(function(n) { 

if (lo.hasOwnProperty(n)) return; 

desc[n] = Object.getOwnPropertyDescriptor(o,n); 

}>J 

return desc; 

// Retorna uma lista de propriedades perfeitamente formatada, contendo 
// o nome, valor e atributos. Usa o termo "permanent" com o significado de 
// nao configuravel, "readonly" com o significado de nao gravavel e "hidden" 

// com o significado de nao enumeravel. As propriedades enumeraveis, gravaveis e 
// configuraveis normais nao tern atributos listados. 

Properties.prototype.toString = functionQ { 

var o = this.o; // Usado na funqao aninhada a seguir 

var lines = this.names.map(nameToString); 
return "{\n " + lines.join(",\n ") + "\n}"; 

function nameToString(n) { 

var s = "", desc = Object.getOwnPropertyDescriptor(o, n); 
if (Idesc) return "nonexistent " + n + ": undefined"; 
if (Idesc.configurable) s += "permanent "; 

if ((desc.get && Idesc.set) || Idesc.writable) s += "readonly "; 

if (Idesc.enumerable) s += "hidden "; 

if (desc.get || desc.set) s += "accessor " + n 

else s += n + ": " + ((typeof desc.value==="function")?"function" 

:desc.value); 

} r6tUrn S> 

}; 

// Por fim, torna nao enumeraveis os metodos de instancia do objeto 
// prototipo anterior, usando os metodos que definimos aqui. 

Properties.prototype.properties().hide(); 

}()); // Invoca a funcao circundante assim que terminamos de defini-la. 
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9.9 Modulos 

Uma razao importante para organizar codigo em classes e torna-lo mais modular e conveniente para 
reutiliza^ao em uma variedade de situates. Contudo, as classes nao sao o unico tipo de codigo mo¬ 
dular. Normalmente, um modulo e um unico arquivo de codigo JavaScript. Um arquivo de modulo 
poderia conter uma defini^ao de classe, um conjunto de classes relacionadas, uma biblioteca de fun- 
9oes utilitarias ou apenas um script de codigo para executar. Qualquer trecho de codigo JavaScript 
pode ser um modulo, desde que seja escrito de forma modular. JavaScript nao define nenhuma 
construqao da linguagem para trabalhar com modulos (no entanto, reserva as palavras-chave imports 
e exports para versoes futuras), isso quer dizer que escrever codigo JavaScript modular e, em grande 
parte, uma questao de seguir certas conven^oes de codifica^ao. 

Muitas bibliotecas JavaScript e estruturas de programa?ao no lado do cliente contem algum tipo 
de sistema modular. Mas o kit de ferramentas Dojo e a biblioteca Closure da Google, por exemplo, 
definem as funijoes provide() e requireQ para declarare carregar modulos. E a iniciativa de padroni- 
za<jao de JavaScript no lado do servidor CommonJS (consulte o endere^o http://commonjs.org) criou 
uma especifica^ao de modulos que tambem usa uma funfao require(). Sistemas de modulo como 
esses frequentemente fazem o carregamento de modulos e o gerenciamento de dependences auto- 
maticamente e estao fora dos objetivos desta discussao. Se voce usa uma dessas estruturas, entao deve 
usar e definir modulos seguindo as convenedes adequadas a estrutura. Nesta seqao, vamos discutir 
convenfoes de modulo muito simples. 

O objetivo dos modulos e permitir que programas grandes sejam montados com codigo de fontes 
muito diferentes e que todo esse codigo seja executado corretamente, mesmo na presen^a de codigo 
que os autores do modulo nao previram. Para que isso funcione, os varios modulos devem evitar 
altera^oes no ambiente de execu^ao global, a fim de que os modulos subsequentes possam ser exe- 
cutados no ambiente puro (ou quase puro) que esperam. Na pratica, isso significa que os modulos 
devem minimizar o numero de simbolos globais que definem - de preference, nenhum modulo 
deve definir mais de um. As subse^oes a seguir descrevem maneiras simples de fazer isso. Voce vai ver 
que escrever codigo modular em JavaScript nao e nada dificil: ao longo deste livro, vimos exemplos 
das tecnicas descritas aqui. 


9.9.1 Objetos como namespaces 

Uma maneira de um modulo evitar a cria^ao de variaveis globais e usar um objeto como seu espa^o 
de nome. Em vez de definir fun^oes e variaveis globais, ele armazena as fun^oes e os valores como 
propriedades de um objeto (o qual pode ser referenciado por uma variavel global). Considere a classe 
Set do Exemplo 9-6. Ela define uma unica funijao construtora global Set. Ela define varios metodos 
de instancia para a classe, mas os armazena como propriedades de Set. prototype, de modo que nao 
sao globais. Esse exemplo tambem define uma funfao utilitaria _v2s(), mas em vez de faze-la uma 
funijao global, ele a armazena como uma propriedade de Set. 

Em seguida, considere o Exemplo 9-16. Esse exemplo definiu varias classes de conjunto abstratas e 
concretas. Cada classe tinha apenas um simbolo global, mas o modulo inteiro (o unico arquivo de 
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codigo) definia varios globais. Do ponto de vista de um espapa de nomes global limpo, seria melhor 
se esse modulo de classes de conjunto definisse um unico global: 
var sets = {}; 

Esse objeto sets e o espapa de nomes do modulo e definimos cada uma das classes de conjunto como 
uma propriedade desse objeto: 

sets.SingletonSet = sets.AbstractEnumerableSet.extend(...); 

Quando queremos usar uma classe definida desse modo, basta incluirmos o namespace quando nos 
referirmos a construtora: 

var s = new sets.SingletonSet(l); 

O autor de um modulo nao pode saber com que outros modulos o seu vai ser utilizado e deve 
prevenir-se contra conflitos de nome usando espapa de nomes como esse. O programador que utiliza 
o modulo, no entanto, sabe quais modulos estao em uso e quais nomes estao definidos. Esse progra¬ 
mador nao precisa usar os espapa de nomes de forma rfgida e pode importar os valores que em geral 
sao utilizados para o espapa de nomes global. Um programador que fosse utilizar frequentemente a 
classe Set a partir do namespace sets poderia importar a classe como segue: 

var Set = sets.Set; // Importa Set para o espap de nomes global 

var s = new Set(l,2,3); // Agora podemos usa-la sem o prefixo sets. 

As vezes os autores de modulo utilizam espapa de nomes aninhados mais profundamente. Se o mo¬ 
dulo sets fizesse parte de um grupo maior de modulos collections, ele poderia usar collections. sets 
como espapa de nomes e o modulo comepria com um codigo como este: 

var collections; // Declara (ou re-declara) a unica variavel global 

if (!collections) // Se ela ainda nao existe 

collections = {}; // Cria um objeto namespace de nivel superior 
collections.sets = {} // E cria o namespace sets dentro dele. 

// Agora comeca a definicao de nossas classes set dentro de collections.sets 
collections.sets.AbstractSet = function() { ... } 

As vezes o espapa de nomes de nivel superior e usado para identificar a pessoa ou empresa que criou 
os modulos e para evitar conflitos entre nomes de namespace. A biblioteca Closure da Google, 
por exemplo, define sua classe Set no espapa de nomes goog.structs. As pessoas podem inverter os 
componentes do nome de dominio de Internet para criar um prefixo de namespace globalmente 
exclusivo que seja improvavel que esteja sendo usado por qualquer outro autor de modulo. Como 
meu site esta no enderepa davidflanagan.com, eu pude publicar meu modulo sets no namespace com. 
davidflanagan.collections.sets. 

Com espapa de nomes longos assim, importar valores torna-se importante para qualquer usuario de 
seu modulo. Entretanto, em vez de importar classes individuals, um programador poderia importar 
o modulo inteiro no espapa de nomes global: 

var sets = com.davidflanagan.collections.sets; 

Por convenpo, o nome de arquivo de um modulo deve coincidir com seu espapa de nomes. O mo¬ 
dulo sets deve ser armazenado em um arquivo chamado sets.js. Se esse modulo usa o espapa de nomes 
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collections.sets, entao esse arquivo deve ser armazenado em um diretorio chamado collections/ (esse 
diretorio tambem poderia incluir um arquivo chamado maps.js) . E um modulo que usasse o espago 
de nomes com.davidflanagan.collections.sets estaria em com/davidflanaga.nlcollections/sets.js. 

9.9.2 Escopo de fungao como namespace privado 

Os modulos tern uma API publica que exportam: sao as funfoes, classes, propriedades e metodos 
destinados a serem usados por outros programadores. Frequentemente, contudo, as implementa- 
goes de modulo exigem mais fungoes ou metodos nao destinados a uso fora do modulo. A fungao 
Set._v2s() do Exemplo 9-6 e um exemplo - nao queremos que os usuarios da classe Set chamem 
essa fungao; portanto, seria melhor se ela estivesse inacessivel. 

Podemos fazer isso definindo nosso modulo (a classe Set, nesse caso) dentro de uma fungao. Confor- 
me descrito na Segao 8.5, as variaveis e fungoes definidas dentro de outra fungao sao locais para essa 
fungao e invisiveis fora dela. Na verdade, podemos usar o escopo de uma fungao (as vezes chamado 
de “fungao modulo”) como um espago de nomes privado para nosso modulo. O Exemplo 9-24 mos- 
tra como isso ficaria para nossa classe Set. 

Exemplo 9-24 Uma classe Set em uma fungao modulo 

// Declara uma variavel global Set e atribui a ela o valor de retorno dessa fungao 
// 0 parentese de abertura e o nome de fungao abaixo sugerem que a fungao 
// vai ser chamada imediatamente apos ser definida e que e o valor de 
// retorno da fungao (e nao a fungao em si) que esta sendo atribuido. 

// Note que essa e uma expressao de fungao, nao uma instrugao; portanto, o nome 
// "invocation" nao cria uma variavel global, 
var Set = (function invocationQ { 

function Set() { // Esta fungao construtora e uma variavel local. 

this.values = {}; // As propriedades deste objeto contem o conjunto 

this.n = 0; // Ouantos valores existem no conjunto 

this.add.apply(this, arguments); // Todos os argumentos sao valores a adicionar 

} 


// Agora define metodos de instancia em Set.prototype. 

// Por brevidade, o codigo foi omitido aqui 
Set.prototype.contains = function(value) { 

// Note que chamamos v2s() e nao a pesadamente prefixada Set._v2s() 
return this.values.has0wnProperty(v2s(value)); 

}; 

Set.prototype.size = functionQ { return this.n; }; 

Set.prototype.add = functionQ {/*...*/}; 

Set.prototype.remove = functionQ {/*...*/}; 

Set.prototype.foreach = functionQ, context) {/*...*/}; 

// Estas sao fungoes auxiliares e variaveis usadas pelos metodos acima 

// Elas nao fazem parte da API publica do modulo, mas ficam ocultas 

// dentro desse escopo de fungao; portanto, nao precisamos defini-las como uma 

// propriedade de Set nem prefixa-las com sublinhados. 

function v2s(val) { /* ... */ } 

function objectld(o) { /* ... */ } 
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var nextld = 1 ; 

// A API publica desse modulo e a fun^ao construtora Set(). 

// Precisamos exportar essa funcao deste namespace privado para que 
// ela possa ser usada fora. Nesse caso, exportamos a construtora 
// retornando-a. Ela se torna o valor da expressao de atribuicao 
// na primeira linha acima. 
return Set; 

}()); // Chama a funcao imediatamente apos defini-la. 

Note que essa definipio de funcao seguida pela chamada imediata e idiomatica em JavaScript. Codi- 
go que deve ser executado em um espapr de nomes privado e prefixado por “ (funpio 0 {” e seguido 
por “}());”. O parentese de abertura no im'cio garante que essa e uma expressao de funcao e nao uma 
instrupio de definipio de funcao, de modo que qualquer nome de funcao que esclarepi seu codigo 
pode ser adicionado no prefixo. No Exemplo 9-24, usamos o nome “invocation” (chamada) para en- 
fatizar que a funpio seria chamada imediatamente apos ser definida. O nome “namespace” tambem 
poderia ser usado para enfatizar que a funpio estava servindo como um espapr de nomes. 

Uma vez que o codigo do modulo tenha sido selado dentro de uma funpio, ele precisa de uma forma 
de exportar sua API publica, para que ela possa ser usada fora da funcao modulo. No Exemplo 9-24, 
a funfao modulo retornou a construtora, a qual atribuimos entao a uma variavel global. O fato de 
o valor ser retornado torna muito claro que ele esta sendo exportado para fora do escopo da funpio. 
Os modulos que tern mais de um item na API podem retornar um objeto namespace. Para nosso 
modulo sets, poderiamos escrever codigo como este: 

// Cria uma unica variavel global para conter todos os modulos relacionados a collection 
var collections; 

if (!collections) collections = {}; 

// Agora define o modulo sets 
collections.sets = (function namespaceQ { 

// Define as varias classes set aqui, usando variaveis e fun^oes locais 
II ... Bastante codigo omitido... 

// Agora exporta nossa API retornando um objeto namespace 

II Nome da propriedade exportada : nome da variavel local 
AbstractSet: AbstractSet, 

NotSet: NotSet, 

AbstractEnumerableSet: AbstractEnumerableSet, 

SingletonSet: SingletonSet, 

AbstractWritableSet: AbstractWritableSet, 

ArraySet: ArraySet 

}; 

}()); 

Uma tecnica similar e tratar a funcao modulo como uma construtora, chama-la com new e exportar 
valores atribuindo-os a this: 
var collections; 

if (!collections) collections = {}; 
collections.sets = (new function namespaceQ { 
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II ... Bastante codigo omitido... 

// Agora exporta nossa API para o objeto this 
this.AbstractSet = AbstractSet; 

this.NotSet = NotSet; // E assim por diante... 

// Note que nao ha valor de retorno. 

}()); 

Como alternativa, se um objeto namespace global ja foi definido, a fun^ao modulo pode simples- 
mente configurar propriedades desse objeto diretamente e nao se preocupar em retornar nada: 
var collections; 

if (!collections) collections = {}; 
collections.sets = {}; 

(function namespaceQ { 

II ... Bastante codigo omitido... 

// Agora exporta nossa API publica para o objeto namespace criado anteriormente 

collections.sets.AbstractSet = AbstractSet; 

collections.sets.NotSet = NotSet; // E assim por diante... 

// Nenhuma instrucao return e necessaria, pois as exportacoes foram feitas 
anteriormente. 

}()); 

As estruturas que definem sistemas de carregamento de modulo podem ter outros metodos para ex- 
portar a API de um modulo. Pode haver uma funqao provides () para os modulos registrarem a API 
ou um objeto exports no qual os modulos devem armazenar a API. Ate que JavaScript tenha seus 
proprios recursos de gerenciamento de modulo, voce deve escolher o sistema de criaqao e exporta^ao 
de modulos que fimcione melhor com a estrutura ou kit de ferramentas que utiliza. 



Capi'tulo 10 


Compara^ao de padroes com 
expressoes regulares 


Uma expressao regular e um objeto que descreve um padrao de caracteres. A classe RegExp de 
JavaScript representa as expressoes regulares, e tanto String quanto RegExp definem metodos que 
utilizam expressoes regulares para executar fun^oes poderosas de compara^ao de padroes e de loca- 
liza^ao e substitui^ao em texto. A gramatica de expressoes regulares de JavaScript e um subconjunto 
bastante completo da sintaxe de expressoes regulares utilizadas por Perl 5; portanto, se voce e um 
programador Perl experiente, ja sabe como descrever padroes em JavaScript . 

Este capi'tulo come$a definindo a sintaxe utilizada pelas expressoes regulares para descrever pa¬ 
droes textuais. Em seguida, passa a descrever os metodos String e RegExp que utilizam expressoes 
regulares. 

10.1 Definindo expressoes regulares 

Em JavaScript, as expressoes regulares sao representadas por objetos RegExp. Os objetos RegExp po- 
dem ser criados com a construtora RegExpQ, claro, mas sao mais frequentemente criados com o uso 
de uma sintaxe literal especial. Assim como as strings literals sao especificadas como caracteres entre 
aspas, as literals de expressao regular sao especificadas como caracteres entre duas barras normais (/)• 
Assim, seu codigo JavaScript pode corner linhas como esta: 

var pattern = /s$/; 

Essa linha cria um novo objeto RegExp e o atribui a variavel pattern. Esse objeto RegExp em espe¬ 
cial corresponde a qualquer string que termine com a letra “s”. Essa expressao regular poderia ser 
definida de modo equivalente com a construtora RegExpQ, como segue: 

var pattern = new RegExp("s$"); 


Os recursos de expressoes regulares de Perl que nao sao suportados por ECMAScript incluem os flags s (modo de uma 
linha) ex (sintaxe estendida), as sequencias de escape \a, \e, \1, \u, \L, \U, \E, \0, \A, \Z, \z e \G, a ancora look-behind 
positiva (?<= e a ancora look-behind negativa (?<!, o comentario (?# e as outras sintaxes estendidas (?. 
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Literals RegExp e criagao de objetos 

Os literals de tipo primitivo, como strings e numeros, sao avaliados (obviamente) com o mesmo valor sem- 
pre que sao encontrados em urn programa. Os literals de objeto (ou inicializadoras), como {} e [ ], criam 
urn novo objetocadavezquesaoencontrados.Se voce escrevervar a = [] no corpo de um lago, por 
exemplo, cada iteragao do lago vai criar urn novo array vazio. 

As literals de expressao regular sao urn caso especial. A especificagao ECMAScript 3 diz que uma literal 
RegExp e convertida em urn objeto RegExp quando o codigo e analisado e cada avaliagao do codigo retor- 
na o mesmo objeto. A especificagao ECMAScript 5 inverte isso e exige que cada avaliagao de urn RegExp 
retorne urn novo objeto. 0 IE sempre implementou o comportamento de ECMAScript 5 e agora a maioria 
dos navegadores atuais trocou para isso, mesmo antes de implementarem o padrao completamente. 


As especificagoes de padrao de expressoes regulares consistem em uma serie de caracteres. A maioria 
dos caracteres, incluindo todos os alfanumericos, simplesmente descreve os que devem coincidir lite- 
ralmente. Assim, a expressao regular / java/ corresponde a qualquer string que contenha a substring 
“java”. Outros caracteres em expressoes regulares nao coincidem literalmente, mas tern significado 
especial. Por exemplo, a expressao regular /s$/ contem dois caracteres. O primeiro, “s”, coincide 
com ele mesmo literalmente. O segundo, e um metacaractere especial que corresponde ao final 
de uma string. Assim, essa expressao regular corresponde a qualquer string que contenha a letra “s” 
como seu ultimo caractere. 

As segoes a seguir descrevem os varios caracteres e metacaracteres usados em expressoes regulares de 
JavaScript. 


10.1.1 Caracteres literals 

Conforme mencionado, todos os caracteres alfabeticos e digitos coincidem com eles mesmos lite¬ 
ralmente em expressoes regulares. A sintaxe de expressao regular de JavaScript tambem aceita certos 
caracteres nao alfabeticos, por meio de sequencias de escape que comegam com uma barra invertida 
(\). Por exemplo, a sequencia \n corresponde a um caractere de nova linha literal em uma string. A 
Tabela 10-1 lista esses caracteres. 

Tabela 10-1 Caracteres literals de expressoes regulares 
Caractere Corresponde a 

Caractere alfanumerico Ele mesmo 

\0 0 caractere NUL (\u0000) 

\t Tabulagao (\u0009) 

\n Nova linha (\u000A) 

\v Tabulagao vertical (\u000B) 
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Tabela 10-1 

Caracteres literals de expressoes regulares (Continuagao) 

Caractere 

Corresponde a 

\f 

Alimentagao de pagina (\u000C) 

\r 

Retorno de carro (\u000D) 

\xnn 

0 caractere latino especificado pelo numero hexadecimal nn; por exemplo, \xOA e o 
mesmoque\n 

\uxxxx 

0 caractere Unicode especificado pelo numero hexadecimal xm; por exemplo, \ 
u0009eomesmoque\t 

\cX 

0 caractere de controle a X; por exemplo, \cJ e equivalente ao caractere de nova 
linha\n 


Varios caracteres de poncua^ao tem signiflcados especiais em expressoes regulares. Sao eles: 

A $■* + ? = !: I \ /()[]{ } 

Os signiflcados desses caracteres vao ser discutidos nas segoes a seguir. Alguns desses caracteres tem 
significado especial somente dentro de certos contextos de uma expressao regular e sao tratados 
literalmente em outros contextos. Contudo, como regra geral, se voce quer incluir qualquer um des¬ 
ses caracteres de pontuagao literalmente em uma expressao regular, deve precede-lo com \. Outros 
caracteres de pontuagao, como as aspas e nao tem significado especial e simplesmente coincidem 
com eles mesmos literalmente em uma expressao regular. 

Se nao conseguir se lembrar exatamente de quais caracteres de pontuagao precisam ter escape com 
uma barra invertida, pode colocar uma barra invertida antes de qualquer caractere de pontuagao 
sem causar danos. Por outro lado, note que muitas letras e numeros tem significado especial quando 
precedidos por uma barra invertida; portanto, qualquer letra ou numero que voce queira represen- 
tar literalmente nao deve ter escape com uma barra invertida. Para incluir um caractere de barra 
invertida literalmente em uma expressao regular, deve-se fazer seu escape com uma barra invertida, 
claro. Por exemplo, a expressao regular a seguir corresponde a qualquer string que inclua uma barra 
invertida: /\\l. 

10.1.2 Classes de caracteres 

Os caracteres literals individuals podem ser combinados em classes de caracteres colocando-os dentro 
de colchetes. Uma classe de caracteres corresponde a qualquer caractere que esteja contido dentro 
dela. Assim, a expressao regular / [ abc ]/ corresponde a qualquer uma das letras a, b ou c. Tambem 
podem ser definidas classes de caracteres negadas; elas correspondem a qualquer caractere, exceto 
aqueles contidos nos colchetes. Uma classe de caracteres negada e especificada pela colocagao de um 
acento circunflexo ( n ) como o primeiro caractere dentro do colchete esquerdo. A expressao regular 
/[ A abc]/ corresponde a qualquer caractere que nao seja a, b ou c. Classes de caracteres podem usar 
um hifen para indicar um intervalo de caracteres. Para corresponder a qualquer caractere minusculo 
do alfabeto latino, use / [ a - z ] /; e para corresponder a qualquer letra ou digito do alfabeto latino, use 
/[a-zA-ZO-9]/. 

Como certas classes de caracteres sao utilizadas comumente, a sintaxe de expressao regular de JavaS¬ 
cript inclui caracteres especiais e sequencias de escape para representar essas classes comuns. Por 
exemplo, \s corresponde ao caractere de espago, ao caractere de tabulagao e a qualquer outro carac- 
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tere Unicode de espago em branco; \S corresponde a qualquer caractere Unicode que nao seja espago 
em branco. ATabela 10-2 lista esses caracteres e resume a sintaxe de classe de caracteres. (Note que 
varias dessas sequencias de escape de classe de caracteres correspondem somente aos caracteres ASCII 
e nao foram estendidas para funcionar com caracteres Unicode. No entanto, voce pode definir expli- 
citamente suas proprias classes de caracteres Unicode; porexemplo, / [ \u 0400 -\u 04 FF ] / corresponde 
a qualquer caractere cirilico.) 

Tabela 10-2 Classes de caracteres de expressoes regulares 


Caractere Corresponde a 


[...] 

Qualquer caractere entre os colchetes. 


[*...] 

Qualquer caractere que nao esteja entre os colchetes. 

Qualquer caractere, exceto nova linha ou outro finalizador de linha Unicode. 

Qualquer caractere alfabetico em ASCII. Equivalente a [ a - zA- Z0- 9_]. 


\w 

Qualquer caractere que nao seja um caractere alfabetico em ASCII. Equivalente a [ ■ 

Qualquer caractere Unicode de espago em branco. 

*a-zA-Z0-9_]. 

\s 

Qualquer caractere Unicode que nao seja espago em branco. Note que \w e \S nao s 

ao a mesma coisa. 

\d 

Qualquer dfgito ASCII. Equivalente a [0-9]. 


\D 

Qualquer caractere que nao seja um dfgito ASCII. Equivalente a [ A 0- 9 ]. 


[\b] 

Um backspace literal (caso especial). 



Note que os escapes de classe de caracteres especiais podem ser usados dentro de colchetes. \s cor¬ 
responde a qualquer caractere de espago em branco e \d corresponde a qualquer dfgito; portanto, 
/[\s\d] / corresponde a qualquer caractere de espago em branco ou dfgito. Note que ha um caso 
especial. Conforme vamos ver posteriormente, o escape \b tern um significado especial. Contudo, 
quando usado dentro de uma classe de caracteres, ele representa o caractere de backspace. Assim, 
para representar um caractere de backspace literalmente em uma expressao regular, use a classe de 
caracteres com um unico elemento: / [\b]/. 

10.1.3 Repetigao 

Com a sintaxe de expressoes regulares que aprendeu ate aqui, voce pode descrever um numero de 
dois dfgitos como / \d\d/ e um numero de quatro dfgitos como /\d\d\d\d/. Mas nao ha qualquer 
maneira de descrever, por exemplo, um numero que possa ter qualquer quantidade de dfgitos ou 
uma string de tres letras, seguida de um dfgito opcional. Esses padroes mais complexos utilizam 
sintaxe de expressoes regulares que especifica quantas vezes um elemento de uma expressao regular 
pode ser repetido. 

Os caracteres que especificam repetigao sempre seguem o padrao no qual estao sendo aplicados. 
Como certos tipos de repetigao sao muito utilizados, existem caracteres especiais para representar 
esses casos. Por exemplo, + corresponde a uma ou mais ocorrencias do padrao anterior. A Tabela 10-3 
resume a sintaxe da repetigao. 
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Tabela 10-3 Caracteres de repetigao de expressoes regulares 

Caractere 

Significado 

{n,m} 

Corresponde ao item anterior pelo menos n vezes, masnaomaisdoquem vezes. 

{n,} 

Corresponde ao item anterior/) ou mais vezes. 

{ n) 

Corresponde a exatamente n ocorrencias do item anterior. 

? 

Corresponde a zero ou a uma ocorrencia do item anterior. Isto e, o item anterior e opcional. Equivalente a 
{0,1}. 

+ 

Corresponde a uma ou mais ocorrencias do item anterior. Equivalente a {l,}. 

Corresponde a zero ou mais ocorrencias do item anterior. Equivalente a {0,}. 


As linhas a seguir mostram alguns exemplos: 

/\d{2,4}/ // Corresponde a um valor entre dois e quatro digitos 

/\w{3}\d?/ // Corresponde a exatamente tres caracteres alfabeticos e um digito opcional 

/\s+java\s+/ // Corresponde a “java” com um ou mais espaqos antes e depois 

/[a(]*/ // Corresponde a zero ou mais caracteres que nao sejam parentese de abertura 

Cuidado ao usar os caracteres de repetigao * e ?. Como esses caracteres podem corresponder a zero 
instancias do que os precede, eles podem corresponder a nada. Por exemplo, a expressao regular /a*/ 
corresponde na verdade a string “bbbb”, pois a string content zero ocorrencias da letra a! 


10.1.3.1 Repeti^ao nao gananciosa 

Os caracteres de repetigao listados naTabela 10-3 correspondem quantas vezes possivel, enquanto 
ainda permitem que qualquer parte seguinte da expressao regular seja correspondida. Dizemos que 
essa repetigao e “gananciosa”. Tambem e possivel especificar que a repetigao deve ocorrer de forma 
nao gananciosa. Basta colocar um ponto de interrogagao apos o caractere (ou caracteres) de repeti¬ 
gao: ??, +?, *? ou mesmo {l,5}?. Por exemplo, a expressao regular la+l corresponde a uma ou mais 
ocorrencias da letra a. Quando aplicada na string “aaa”, ela corresponde a todas as tres letras. Mas / 
a+?/ corresponde a uma ou mais ocorrencias da letra a, correspondendo ao numero minimo de ca¬ 
racteres necessarios. Quando aplicado na mesma string, esse padrao corresponde apenas a primeira 
letra a. 

O uso de repetigao nao gananciosa nem sempre produz os resultados esperados. Considere o pa¬ 
drao /a+b/, que corresponde a uma ou mais letras a, seguidas da letra b. Quando aplicado na string 
“aaab”, ele corresponde a string inteira. Agora vamos usar a versao nao gananciosa: /a+?b/. Isso deve 
corresponder a letra b, precedida pelo menor numero de letras a possivel. Quando aplicada a mesma 
string “aaab”, voce poderia esperar que correspondesse a apenas uma letra a e a ultima letra b. Na 
verdade, contudo, esse padrao corresponde a string inteira, exatamente como sua versao gananciosa. 
Isso acontece porque a comparagao de padroes de expressoes regulares e feita localizando a primeira 
posigao na string na qual uma correspondence e possivel. Como uma correspondence e possivel a 
partir do primeiro caractere da string, as correspondences mais curtas que comegam em caracteres 
subsequentes nem mesmo sao consideradas. 
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10.1.4 Alterna^ao, agrupamento e references 

A gramatica de expressoes regulares inclui caracteres especiais para especificar alternativas, agrupar 
subexpressoes e fazer referenda a subexpressoes anteriores. O caractere | separa alternativas. Por 
exemplo, /ab|cd|ef/ corresponde a string “ab” ou a string “cd” ou a string “ef”. E /\d{S} | [a-z]{4}/ 
corresponde a tres digitos ou a quatro letras minusculas. 

Note que as alternativas sao consideradas da esquerda para a direita ate que uma correspondence 
seja encontrada. Se a alternativa da esquerda corresponded a da direita e ignorada, mesmo que pro- 
duza uma correspondence “melhor”. Assim, quando o padrao /a | ab / e aplicado a string “ab”, ele 
corresponde somente a primeira letra. 

Os parenteses tem varios propositos nas expressoes regulares. Um deles e agrupar itens separados de 
uma subexpressao para que possam ser traedos como uma unidade por |, *, +, ?, etc. Por exemplo, 
/java(script)?/ corresponde a “java”, seguido de “script” opcional. E /(ab|cd)+|ef / corresponde a 
string “ef” ou a uma ou mais repeti^oes das strings “ab” ou “cd”. 

Outro objetivo dos parenteses nas expressoes regulares e definir subpadroes dentro do padrao com- 
pleto. Quando uma expressao regular coincide com uma string procurada, e possivel extrair as partes 
da string que corresponderam a qualquer subpadrao em particular colocado nos parenteses. (Vamos 
ver ainda neste capitulo como essas correspondence de substrings sao obtidas.) Por exemplo, su- 
ponha que voce esteja procurando uma ou mais letras minusculas, seguidas de um ou mais digitos. 
Voce poderia usar o padrao / [a-z]+\d +/. Mas suponha que voce so se importe com os digitos no 
final de cada correspondence. Se voce colocar essa parte do padrao nos parenteses (/[a-z]+(\d+)/)> 
podera extrair os digitos de qualquer correspondence que encontrar, conforme explicado posterior- 
mente. 

Um uso relacionado de subexpressoes entre parenteses e permitir a referenda a uma subexpressao 
anterior, posteriormente na mesma expressao regular. Isso e feito colocando-se um ou mais digitos 
depois do caractere \. Os digitos se referem a posiQo da subexpressao entre parenteses dentro da ex¬ 
pressao regular. Por exemplo, \1 se refere a primeira subexpressao e \3 se refere a terceira. Note que, 
como as subexpressoes podem ser aninhadas dentro de outras, e a posiQo do parentese esquerdo que 
conta. Na expressao regular a seguir, por exemplo, a subexpressao aninhada ( [Ss]cript) e referida 
com \2: 

/([Jjjava([Ss]cript)?)\sis\s(fun\w*)/ 

Uma referenda a uma subexpressao anterior de uma expressao regular ndo se refere ao padrao usado 
para essa subexpressao, mas sim ao texto que correspondeu ao padrao. Assim, as reference podem 
ser usadas para impor a restri^ao de separar as partes de uma string que contenham exatamente os 
mesmos caracteres. Por exemplo, a expressao regular a seguir corresponde a zero ou mais caracteres 
entre aspas simples ou duplas. Contudo, ela nao exige que as aspas de abertura e fechamento corres- 
pondam (isto e, ambas aspas simples ou ambas duplas): 


Para exigir que as aspas correspondam, 


referenda: 
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O item \1 corresponde ao que a primeira subexpressao entre parenteses correspondeu. Nesse exem- 
plo, ele impoe a restrigao de que as aspas de fechamento devem corresponder as aspas de abertura. 
Essa expressao regular nao permite aspas simples dentro de strings com aspas duplas ou vice-versa. 
Nao e valido usar uma referencia dentro de uma classe de caracteres; portanto, voce nao pode escre- 

/{["■])[ni]*\i/ 

Ainda neste capitulo, voce vai ver que esse tipo de referencia a uma subexpressao entre parenteses e 
um recurso poderoso das operates de busca e substituigao de expressoes regulares. 

Tambem e possivel agrupar itens em uma expressao regular sem criar uma referencia numerada para 
esses itens. Em vez de simplesmente agrupar os itens dentro de (e ), inicie o grupo com (?: e finalize 
com ). Considere o padrao a seguir, por exemplo: 

/([]j]ava(?:[Ss]cript)?)\sis\s(fun\w*)/ 

Aqui, a subexpressao (? : [Ss]cript) e usada simplesmente para agrupamento, de modo que o ca- 
ractere de repetigao ? pode ser aplicado no grupo. Esses parenteses modificados nao produzem uma 
referencia; portanto, nessa expressao regular, \2 se refere ao texto correspondente a (fun\w*). 

ATabela 10-4 resume os operadores de al tern agio, agrupamento e referencia de expressoes regulares. 

Tabela 10-4 Caracteres de alternagao, agrupamento e referencia de expressoes regulares 
Caractere Significado 

Alternagao. Corresponde a subexpressao da esquerda ou a subexpressao da direita. 

(...) Agrupamento. Agrupa itens em uma unica unidade que pode ser usada com *, +, ?, |, etc. Lembra tambem dos 

caracteres que correspondem a esse grupo para uso com references posteriores. 

(?:...) Somente agrupamento. Agrupa itens em uma unica unidade, mas nao lembra dos caracteres que correspondem a 

\n Corresponde aos mesmos caracteres que coincidiram quando o grupo numero n foi encontrado pela primeira vez. 

Grupos sao subexpressoes dentro de parenteses (possivelmente aninhados). Os numeros de grupo sao atribuidos 
contando-se os parenteses esquerdos, da esquerda para a direita. Os grupos formados com (?: nao sao numerados. 


10.1.5 Especificando a posigao da correspondence 

Conforme descrito anteriormente, muitos elementos de uma expressao regular correspondem a um 
unico caractere em uma string. Por exemplo, \s corresponde a um unico caractere de espago em 
branco. Outros elementos de expressoes regulares correspondem as posigoes entre os caracteres, em 
vez dos caracteres em si. \b, por exemplo, corresponde a um limite de palavra - o limite entre um \w 
(caractere alfabetico em ASCII) e um \W (caractere nao alfabetico), ou o limite entre um caractere 
de palavra ASCII e o inlcio ou final de uma string . Elementos como \b nao especificam qualquer 
caractere a ser usado em uma string coincidente; o que eles especificam, no entanto, sao as posigoes 
validas em que uma correspondence pode ocorrer. As vezes esses elementos sao chamados de ancoras 
de expressao regular, pois ancoram o padrao em uma posigao especifica na string de busca. Os ele- 


Exceto dentro de uma classe de caracteres (colchetes), onde \b corresponde ao caractere de backspace. 
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memos de ancora mais comumente usados sao A , que prende o padrao ao inicio da string, e $, que 
ancora o padrao no final da string. 

Por exemplo, para corresponder a palavra “JavaScript” em uma linha sozinha, voce pode usar a 
expressao regular / A JavaScript$/. Se quiser procurar “Java” como uma palavra em si (nao como 
um prefixo, como em “JavaScript”), pode tentar o padrao /\sJava\s/, que exige um espago antes 
e depois da palavra. Mas existem dois problemas nessa solugao. Primeiro, ela nao corresponde a 
“Java” no inicio ou no final de uma string, mas somente se aparece com espago em um ou outro 
lado. Segundo, quando esse padrao encontra uma correspondence, a string coincidente que retorna 
tern espagos a esquerda e a direita, que nao e exatamente o desejado. Assim, em vez de corresponder 
aos caracteres de espago reais com \s, corresponda (ou ancore em) aos limites da palavra com \b. A 
expressao resultante e /\bJava\b/. O elemento \B ancora a correspondence em um local que nao e 
um limite de palavra. Assim, o padrao /\B[Ss]cript/ corresponde a “JavaScript” e a “postscript”, mas 
nao a “script” nem a “Scripting”. 

Expressoes regulares arbitrarias tambem podem ser usadas como condigoes de ancoragem. Se uma 
expressao e incluida entre os caracteres (? = e ), ela e uma declaragao de leitura antecipada, e especifi- 
ca que os caracteres inclusos devem corresponder, sem realmente corresponde-los. Por exemplo, para 
corresponder ao nome de uma linguagem de programagao comum, mas somente se ele for seguido 
por dois-pontos, voce poderia usar / [3 j]ava([Ss]cript) ?(?=\:)/. Esse padrao corresponde a palavra 
“JavaScript” em “JavaScript: The Definitive Guide”, mas nao corresponde a “Java” em “Java in a 
Nutshell”, pois isso nao e seguido por dois-pontos. 

Se, em vez disso, voce introduz uma declaragao com (?!, essa e uma declaragao de leitura antecipada 
negativa, que especifica que os caracteres seguintes nao devem corresponder. Por exemplo, /Java(?! 
Script)([A-Z]\w*)/ corresponde a “Java” seguido de uma letra maiuscula e qualquer numero de 
caracteres alfabeticos em ASCII adicionais, desde que “Java” nao seja seguido de “Script”. Isso cor¬ 
responde a “JavaBeans”, mas nao a “Javanese”, e corresponde a “JavaScrip”, mas nao a “JavaScript” 
nem a “JavaScripter”. 

ATabela 10-5 resume as ancoras de expressoes regulares. 

Tabela 10-5 Caracteres de ancora de expressoes regulares 


Caractere Significado 


$ 

Corresponde ao inicio da string e, em pesquisas de varias linhas, ao inicio de uma linha. 

Corresponde ao final da string e, em pesquisas de varias linhas, ao final de uma linha. 

\b 

Corresponde a um limite de palavra. Isto e, corresponde a posigao entre um caractere \w e um caractere 
\W ou entre um caractere \w e o inicio ou o final de uma string. (Note, entretanto, que [ \ b] corresponde 


a backspace.) 

\B 

Corresponde a uma posi^ao que nao e um limite de palavra. 

(?= P) 

Uma dedaragio de leitura antecipada positiva. Exige que os caracteres seguintes correspondam ao padrao 
p, mas nao indui esses caracteres na correspondence 

(?! P) 

Uma dedaragio de leitura antecipada negativa. Exige que os caracteres seguintes nao correspondam ao 
padraop. 
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10.1.6 Flags 

Ha um ultimo elemento da gramatica de expressoes regulares. Os flags de expressao regular especifi- 
cam regras de comparagao de padroes de alto rn'vel. Ao contrario do restante da sintaxe de expressao 
regular, os flags sao especificados fora dos caracteres /; em vez de aparecerem dentro das barras 
normais, eles aparecem apos a segunda barra. JavaScript suporta tres flags. O flag i especifica que a 
comparagao de padroes nao deve diferenciar letras maiusculas e mimisculas. O flag g especifica que 
a comparagao de padroes deve ser global - isto e, todas as correspondencias dentro da string pesqui- 
sada devem ser encontradas. O flag m faz comparagao de padroes no modo de varias linhas. Nesse 
modo, se a string a ser pesquisada content novas linhas, as ancoras A e $ correspondem ao inicio e 
ao final de uma linha, alem de corresponderem ao inicio e ao final de uma string. Por exemplo, o 
padrao / java$/im corresponde a “java” e tambem a “Java\nis fun”. 

Esses flags podem ser especificados em qualquer combinagao. Por exemplo, para fazer uma busca 
sem diferenciagao de letras maiusculas e minusculas pela primeira ocorrencia da palavra “java” (ou 
“Java”, “JAVA”, etc.), voce pode usar a expressao regular /\bjava\b/i. E para encontrar todas as ocor- 
rencias da palavra em uma string, pode adicionar o flag g: /\bjava\b/gi. 

ATabela 10-6 resume esses flags de expressao regular. Note que vamos ver mais sobre o flag g ainda 
neste capitulo, quando os metodos String e RegExp forem usados para fazer correspondencias. 

Tabela 10-6 Flags de expressoes regulares 

Caractere Significado 

i Faz correspondencia sem diferenciar letras maiusculas e minusculas. 

g Faz uma correspondencia global - isto e, localiza todas as correspondencias, em vez de parar depois da primeira. 

m Modo de varias linhas. a corresponde ao inicio da linha ou ao inicio da string, e $ corresponde ao final da linha ou ao 

final da string. 


10.2 Metodos de String para comparagao de padroes 

Ate agora, este capftulo discutiu a gramatica usada para criar expressoes regulares, mas nao examinou 
como essas expressoes regulares podem ser utilizadas em codigo JavaScript. Esta segao discute meto¬ 
dos do objeto String que utilizam expressoes regulares para fazer comparagao de padroes e operagoes 
de busca e substituigao. As segoes depois desta continuant a discussao sobre comparagao de padroes 
com expressoes regulares de JavaScript, falando sobre o objeto RegExp e seus metodos e proprie- 
dades. Note que a discussao a seguir e apenas uma visao geral dos varios metodos e propriedades 
relacionados as expressoes regulares. Como sempre, os detalhes completos podem ser encontrados 
na Parte III. 

As strings suportam quatro metodos que utilizam expressoes regulares. O mais simples e searchf). 
Esse metodo recebe uma expressao regular como argumento e retorna a posigao do caractere do 
inicio da primeira substring coincidente ou -1 se nao houver correspondencia. Por exemplo, a cha- 
mada a seguir retorna 4: 

"JavaScript".search(/script/i); 
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Se o argumento de search!) nao e uma expressao regular, ele e primeiramente convertido em uma, 
por passa-lo para a construtora RegExp, search () nao suporta pesquisas globais; ele ignora o flag g de 
seu argumento de expressao regular. 

O metodo replace!) executa uma opera?ao de busca e substitui^ao. Ele recebe uma expressao 
regular como primeiro argumento e uma string para substitui^ao como segundo argumento. O 
metodo procura correspondence com o padrao especifkado na string na qual e chamado. Se a 
expressao regular tern o flag g ativo, o metodo replace!) substitui todas as correspondence na 
string pela string para substitui?ao; caso contrario, substitui apenas a primeira correspondencia 
encontrada. Se o primeiro argumento de replace!) e uma string e nao uma expressao regular, o 
metodo procura essa string literalmente, em vez de converte-la em uma expressao regular com 
a construtora RegExp!), como acontece com search!). Como exemplo, voce pode usar replace!) 
como segue, para fornecer uma composi?ao uniforme de letras da palavra “JavaScript” por toda 
uma string de texto: 

// Independente de como seja composta, substitui pela composicao correta de letras 

//maiusculas e minusculas 

text.replace!/javascript/gi, "JavaScript"); 

Contudo, replace!) e mais poderoso do que isso. Lembre-se de que as subexpressoes colocadas entre 
parenteses de uma expressao regular sao numeradas da esquerda para a direita e de que a expressao 
regular lembra do texto a que cada subexpressao corresponde. Se um $ seguido de um digito aparece 
na string para substitui^ao, replace!) substitui esses dois caracteres pelo texto que corresponde a 
subexpressao especificada. Esse e um recurso muito util. Voce pode usa-lo, por exemplo, para substi- 
tuir aspas normais por aspas inglesas em uma string, simuladas com caracteres ASCII: 

// Uma cita^ao e composta de aspas, seguidas de qualquer numero de 
// caracteres que nao sao aspas (os quais lembramos), seguidos 
// de outras aspas. 
var quote = /"([ A "]*)"/g; 

// Substitui aspas normais por aspas inglesas, 

// deixando o texto da citacao (armazenado em $l) intacto. 
text.replace(quote, "'$ 1 '"); 

O metodo replace!) tern outros recursos importantes, os quais estao descritos na pagina de referen¬ 
da de String. replace!) na Parte III. Mais notadamente, o segundo argumento de replaceQ pode ser 
uma funipao que calcula dinamicamente a string para substitui^ao. 

O metodo match!) e o mais geral dos metodos de expressoes regulares de String. Ele recebe uma ex¬ 
pressao regular como unico argumento (ou converte seu argumento em uma expressao regular, pas- 
sando-o para a construtora RegExp! )) e retorna um array contendo os resultados da correspondencia. 
Se a expressao regular tern o flag g ativo, o metodo retorna um array com todas as correspondencias 
que aparecem na string. Por exemplo: 

"1 plus 2 equals 3".match(/\d+/g) // retorna ["l", "2", "3"] 

Se a expressao regular nao tern o flag g ativo, match!) nao faz uma pesquisa global; ele simplesmente 
procura a primeira correspondencia. Contudo, match () retorna um array mesmo quando nao faz 
uma pesquisa global. Nesse caso, o primeiro elemento do array e a string coincidente e quaisquer 
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elementos restantes sao as subexpressoes da expressao regular colocadas entre parenteses. Assim, se 
match() retorna um array a, a[0] contem a correspondence completa, a[i] contem a substring que 
correspondeu a primeira expressao colocada entre parenteses e assim por diante. Tra^ando um para- 
lelo com o metodo replace(), a[ n ] possui o conteudo de $ n. 


Por exemplo, considere a analise de um URL com o codigo a seguir: 


r url = /(\w+):\/\/([\w.]+)\/(\S*)/; 

r text = "Visit my blog at http://www.example.com/-david"; 
r result = text.match(url); 


suit != null) { 
r fullurl = resultfo]; 
r protocol = resultfl]; 
r host = result[2]; 
r path = result[3]; 


// Contem "http://www.example.com/-david" 
// Contem "http" 

// Contem "www.example.com" 

// Contem "-david" 


E interessante notar que passar uma expressao regular nao global para o metodo match () de uma 
string e o mesmo que passar a string para o metodo exec() da expressao regular: o array retornado 
tern as propriedades index e input, conforme descrito para o metodo exec() a seguir. 



O ultimo dos metodos de expressoes regulares do objeto String e split(). Esse metodo divide a 
string na qual e chamado em um array de substrings, usando o argumento como separador. Por 
exemplo: 

"123,456,789".split// Retorna ["123","456","789"] 


O metodo split () tambem pode receber uma expressao regular como argumento. Essa capacidade 
torna o metodo mais poderoso. Por exemplo, agora voce pode especificar um caractere separador que 
permita uma quantidade arbitraria de espa^os em branco em um ou outro lado: 

"1, 2, 3, 4, 5".split(/\s*,\s*/); // Retorna ["l","2","3","4","5"] 


O metodo split () tern outros recursos. Consulte a entrada String.split () na Parte III para ver os 
detalhes completos. 


10.3 0 objeto RegExp 

Conforme mencionado no inicio deste capitulo, as expressoes regulares sao representadas como 
objetos RegExp. Alem da construtora RegExpQ, os objetos RegExp suportam tres metodos e varias 
propriedades. Os metodos e propriedades de compara^ao de padroes de RegExp estao descritos nas 
duas proximas se^oes. 

A construtora RegExp () recebe um ou dois argumentos de string e cria um novo objeto RegExp. O 
primeiro argumento dessa construtora e uma string que contem o corpo da expressao regular - o 
texto que apareceria dentro de barras normais em uma expressao regular literal. Note que tanto as 
strings literals como as expressoes regulares usam o caractere \ para sequencias de escape; portanto, 
ao se passar uma expressao regular para RegExp () como uma string literal, deve-se substituir cada 
caractere \ por \\. O segundo argumento de Reg Exp () e optional. Se for fornecido, ele indica os flags 
da expressao regular. Deve ser g, i, m ou uma combina^ao dessas letras. 
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Por exemplo: 

// Encontra todos os numeros de circo digitos em uma string. Observe o duplo \\ nesse caso. 

var zipcode = new RegExp("\\d{5}", "g"); 

A construtora RegExpQ e util quando uma expressao regular esta sendo criada dinamicamente e, as- 
sim, nao pode ser representada com a sintaxe de expressao regular literal. Por exemplo, para procurar 
uma string inserida pelo usuario, uma expressao regular deve ser criada em tempo de execu^ao com 
RegExpQ. 

10.3.1 Propriedades de RegExp 

Cada objeto RegExp tern cinco propriedades. A propriedade source e uma string somente de leitura 
que contem o texto da expressao regular. A propriedade global e um valor booleano somente de 
leitura que especifica se a expressao regular tern o flag g. A propriedade ignoreCase e um valor boo¬ 
leano somente de leitura que especifica se a expressao regular tern o flag i. A propriedade multiline 
e um valor booleano somente de leitura que especifica se a expressao regular tern o flag m. A ultima 
propriedade e lastlndex, um inteiro de leitura/grava^ao. Para padroes com o flagg, essa propriedade 
armazena a posRao na string em que a proxima busca deve come^ar. Ela e usada pelos metodos 
execQ e testQ, descritos a seguir. 

10.3.2 Metodos de RegExp 

Os objetos RegExp definem dois metodos que executam operates de comparaQo de padroes; eles 
tem comportamento semelhante aos metodos de String descritos anteriormente. O principal meto- 
do de compara?ao de padroes de RegExp e execQ. Ele e semelhante ao metodo match() de String, 
descrito na Se^ao 10.2, exceto que e um metodo de RegExp que recebe uma string, em vez de um 
metodo de String que recebe uma expressao regular. O metodo execQ executa uma expressao regular 
na string especificada. Isto e, ele procura uma correspondence na string. Se nao encontra, ele retor- 
na null. No entanto, se encontra, ele retorna um array exatamente como o array retornado pelo me¬ 
todo matchQ para pesquisas nao globais. O elemento 0 do array contem a string que correspondeu 
a expressao regular e os elementos subsequentes do array contem as substrings que corresponderam 
a quaisquer subexpressoes colocadas entre parenteses. Alem disso, a propriedade index contem a 
posi?ao do caractere na qual a correspondence ocorreu e a propriedade input se refere a string que 
foi pesquisada. 

Ao contrario do metodo matchQ, execQ retorna o mesmo tipo de array, tenha a expressao regular o 
flag global g ou nao. Lembre-se de que matchQ retorna um array de correspondences quando e pas- 
sada uma expressao regular global. execQ, em contraste, sempre retorna uma unica correspondence 
e fornece in formates completas sobre essa correspondence. Quando execQ e chamado em uma 
expressao regular que tem o flag g, ele configura a propriedade lastlndex do objeto expressao regular 
com a posRao do caractere imediatamente apos a substring coincidente. Quando execQ e chamado 
uma segunda vez para a mesma expressao regular, ele inicia sua busca na posiQo de caractere indica- 
da pela propriedade lastlndex. Se execQ nao encontra uma correspondence, ele configura lastln¬ 
dex como 0. (Voce tambem pode configurar lastlndex como 0 a qualquer momento, o que deve ser 
feito ao se sair de uma pesquisa, antes de encontrar a ultima correspondence em uma string e iniciar 
a pesquisa de outra string com o mesmo objeto RegExp.) Esse comportamento especial permite 
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chamar execQ repetidamente para iterar por todas as correspondencias de expressao regular em uma 
string. Por exemplo: 

var pattern = /Java/g; 

var text = "JavaScript is more fun than Java!"; 

while((result = pattern.exec(text)) != null) { 
alert("Matched + result[0] + + 

" at position " + result.index + 

next search begins at " + pattern.lastlndex); 

} 

O outro metodo de RegExp e test(). test() e um metodo muito mais simples do que exec(). Ele 
recebe uma string e retorna true se a string contem uma correspondencia para a expressao regular: 

var pattern = /java/i; 

pattern.test("JavaScript"); // Retorna true 

Chamar testQ e equivalente a chamar execQ e retornar true se o valor de retorno de exec() nao for 
null. Devido a essa equivalence, o metodo testQ se comporta da mesma maneira que o metodo 
exec( ) quando chamado para uma expressao regular global: ele come^a a pesquisa da string especifi- 
cada na posi^ao determinada por lastlndex e, se encontra uma correspondencia, configura lastlndex 
com a posi?ao do caractere imediatamente apos a correspondencia. Assim, pode-se iterar por uma 
string usando o metodo testQ do mesmo modo como se faz com o metodo execQ. 

Os metodos de String searchQ, replaceQ e matchQ nao usam a propriedade lastlndex, como acon- 
tece com execQ e testQ. Na verdade, os metodos de String simplesmente configuram lastlndex 
como 0. Se voce utiliza execQ ou testQ em um padrao que tern o flag g ativo e esta pesquisando 
varias strings, deve localizar todas as correspondencias em cada string para que lastlndex seja confi- 
gurada como zero automaticamente (isso acontece quando a ultima busca falha) ou deve configurar 
a propriedade lastlndex como 0 explicitamente. Se voce esquecer de fazer isso, podera come^ar a 
pesquisar uma nova string em alguma posRao arbitraria dentro da string, em vez de come^ar no 
initio. Se sua expressao regular nao tern o flag g ativo, entao voce nao precisa se preocupar com nada 
disso, evidentemente. Lembre-se tambem de que em ECMAScript 5 cada avalia^ao de uma expres¬ 
sao regular literal cria um novo objeto RegExp com sua propria propriedade lastlndex e isso reduz o 
risco de usar acidentalmente um valor de lastlndex que“sobrou”. 




Capi'tulo 1 


Subconjuntos e 
extensoes de JavaScript 


Ate agora, este livro descreveu a linguagem JavaScript completa e oficial, padronizada por ECMA- 
Script 3 e ECMAScript 5. Este capi'tulo descreve subconjuntos e super-conjuntos de JavaScript. Os 
subconjuntos foram definidos, de modo geral, por questoes de seguranija: um script escrito usando 
apenas um subconjunto seguro da linguagem pode ser executado com seguranija, mesmo que seja 
proveniente de uma fonte nao confiavel, como um servidor de anuncios. A Se^ao 11.1 descreve 
alguns desses subconjuntos. 

O padrao ECMAScript 3 foi publicado em 1999, e decorreu uma decada antes que fosse atua- 
lizado para o ECMAScript 5, em 2009. Brendan Eicb, o criador de JavaScript, continuou a 
desenvolver a linguagem durante essa decada (a especifica^ao ECMAScript permite extensoes 
da linguagem explicitamente) e, com o projeto Mozilla, lan$ou as versoes de JavaScript 1.5, 1.6, 
1.7, 1.8 e 1.8.1 no Firefox 1.0, 1.5, 2, 3 e 3.5. Alguns dos recursos dessas extensoes de JavaScript 
foram codificados em ECMAScript 5, mas muitos permanecem nao padronizados. Espera-se 
que as futuras versoes de ECMAScript padronizem pelo menos alguns dos recursos restantes nao 
padronizados. 

O navegador Firefox suporta essas extensoes, bem como o interpretador JavaScript Spidermonkey 
em que o Firefox e baseado. O interpretador JavaScript baseado em Java do Mozilla, o Rhino, 
(consulte a Se^ao 12.1) tambem suporta a maioria das extensoes. Contudo, como essas extensoes 
da linguagem nao sao padronizadas, nao vao ser uteis para desenvolvedores da Web que necessitam 
de compatibilidade da linguagem entre todos os navegadores. Essas extensoes estao documentadas 
neste capi'tulo, pois: 

• sao muito poderosas; 

• podem se tornar padronizadas no futuro; 

• podem ser usadas para escrever extensoes do Firefox; 

• podem ser usadas em programa^ao com JavaScript no lado do servidor, quando o mecanismo 
de JavaScript subjacente e Spidermonkey ou Rhino (consulte a Se^ao 12.1). 

Apos uma se^ao preliminar sobre subconjuntos da linguagem, o restante deste capi'tulo descreve as 
extensoes. Como nao sao padronizadas, elas estao documentadas como tutorials, com menos rigor 
do que os recursos da linguagem descritos em outras partes do livro. 



Capi'tulo 11 Subconjuntos eextensoesde JavaScript 259 


11.1 Subconjuntos de JavaScript 

A maioria dos subconjuntos da linguagem e definida para permitir a execuqao segura de codigo nao 
confiavel. Ha um interessante subconjunto definido por diferentes motivos. Vamos abordar primei- 
ramente esse e depois vamos ver os subconjuntos seguros da linguagem. 

11.1.1 The Good Parts 

O livro JavaScript: The Good Parts (O’Reilly), de Douglas Crockford, descreve um subconjunto de 
JavaScript que consiste nas partes da linguagem que ele considera uteis. O objetivo desse subconjun¬ 
to e simplificar a linguagem, ocultar peculiaridades e imperfeiqoes e, basicamente, tornar a progra- 
maqao mais facil e os programas melhores. Crockford explica sua motivaqao: 

A maioria das linguagens de programa^ao contem partes boas e partes ruins. Descobri que podia ser um 
programador melhor usando somente as partes boas e evitando as ruins. 

O subconjunto de Crockford nao inclui as instruqoes with e continue nem a funqao eval(). Ele defi¬ 
ne funqoes usando apenas expressoes de definiqao de funqao e nao inclui a instruqao de definiqao de 
funqao. O subconjunto exige que os corpos dos laqos e condicionais sejam colocados entre chaves - 
ele nao permite que as chaves sejam omitidas se o corpo consistir em uma unica instruqao. Qualquer 
instruqao que nao termine com uma chave deve ser terminada com um ponto e vfrgula. 

O subconjunto nao inclui o operador vfrgula, os operadores bit a bit nem os operadores ++ e --. 
Tambem nao permite == e ! = por causa da conversao de tipo que fazem, exigindo, em vez disso, o 
uso de === e ! ==. 

Como JavaScript nao tern escopo de bloco, o subconjunto de Crockford restringe a instruqao var, 
exigindo que apareqa somente no nfvel superior de um corpo de funqao e que os programadores de- 
clarem todas as variaveis de uma funqao usando apenas uma instruqao var e como a primeira de um 
corpo de funqao. O subconjunto desestimula o uso de variaveis globais, mas isso e uma convenqao 
de codificaqao e nao uma restriqao real da linguagem. 

A ferramenta de verificaqao de qualidade de codigo online de Crockford (no endereqo http://jslint. 
com) contem uma opqao para impor a obediencia ao subconjunto The Good Parts. Alem de garantir 
que seu codigo utilize somente os recursos permitidos, a ferramenta JSLint tambem impoe regras de 
estilo de codificaqao, como o recuo correto. 

O livro de Crockford foi escrito antes que o modo restrito de ECMAScript 5 fosse definido, mas 
muitas das “partes ruins” de JavaScript que o autor procura desencorajar em seu livro sao proibidas 
pelo uso do modo restrito. Com a adoqao do padrao ECMAScript 5, a ferramenta JSLint agora exige 
que os programas incluam uma diretiva “use strict” quando a opqao “The Good Parts” e selecionada. 

11.1.2 Subconjuntos deseguran^a 

O subconjunto The Good Parts foi projetado por razoes esteticas e visando a uma maior produti- 
vidade do programador. Existe uma classe mais ampla de subconjuntos projetados com o objetivo 
de executar JavaScript nao confiavel com seguranqa, em um conteiner ou “caixa de areia” segura. 
Os subconjuntos seguros funcionam proibindo todos os recursos e APIs da linguagem que possam 
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permitir ao codigo escapar de sua caixa de areia e afetar o ambiente de execu^ao global. Cada sub- 
conjunto e acoplado a um verificador estatico que analisa o codigo para garantir que corresponda ao 
subconjunto. Como os subconjuntos da linguagem que podem ser verificados estaticamente tendem 
a ser muito restritivos, alguns sistemas de caixa de areia definem um subconjunto maior e menos 
restritivo, e adicionam uma etapa de transforma<jao de codigo que verifica se o codigo se ajusta ao 
subconjunto maior, o transforma para usar um subconjunto menor da linguagem e acrescenta veri- 
ficacjoes em tempo de execuQo quando a analise estatica do codigo nao e suficiente para garantir a 
seguran<ja. 

Para permitir que a seguranija de JavaScript seja verificada estaticamente, varios recursos precisam 
ser removidos: 

• eval() e a construtora FunctionQ sao proibidas em qualquer subconjunto seguro, pois per- 
mitem a execuijao de strings de codigo arbitrarias e essas strings nao podem ser analisadas 
estaticamente. 

• A palavra-chave this e proibida ou restrita, pois fun^oes (no modo nao restrito) podem acessar 
o objeto global por meio de this. Impedir o acesso ao objeto global e um dos principals obje- 
tivos de qualquer sistema de caixa de areia. 

• A instru^ao with e frequentemente proibida em subconjuntos seguros, pois torna mais dificil 
a verifica<jao de codigo estatico. 

• Certas variaveis globais nao sao permitidas em subconjuntos seguros. Em JavaScript do lado 
do cliente, o objeto janela do navegador tambem atua como objeto global, de modo que o 
codigo nao pode se referir ao objeto window. Da mesma forma, o objeto document no lado do 
cliente define metodos que permitem o controle completo do conteudo da pagina. Isso e po- 
der demais para dar a um codigo nao confiavel. Os subconjuntos seguros podem adotar duas 
estrategias diferentes para variaveis globais como document. Podem proibi-las totalmente e, em 
vez disso, definir uma API personalizada que o codigo da caixa de areia pode usar para acessar 
a parte limitada da pagina Web destinada a ele. Alternativamente, o “conteiner” no qual o 
codigo da caixa de areia e executado pode definir uma fachada ou objeto document substituto 
que implemente somente as partes seguras da API DOM padrao. 

• Certas propriedades e metodos especiais sao proibidos nos subconjuntos seguros, pois dao 
poder demais para o codigo da caixa de areia. Normalmente, isso inclui as propriedades 
caller e callee do objeto arguments (embora alguns subconjuntos nao permitam que o objeto 
arguments seja utilizado), os metodos call() e applyQ de fun (joes e as propriedades constructor 

e prototype. Propriedades nao padronizadas, como _proto _, tambem sao proibidas. Alguns 

subconjuntos colocam propriedades inseguras e globais na lista negra. Outros colocam, em 
uma lista de exceijoes, um conjunto especffico de propriedades reconhecidamente seguras. 

• Quando a expressao de acesso a propriedade e escrita usando o operador . a analise estatica e 
suficiente para impedir o acesso a propriedades especiais. Mas o acesso a propriedade com [] e 
mais dificil, pois expressoes de string arbitrarias dentro dos colchetes nao podem ser analisadas 
estaticamente. Por isso, os subconjuntos seguros normalmente proibem o uso de colchetes, 
a nao ser que o argumento seja um literal numerico ou uma string literal. Os subconjuntos 
seguros substituent os operadores [ ] por funtjoes globais para consultar e configurar proprieda- 
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des de objeto - essas fun^oes fazem verificafoes em tempo de execu^ao para garantir que nao 
sejam usadas a fim de acessar propriedades proibidas. 

Algumas dessas restrifoes, como a proibi^ao do uso de eval() e da instru^ao with, nao trazem pro- 
blemas para os programadores, pois esses recursos nao sao comumente usados na programa^ao com 
JavaScript. Outras, como a restrifao do uso de colchetes para acesso a propriedade, sao bastante 
onerosas e e af que entra em a<jao a tradu^ao de codigo. Um tradutor pode transformar automati- 
camente o uso de colchetes, por exemplo, em uma chamada de funijao que inclua verifica^oes em 
tempo de execu<;ao. Transformafoes semelhantes podem permitir o uso seguro da palavra-chave 
this. Contudo, ha um compromisso entre a seguran^a dessas verificanoes em tempo de execu^ao e a 
velocidade de execu^ao do codigo da caixa de areia. 

Varios subconjuntos seguros foram implementados. Embora uma descriijao completa de qualquer 
subconjunto esteja fora dos objetivos deste livro, vamos descrever brevemente alguns dos mais im- 
portantes: 

ADsafe 

O ADsafe ( http://adsafe.org ) foi um dos primeiros subconjuntos de seguran^a propostos. Foi 
criado por Douglas Crockford (que tambem definiu o subconjunto The Good Parts). O AD¬ 
safe conta apenas com verifica^ao estatica e utiliza o JSLint ( http://jslint.org ) como verificador. 
Ele proibe o acesso a maioria das variaveis globais e define uma variavel ADSAFE que da acesso 
a uma API segura, incluindo metodos DOM de proposito especial. O ADsafe nao e am- 
plamente utilizado, mas foi uma prova de conceito influente que teve impacto sobre outros 
subconjuntos seguros. 

dojox.secure 

O subconjunto dojox.secure ( http://www.sitepen.eom/blog/2008/08/01/secure-mashups-with-do- 
joxsecure/) e uma extensao do kit de ferramentas Dojo ( http://dojotoolkit.org) e foi inspirado no 
ADsafe. Assim como o ADsafe, e baseado na verificafao estatica de um subconjunto restritivo 
da linguagem. Ao contrario do ADsafe, ele permite o uso da API DOM padrao. Alem disso, 
inclui um verificador escrito em JavaScript, de modo que um codigo nao confiavel pode ser 
verificado dinamicamente antes de ser avaliado. 


Caja ( http://code.google.eom/p/google-cajaf) e o subconjunto seguro de codigo-fonte aberto do 
Google. O Caja (palavra espanhola que significa “caixa”) define dois subconjuntos da lingua- 
gem. O Cajita (“caixinha”) e um subconjunto reduzido, como aquele usado pelo ADsafe e 
pelo dojox.secure. Valija (“mala” ou “bagagem”) e uma linguagem muito mais ampla, parecida 
com o modo restrito normal de ECMAScript 5 (com a remo^ao de eval()). Caja tambem e o 
nome do compilador que transforma (ou “induz”) conteudo da Web (HTML, CSS, e codigo 
JavaScript) em modulos seguros que podem ser hospedados com seguran^a em uma pagina 
Web sem afetar a pagina como um todo ou outros modulos dela. 

O Cajafaz parte da API OpenSocial ( http://code.google.com/apis/opensocial/) e foi adotado pelo 
Yahoo! para uso em seus sites. O conteudo disponivel no portal http://my.yahoo.com, por exem¬ 
plo, e organizado em modulos Caja. 




262 Parte I JavaScript basica 


FBJS 

FBJS e a variante de JavaScript usada pelo Facebook ( http://facebook.com ) para permitir con- 
teudo nao confiavel nas paginas de perfil dos usuarios. O FBJS conta com transformagao de 
codigo para garantir a seguranga. O transformador insere verificanoes em tempo de execugao 
para impedir o acesso ao objeto global por meio da palavra-chave this. Alem disso, reno- 
meia todos os identificadores de nivel superior, adicionando um prefixo especifico do modulo. 
Qualquer tentativa de configurar ou consultar variaveis globais ou variaveis pertencentes a 
outro modulo e impedida gramas a essa renomeagao. Alem disso, as chamadas para eval() sao 
transformadas por esses prefixos de identificador em chamadas para uma fun910 inexistente. 
O FBJS Simula um subconjunto seguro da API DOM. 

Microsoft Web Sandbox 

O Web Sandbox da Microsoft ( http://websandbox.livelabs.com/) define um amplo subconjunto 
de JavaScript (mais HTML e CSS) e o torna seguro por meio da reescrita radical de codigo, 
efetivamente reimplementando uma maquina virtual JavaScript segura sobre JavaScript inse- 
gura. 

11.2 Constantes e variaveis com escopo 

Deixamos agora os subconjuntos para tras e passamos para as extensoes da linguagem. Em JavaScript 
1.5 e posteriores, pode-se usar a palavra-chave const para definir constantes. As constantes sao como 
as variaveis, exceto que as atribuigoes a elas sao ignoradas (a tentativa de alterar uma constante nao 
causa erro) e as tentativas de redeclara-las causam erros: 

const pi = 3.14; // Define uma constante e fornece a ela um valor. 

pi = 4 ; // Oualquer atribuicao futura a ela e ignorada silenciosamente. 

const pi =4; // E erro redeclarar uma constante. 

var pi = 4 ; // Isto tambem e erro. 

A palavra-chave const se comporta de forma muito parecida com a palavra-chave var: nao ha escopo 
de bloco e as constantes sao igadas para o inicio da definigao de fungao circundante. (Consulte a 
Segao 3.10.1.) 


Versoesde JavaScript 

Neste capitulo, quando nos referimos a um determinado numero de versao de JavaScript, estamos nos re- 
ferindo especificamente a versao do Mozilla da linguagem, conforme implementada nos interpretadores 
Spidermonkey e Rhino e no navegador Web Fi refox. 

Aqui, algumas das extensoes da linguagem definem novas palavras-chave (como let) e, para nao prejudi- 
car algum codigo ja existente que utilize essa palavra-chave, JavaScript exige que se solicite explicitamen- 
te a nova versao da linguagem para usar a extensao. Se voce esta usando Spidermonkey ou Rhino como 
um interpretador independente, pode especificar a versao da linguagem desejada com uma opgao de 
linha de comando ou chamando a fun^ao interna version(). (Ela espera 0 numero de versao vezes dez. 
Passe 170 para selecionar JavaScript 1.7 e permitir a palavra-chave let.) No Firefox, voce pode optar pelas 
extensoes da linguagem usando uma marca script, como segue: 

<script type="application/javascript; version=1.8"> 
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A falta de escopo de bloco para variaveis em JavaScript ha tempos e considerada uma deficiencia da 
linguagem, sendo que JavaScript 1.7 trata disso adicionando a palavra-chave let na linguagem. A 
palavra-chave const sempre foi reservada (mas nao utilizada) em JavaScript, de modo que as cons- 
tantes podem ser adicionadas sem danificar qualquer codigo ja existente. A palavra-chave let nao 
foi reservada; portanto, nao e reconhecida a nao ser que voce opte por utiliza-la explicitamente na 
versao 1.7 ou posterior. 

A palavra-chave let pode ser usada de quatro maneiras: 

• como uma declara?ao de variavel, como var; 

• em um la$o for ou for/in, como substituta para var; 

• como uma instru^ao de bloco, para definir novas variaveis e delimitar seu escopo explicita¬ 
mente; e 

• para definir variaveis cujo escopo e uma unica expressao. 

A forma mais simples de usar let e como uma substituta informal para var. As variaveis declaradas 
com var sao definidas por toda a fun^ao circundante. As variaveis declaradas com let sao definidas 
somente dentro do bloco circundante mais proximo (e qualquer bloco aninhado dentro dele, e cla- 
ro). Se voce declara uma variavel com let dentro do corpo de um la<jo, por exemplo, ela nao existe 
fora do la<jo: 

function oddsums(n) { 

let total = 0, result=[]; 
for(let x = 1 ; x <= n; x++) { 
let odd = 2*x-l; 
total += odd; 
result.push(total); 

} 

// Usar x ou odd aqui causaria 
return result; 

} 

oddsums(5); // Retorna [1,4,9,16,25] 

Observe que esse codigo tambem usa let como substituta para var no la$o for. Isso cria uma variavel 
cujo escopo e o corpo do la^o mais a condi^ao e as clausulas de incremento do la$o. let tambem 
pode ser usada da seguinte maneira em la^os for/in (e for each; consulte a Se^ao 11.4.1): 
o = {x:l,y:2}; 

for(let p in o) console.log(p); // Imprime x e y 

for each(let v in o) console.log(v); // Imprime 1 e 2 

console.log(p) // ReferenceError: p nao esta definida 

Ha uma diferenija interessante entre let usada como instru^ao de declara?ao e usada como inicia- 
lizadora de la^o. Usada como uma declara?ao, as expressoes inicializadoras de variavel sao avaliadas 
no escopo da variavel. Mas em um la?o for, a expressao inicializadora e avaliada fora do escopo da 
nova variavel. Isso so importa quando a nova variavel estiver ocultando uma nova variavel de mesmo 
nome: 

let x = l; 

for(let x = x + 1; x < 5; x++) 

console.log(x); // Imprime 2,3,4 


// Definida por toda a funcao 
// x e definida apenas no laco 
// odd definida apenas neste laco 


um ReferenceError 
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{ // Inicia um bloco para criar um novo escopo de variavel 

let x = x + 1 ; // x esta indefinido; portanto, x+1 e NaN 

console.log(x); // Imprime NaN 

} 

As variaveis declaradas com var existem em toda a funqao na qual sao declaradas, mas nao sao 
inicializadas ate que a instruqao var seja executada. Isto e, a variavel existe (ou seja, nao sera 
lanqado nenhum ReferenceError), mas vai ser undefined se voce usa-la antes da instruqao var. As 
variaveis declaradas com let sao semelhantes: se voce tenta utilizar uma variavel antes de sua 
instruqao let (mas dentro do mesmo bloco da instruqao let), a variavel vai existir, mas seu valor 
sera undefined. 

Observe que esse problema nao existe quando se usa let para declarar uma variavel de laqo - a sin- 
taxe simplesmente nao permite usar a variavel antes que ela seja inicializada. Existe outra maneira 
de usar let que evita o problema de utilizar variaveis antes de serem inicializadas. Uma instruqao de 
bloco let (em contraste com as instruqoes de declaraqao let mostradas anteriormente) combina um 
bloco de codigo com um conjunto de variaveis para o bloco e as expressoes de inicializaqao para essas 
variaveis. Nessa forma, as variaveis e suas inicializadoras sao colocadas dentro de parenteses e sao 
seguidas por um bloco de instruqoes dentro de chaves: 
let x=l, y=2; 

let (x=x+l,y=x+2) { // Note que estamos ocultando variaveis 

console.log(x+y); // Imprime 5 

}; 

console.log(x+y); // Imprime 3 

E importante entender que as expressoes inicializadoras de variavel de um bloco let nao fazem 
parte do bloco e sao interpretadas no escopo externo. No codigo anterior, estamos criando uma 
nova variavel x e atribuindo a ela um valor uma unidade maior do que o valor da variavel x 
existente. 

O ultimo uso da palavra-chave let e uma variante do bloco let, na qual uma lista de variaveis e 
inicializadoras colocadas entre parenteses e seguida por uma unica expressao, em vez de um bloco 
de instruqoes. Isso se chama expressao let e o codigo anterior poderia ser reescrito para utiliza-la, 
como segue: 

let x=l, y=2; 

console.log(let (x=x+l,y=x+2) x+y); // Imprime 5 

Alguma forma de const e let (nao necessariamente todas as quatro formas descritas aqui) provavel- 
mente sera inclufda em uma futura versao do padrao ECMAScript. 

11.3 Atribui^ao de desestrutura^ao 

O Spidermonkey 1.7 implementa um tipo de atribuiqao composta conhecida como atribuigao de 
desestruturagao. (Talvez voce tenha visto a atribuigao de desestruturaqao anteriormente, em Python 
ou na Ruby, por exemplo.) Em uma atribuigao de desestruturagao, o valor do lado direito do sinal 
de igualdade e um array ou objeto (um valor “estruturado”) e o lado esquerdo especifica um ou mais 
nomes de variavel usando uma sintaxe que imita a sintaxe de array e objeto literal. 
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Quando uma atribuipio de desestruturapio ocorre, um ou mais valores sao extrafdos (“desestrutura- 
dos”) do valor da direita e armazenados nas variaveis nomeadas da esquerda. Alem de seu uso com o 
operador de atribuipio normal, a atribuipio de desestruturapio tambem pode ser usada na inicializa- 
pio de variaveis recentemente declaradas com var e let. 

A atribuipio de desestruturapio e simples e poderosa ao trabalhar com arrays e e especialmente 
util com fun^oes que retornam arrays de valores. Contudo, ela pode se tornar confusa e complexa 
quando usada com objetos e objetos aninhados. Exemplos demonstrando usos simples e complexos 
aparecem a seguir. 



Aqui estao atribuipies de desestrumra?ao simples usando arrays de valores: 

let [x,y] = [1,2]; // 0 mesmo que let x=l, y=2 

[x,y] = [x+l,y+l]; // 0 mesmo que x = x + 1, y = y+1 

[x,y] = [y,x]; // Troca o valor das duas variaveis 

console.log([x,y]); // Imprime [3,2] 


Observe como a atribui^ao de desestruturapio torna facil trabalhar com fun^oes que retornam arrays 
de valores: 


// Converte coordenadas [x,y] em coordenadas polares [r,theta] 
function polar(x,y) { 

return [Math.sqrt(x*x+y*y), Math.atan2(y,x)]; 

} 

// Converte coordenadas polares em cartesianas 
function cartesian(r,theta) { 

return [r*Math.cos(theta), r*Math.sin(theta)]; 


let [r,theta] = polar(l.O, 1.0);// r=Math.sqrt(2), theta=Math.PI/4 
let [x,y] = cartesian(r,theta); // x=1.0, y=l.O 

O numero de variaveis a esquerda de uma atribuipio de desestruturaqao nao precisa corresponder 
ao numero de elementos do array a direita. As variaveis extras a esquerda sao configuradas como 
undefined e os valores extras a direita sao ignorados. A lista de variaveis a esquerda pode incluir vir- 
gulas extras para pular certos valores a direita: 

let [x,y] = [1]; // x = 1, y = undefined 

[x,y] = [1,2,3]; // x = 1, y = 2 

[,x,,y] = [1,2,3,4]; // x = 2, y = 4 

Nao ha sintaxe para atribuir todos os valores nao utilizados ou restantes (como um array) a uma. Na 
segunda linha de codigo acima, por exemplo, nao ha maneira de atribuir [2,3] ay. 

O valor de uma atribuipio de desestrutura?ao e a estrutura de dados completa do lado direito e nao 
os valores individuals extrafdos dela. Assim, e possfvel “encadear” atribuifoes, como segue: 

let first, second, all; 

all = [first,second] = [1,2,3,4]; // first=l, second=2, all=[l,2,3,4] 
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A atribui^ao de desestrutura^ao pode ser usada ate com arrays aninhados. Nesse caso, o lado esquer- 
do da atribui^ao deve ser semelhante a um array literal aninhado: 

let [one, [twoA, twoB]] = [l, [2,2.5], 3]; // one=l, twoA=2, twoB=2.5 

A atribui?ao de desestrutura?ao tambem pode ser executada quando o lado direito e um valor 
de objeto. Nesse caso, o lado esquerdo da atribuiqao e semelhante a um objeto literal: uma lista 
separada com vfrgulas e delimitada com chaves de pares contendo nome de propriedade e nome 
de variavel. O nome a esquerda de cada dois-pontos e um nome de propriedade e o nome a 
direita de cada dois-pontos e um nome de variavel. Cada propriedade nomeada e pesquisada 
no objeto do lado direito da atribui^ao e seu valor (ou undefined) e atribuido a variavel corres- 
pondente. Esse tipo de atribui?ao de desestrutura?ao pode ficar confuso, especialmente porque 
muitas vezes e tentador usar o mesmo identificador para nome de propriedade e de variavel. No 
exemplo a seguir, veja se voce entende que r, g e b sao nomes de propriedade e que red, green e 
blue sao nomes de variavel: 

let transparent = {r:0.0, g:0.0, b:0.0, a:1.0}; // Uma cor RCBA 

let {r:red, g:green, b:blue} = transparent; // red=0.0,green=0.0,blue=0.0 

O proximo exemplo copia fun (joes globais do objeto Math em variaveis, o que poderia simplificar um 
codigo que faija muitos calculos trigonometricos: 

// 0 mesmo que let sin=Math.sin, cos=Math.cos, tan=Math.tan 
let {sin:sin, cos:cos, tan:tan} = Math; 

Assim como a atribuiijao de desestrutura<jao pode ser usada com arrays aninhados, tambem pode ser 
usada com objetos aninhados. Na verdade, as duas sin taxes podem ser combinadas para descrever 
estruturas de dados arbitrarias. Por exemplo: 

// Uma estrutura de dados aninhada: um objeto que contem um array de objetos 
let data = { 

name: "destructuring assigment", 
type: "extension", 

impl: [{engine: "spidermonkey", version: 1.7}, 

{engine: "rhino", version: 1.7}] 

}; 


// Usa atribuicao de desestruturacao para extrair quatro valores da estrutura de dados 
let ({name:feature, impl: [{engine:impll, version:vl},{engine:impl2}]} = data) { 
console.log(feature); // Imprime "destructuring assigment" 

console.log(impll); // Imprime "spidermonkey" 

console.log(vl); // Imprime 1.7 

console.log(impl2); // Imprime "rhino" 

} 


Note que atribuiijoes de desestruturacao aninhadas como essa podem tornar seu codigo mais dificil 
de ler, em vez de simplifica-lo. Contudo, ha uma regularidade interessante que pode ajuda-lo a en- 
tender os casos complexos. Pense primeiramente em uma atribuicao normal (valor unico). Depois 
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que a atribui^ao e feita, pode-se pegar o nome da variavel do lado esquerdo da atribui^ao e utiliza-lo 
como uma expressao em seu codigo, que sera avaliada com o valor atribuido a ela. Na atribui^ao de 
desestruturaqao, dissemos que o lado esquerdo usa uma sintaxe como a do array literal ou do objeto 
literal. Mas note que, depois de feita a atribui^ao de desestrutura^ao, o codigo semelhante a um 
array literal ou a um objeto literal do lado esquerdo vai funcionar como um array literal ou objeto li¬ 
teral valido em qualquer lugar de seu codigo: todas as variaveis necessarias foram definidas, de modo 
que pode-se recortar e colar o texto a esquerda do sinal de igualdade e utiliza-lo como um array ou 
valor de objeto em seu codigo. 

11.4 Itera^ao 

As extensoes de JavaScript do Mozilla introduzem novas tecnicas de itera^ao, incluindo o la^o for 
each e iteradores e geradores estilo Python. Eles estao detalhados nas subse^oes a seguir. 

11.4.1 0 lago for/each 

O la^o for/each e uma nova instru^ao de repeti^ao padronizada pela E4X. A E4X (ECMAScript 
para XML) e uma extensao da linguagem que permite as marcas XML aparecerem literalmente em 
programas JavaScript e que adiciona sintaxe e API para opera^ao em dados XML. A E4X nao foi 
amplamente implementada em navegadores Web, mas e suportada por JavaScript 1.6 do Mozilla 
(lan^ado no Lirefox 1.5). Nesta se^ao, vamos abordar somente o la<jo for/each e seu uso com objetos 
que nao sao XML. Consulte a Se^ao 11.7 para ver detalhes sobre o restante da E4X. 

O la^o for each e muito parecido com o la^o for/in. Contudo, em vez de iterar pelas propriedades 
de um objeto, ele itera pelos valores dessas propriedades: 

let o = {one: 1, two: 2, three: 3} 

for(let p in o) console.log(p); // for/in: imprime 'one', 'two', 'three' 

for each (let v in o) console.log(v); // for/each: imprime 1, 2, 3 

Quando usado com um array, o la^o for/each itera pelos elementos (em vez dos indices) do la^o. 
Normalmente, ele os enumera em ordem numerica, mas isso nao e padronizado nem obrigatorio: 

a = ['one', 'two', 'three']; 

for(let p in a) console.log(p); // Imprime os indices de array 0, l, 2 

for each (let v in a) console.log(v); // Imprime elementos de array 'one', 'two', 

'three' 

Note que o la^o for/each nao se limita aos elementos de um array - ele enumera o valor de qualquer 
propriedade enumeravel do array, incluindo metodos enumeraveis herdados pelo array. Por isso, 
normalmente nao e recomendado usar o la^o for/each com arrays. Isso e especialmente verdade 
para codigo que precisa interagir com versoes JavaScript anteriores a ECMAScript 5, em que nao e 
possivel tornar nao enumeraveis propriedades e metodos definidos pelo usuario. (Consulte a Seqao 
7.6 para ver uma discussao semelhante em rela?ao ao la?o for/in.) 
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11.4.2 Iteradores 

JavaScript 1.7 aprimora o la^o for/in com comportamento mais geral. O hqo for/in de JavaScript 
1.7 e mais como o de Python e permite iterar em qualquer objeto iteravel. Para se entender isso, sao 
necessarias algumas definifoes. 

Um iterador e um objeto que permite itera^ao sobre uma cole^ao de valores e mantem o estado que 
for necessario para monitorar a “posi^ao” atual no conjunto. 

Um iterador deve ter um metodo nextQ. Cada chamada de next() retorna o proximo valor da 
cole^ao. A funcQo counter() a seguir, por exemplo, retorna um iterador que retorna inteiros sucessi- 
vamente maiores a cada chamada de next(). Observe o uso do escopo de funcQo como uma closure 
que contem o estado atual do contador: 

// Uma funcao que retorna um iterator; 
function counter(start) { 

let nextValue = Math.round(start); // Estado privado do iterator 

return { next: functionQ { return nextValue++; }}; // Retorna o obj iterator 

} 

let serialNumberGenerator = counter(iOOO); 

let snl = serialNumberGenerator.next(); // 1000 

let sn2 = serialNumberGenerator.next(); // 1001 

Os iteradores que trabalham em colefoes finitas lan^am Stoplteration a partir de seus metodos 
next() quando nao existem mais valores para iterar. Stoplteration e uma propriedade do objeto 
global em JavaScript 1.7. Seu valor e um objeto normal (sem propriedades proprias), reservado para 
esse proposito especial de terminar iterafoes. Note, em especial, que Stoplteration nao e uma fun^ao 
construtora como TypeError() ou RangeErrorQ. Aqui, por exemplo, esta um metodo rangelterQ 
que retorna um iterador que itera os inteiros em determinado intervalo: 

// Uma funcao que retorna um iterador de um intervalo de inteiros 
function rangelter(first, last) { 

let nextValue = Math.ceil(first); 

next: functionQ { 

if (nextValue > last) throw Stoplteration; 
return nextValue++; 

} 

}; 

} 


// Uma iteracao estranha usando o 
let r = rangelter(l,5); 
while(true) { 
try { 

console.log(r.nextQ); 


iterador de intervalo. 

// Obtem um objeto iterador 
// Agora o utiliza em um la?o 

// Tenta chamar seu metodo nextQ 


} 
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catch(e) { 

if (e == Stoplteration) break; // Sai do laco em Stoplteration 
else throw e; 

} 

} 

Observe como e estranho usar um objeto iterador em um la^o onde o metodo Stoplteration deve 
ser manipulado explicitamente. Por causa disso, nao utilizamos objetos iteradores diretamente com 
muita frequencia. Em vez disso, usamos objetos iteraveis. Um objeto iteravel representa um con- 
junto de valores que podem ser iterados. Um objeto iteravel deve definir um metodo chamado 
_iterator_() (com dois sublinhados: no infcio e no fim do nome) o qual retorna um objeto itera¬ 
dor para o conjunto. 

O la$o for/in de JavaScript 1.7 foi estendido para trabalhar com objetos iteraveis. Se o valor a direita da 

palavra-chave in e iteravel, entao o la$o for/in vai chamar seu metodo _iterator_() automaticamen- 

te para obter um objeto iterador. Em seguida, ele chama o metodo next() do iterador, atribui o valor 
resultante a variavel de la$o e executa o corpo do la$o. O la$o for/ in trata da exce^ao Stoplteration em 
si e nunca e visivel em seu codigo. O codigo a seguir define uma fiin^ao range () que retorna um objeto 
iteravel (nao um iterador) que representa um intervalo de inteiros. Observe como e muito mais facil 
usar um la$o for/in com um intervalo iteravel do que usar um la$o while com um iterador de intervalo. 
// Retorna um objeto iteravel que representa um intervalo inclusivo de numeros 
function range(min,max) { 

return { // Retorna um objeto representando um intervalo. 

get min() { return min; }, // Os limites do intervalo sao imutaveis. 

get max() { return max; }, // e armazenados na closure, 

includes: function(x) { // Os intervalos podem testar a participacao como membro. 
return min <= x && x <= max; 

}, 

toString: functionQ { // Os intervalos tern uma representaqao de string, 

return "[" + min + + max + "]"; 

h 

_iterator_: functionQ { // Os inteiros em um intervalo sao iteraveis. 

let val = Math.ceil(min); // Armazena a posicao atual na closure, 

return { // Retorna um objeto iterador. 

next: functionQ { // Retorna o proximo inteiro no intervalo. 

if (val > max) // Se passamos do final, paramos, 

throw Stoplteration; 

return val++; // Caso contrario, retorna o proximo e incrementa. 

} 

}; 

} 

}; 

} 

// Aqui esta como podemos iterar em um intervalo: 

for(let i in range(l,10)) console.log(i); // Imprime numeros de 1 a 10 

Note que, embora seja necessario escrever um metodo_iterator_() e larujar uma exce$ao 

Stoplteration para criar objetos iteraveis e seus iteradores, nao e preciso (no uso normal) chamar o 
metodo_iterator_() nem tratar da exce^ao Stoplteration - o la?o for/in faz isso para voce. Se, 
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por algum motivo, voce quiser obter um objeto iterador de um objeto iteravel explicitamente, cha- 
me a fun^ao Iterator(). (lterator() e uma fun^ao global nova de JavaScript 1.7.) Se o argumento 
dessa funpio e um objeto iteravel, ela simplesmente retorna o resultado de uma chamada para o 

metodo_iterator_(), mantendo seu codigo mais limpo. (Se voce passar um segundo argumento 

para IteratorQ, ela passara esse argumento para o metodo_ iterator_().) 

No entanto, ha outro proposito importante para a funpio Iterator( ). Quando ela e chamada em um 

objeto (ou array) que nao tern um metodo_iterator_(), retorna um iterador iteravel personaliza- 

do para o objeto. Cada chamada do metodo next() desse iterador retorna um array de dois valores. 
O primeiro elemento do array e um nome de propriedade e o segundo e o valor da propriedade 
nomeada. Como esse objeto e um iterador iteravel, voce pode usa-lo com um lap) for/in, em vez de 
chamar seu metodo next() diretamente. Isso significa que e possivel usar a funpio IteratorQ junto 
com atribuipio de desestruturapio para iterar convenientemente pelas propriedades e valores de um 
objeto ou array: 

for(let [k,v] in Iterator({a:l,b:2})) // Itera chaves e valores 
console.log(k + “=" + v); // Imprime "a=l" e "b=2" 


Existem duas outras caracteristicas importantes do iterador retornado pela funpio IteratorQ. Pri- 
meiramente, ele ignora propriedades herdadas e so itera propriedades “proprias”, o que normalmen- 
teeo desejado. Segundo, se voce passar true como segundo argumento para IteratorQ, o iterador 
retornado vai iterar somente os nomes de propriedade e nao os valores de propriedade. O codigo a 
seguir demonstra essas duas caracteristicas: 


o = {x:l, y:2} 

Object.prototype.z = 3; 

for(p in o) console.log(p); 

for(p in IteratorQ, true)) console.log(p); 


// Um objeto com duas propriedades 
// Agora todos os objetos herdam z 
// Imprime "x", "y" e "z" 

// Imprime somente "x" e "y" 


11.4.3 Geradores 

Os geradores sao um recurso em JavaScript 1.7 (emprestado de Python) que usa a nova palavra-cha- 
ve yield, isso significa que o codigo que os utiliza deve optar explicitamente pela versao 1.7, confor- 
me descrito na SeQo 11.2. A palavra-chave yield e usada em uma funpio e, de modo semelhante a 
return, retorna um valor da fun?ao. No entanto, a diferenpi entre yield e return e que uma funpio 
que gera um valor para sua chamadora mantem seu estado interno, de modo que pode ser retomada. 
Essa capacidade de ser retomada torna yield uma ferramenta perfeita para escrever iteradores. Os ge¬ 
radores sao um recurso muito poderoso da linguagem, mas podem ser diffceis de entender no infcio. 
Vamos come?ar com algumas definifoes. 

Qualquer funpio que utilize a palavra-chave yield (mesmo que yield nao possa ser alcanpida) e 
uma fungdo geradora. As fun^oes geradoras retornam valores com yield. Elas podem usar a instru- 
fao return sem valor algum, para terminar antes de chegarem no fim do corpo da funQo, mas nao 
podem usar return com um valor. A nao ser pelo uso de yield e por essa restri^ao a respeito do uso 
de return, nao da para distinguir as fun^oes geradoras das funfoes normais: elas sao declaradas com 
a palavra-chave function, o operador typeof retorna “funpio” e elas herdam de Function.prototype, 
exatamente como as fun pies normais. Entretanto, quando chamada, uma fun pro geradora se com- 
porta de maneira completamente diferente de uma funpio normal: em vez de executar o corpo da 
funpio geradora, a chamada retorna um objeto gerador. 
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Um gerador e um objeto que representa o estado atual da execupio de uma funpio geradora. Ele de¬ 
fine um metodo next( ) que retoma a execupio da funQo geradora e permite que continue a executar 
ate que sua proxima instrupio yield seja encontrada. Quando isso acontece, o valor da instrupio 
yield na funpio geradora se torna o valor de retorno do metodo next() do gerador. Se uma funpio 
geradora retorna (executando uma instrupio return ou atingindo o fim de seu corpo), o metodo 
next() do gerador lanpi Stoplteration. 

O fato de os geradores terem um metodo next() que pode lanpir Stoplteration deve tornar claro 
que eles sao objetos iteradores . Na verdade, eles sao iteradores iteraveis, ou seja, podem ser usados 
com lapis for/in. O codigo a seguir demonstra como e facil escrever funpies geradoras e iterar pelos 
valores que elas geram: 

// Define uma funcao geradora para iterar por um intervalo de inteiros 
function range(min, max) { 

for(let i = Math.ceil(min); i <= max; i++) yield i; 

} 

// Chama a funqao geradora para obter um gerador e, entao, o itera. 
for(let n in range(3,8)) console.log(n);// Imprime numeros 3 a 8. 

As fimfoes geradoras nunca precisam retornar. Na verdade, um exemplo canonico e o uso de um 
gerador para gerar os numeros de Fibonacci: 

// Uma funcao geradora que gera a sequencia de Fibonacci 
function fibonacci() { 
let x = 0, y = l; 
while(true) { 

[x,y] = [y>x+y]; 

} 

} 

// Chama a funqao geradora para obter um gerador. 
f = fibonacci(); 

// Usa o gerador como iterador, imprimindo os 10 primeiros numeros de Fibonacci. 
for(let i = 0; i < 10; i++) console.log(f.next()); 

Observe que a funcao geradora fibonacci() nunca retorna. Por isso, o gerador que ela retorna nunca 
vai lanpir Stoplteration. Em vez de usa-lo como um objeto iteravel em um lap) for/in e fazer lap) 
para sempre, o utilizamos como um iterador e chamamos seu metodo next() dez vezes, explicita- 
mente. Depois que o codigo anterior e executado, o gerador f ainda mantem o estado de execupio 
da funcao geradora. Se nao vamos mais utiliza-lo, podemos liberar esse estado, chamando o metodo 
closeQ de f: 
f .closeQ; 

Quando o metodo close de um gerador e chamado, a funcao geradora associada termina como se 
houvesse uma instruQo return no local onde sua execu^ao foi suspensa. Se esse local e dentro de um 
ou mais blocos try, qualquer clausula finally e executada antes que closeQ retorne. closeQ nunca 
tern um valor de retorno, mas se um bloco finally lanpi uma exce^ao, ela se propaga da chamada 
para closeQ. 


As vezes os geradores sao chamados de “iteradores geradores” para diferencia-Ios claramente das funjoes geradoras pelas 
quais sao criados. Neste capitulo, vamos usar o termo “gerador” com o significado de “iterador gerador”. Em outras fontes, 
voce podera encontrar a palavra “gerador" usada para se referir tamo as fun^oes geradoras como aos iteradores geradores. 
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Os geradores muitas vezes sao uteis para processamento sequencial de dados - elementos de uma lista, 
linhas de texto, simbolos de um analisador lexico, etc. Os geradores podem ser encadeados de maneira 
semelhante a um pipeline* de comandos shell em sistemas estilo Unix. O interessante dessa estrategia e 
que ela e preguigosa: os valores sao “extraidos” de um gerador (ou pipeline de geradores) conforme neces- 
sario, em vez de serem processados em varias passagens. O Exemplo 11-1 demonstra isso. 

Exemplo 11-1 Um pipeline de geradores 

// Um gerador para gerar as linhas da string s uma por vez. 

// Note que nao usamos s.splitQ, pois isso processaria a string 
// inteira de uma vez, alocando um array, e queremos ser preguicosos. 
function eachline(s) { 
let p; 

while((p = s.indexOf('\n')) != -l) { 
yield s.substring(0,p); 
s = s.substring(p+l); 

} 

if (s.length > 0) yield s; 

} 


// Uma funcao geradora que gera f(x) para cada elemento x da iteravel i 
function map(i, f) { 

for(let x in i) yield f(x); 

} 


// Uma funcao geradora que gera os elementos de i para os quais f(x) e verdadeira 
function select(i, f) { 
for(let x in i) { 

if (f(x)) yield x; 

} 

} 


// Comeca com uma string de texto a processar 

let text = " #comment \n \n hello \nworld\n quit \n unreached \n"; 

// Agora constroi um pipeline de geradores para processa-la. 

// Primeiramente, decompoe o texto em linhas 
let lines = eachline(text); 

// Em seguida, corta o espa^o em branco do inicio e do fim de cada linha 
let trimmed = map(lines, function(line) { return line.trimQ; }); 

// Por fim, ignora linhas em branco e comentarios 
let nonblank = select(trimmed, function(line) { 
return line.length > 0 && line[0] != "#" 

}>; 


// Agora extrai as linhas cortadas e filtradas do pipeline e as processa, 
// parando quando vemos a linha "quit”, 
for (let line in nonblank) { 
if (line === "quit") break; 
console.log(line); 

} 


* N. de R.T.: Em ciencia da computapio, o termo refere-se a uma tecnica de processamento em que uma serie de instru^oes 
sao enviadas a CPU e ficam aguardando recursos, em uma fila de memoria, para serem executadas em sequencia. E seme- 
lhante a uma linha de produqao em uma fabrica. 
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Normalmente, os geradores sao inicializados ao serem criados: os valores passados para a fun^ao 
geradora sao a unica entrada recebida pelo gerador. Entretanto, e possfvel fornecer entrada adicional 
em um gerador em execuqao. Todo gerador tem um metodo send( ), o qual funciona para reiniciar o 
gerador como faz o metodo next(). A diferen^a e que um valor pode ser passado para send() e esse 
valor se torna o valor da expressao yield. (Na maioria das fun^oes geradoras que nao aceitam entrada 
adicional, a palavra-chave yield parece uma instru^ao. Na verdade, contudo, yield e uma expressao e 
tem um valor.) Alem de next() e send(), outro modo de reiniciar um gerador e com throw(). Se esse 
metodo e chamado, a expressao yield lanfa o argumento de throwQ como uma exce^ao. O codigo a 
seguir demonstra isso: 


// Uma funcao geradora que conta a partir de um valor inicial 
// Usa send() no gerador para especificar um incremento. 

// Usa throw("reset") no gerador para zerar o valor inicial. 

// Este e apenas um exemplo; esse uso de throwQ e um estilo ] 
function counter(initial) { 

let nextValue = initial; // Comeca coi 

while(true) { 
try { 

let increment = yield nextValue; 
if (increment) 

nextValue += increment; 
else nextValue++; 


} 

catch (e) { 

if (e==="reset") 

nextValue = initial; 
else throw e; 

} 


Gera um valor e obtem o incremento 
Se enviamos um incremento... 

...entao o utiliza. 

Caso contrario, incrementa por 1 


/ Chegamos aqui se alguem chama 
/ throwQ no gerador 


let c = counter(lO); 
console.log(c.nextQ); 
console.log(c.send(2)); 
console.log(c.throw("reset")); 


// Cria o gerador em 10 
// Imprime 10 
// Imprime 12 
// Imprime 10 


11.4.4 Array comprehension 

Array comprehension e outro recurso que JavaScript 1.7 emprestou da Python. Trata-se de uma 
tecnica para inicializar os elementos de um array a partir dos (ou com base nos) elementos de 
outro array ou objeto iteravel. A sintaxe dos array comprehensions e baseada na notafao ma- 
tematica de definifao dos elementos de um conjunto, ou seja, expressoes e clausulas ficam em 
lugares diferentes do que os programadores JavaScript esperariam que estivessem. Esteja certo, no 
entanto, que nao e dificil para se acostumar com a sintaxe incomum e apreciar o poder dos array 
comprehensions. 

Aqui esta uma inclusao de array que utiliza a funcao rangeQ desenvolvida anteriormente, para ini¬ 
cializar um array para conter o quadrado dos niimeros pares ate 100: 
let evensquares = [x*x for (x in range(0,10)) if (x % 2 === 0)] 
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Isso e aproximadamente equivalente as cinco linhas a seguir: 

let evensquares = []; 
for(x in range(0,10)) { 
if (x % 2 === 0) 

evensquares.push(x*x); 

} 

Em geral, um array comprehension e como segue: 

[ expressao for ( variavel in objeto ) if ( condicao ) ] 

Observe que existem tres partes principals dentro dos colchetes: 

• Um laq:o for/in ou for/each sem corpo. Essa parte de um comprehension compreende uma 
vaiiavel (ou, com atribui^ao de desestrutura^ao, varias variaveis) que aparece a esquerda da 
palavra-chave in e um objeto (que pode ser um gerador, um objeto iteravel ou um array, por 
exemplo) a direita de in. Embora nao haja corpo de la$o apos o objeto, essa parte do array 
comprehension executa uma itera^ao e atribui sucessivos valores a variavel especificada. Note 
que nem a palavra-chave var nem let e permitida antes do nome da variavel - um let esta 
implicito e a variavel usada no array comprehension nao e visivel fora dos colchetes e nao 
sobrescreve variaveis de mesmo nome ja existentes. 

• Uma palavra-chave if e uma expressao condicional entre parenteses podem aparecer apos o 
objeto que esta sendo iterado. Se estiver presente, essa condicional e usada para filtrar os valo¬ 
res iterados. A condicional e avaliada depois que cada valor e produzido pelo la^o for. Se for 
false, esse valor e pulado e nada e adicionado no array para esse valor. A clausula if e optional; 
se for omitida, a inclusao de array se comportara como se if (true) estivesse presente. 

• Uma expressao, que aparece antes da palavra-chave for. Essa expressao pode ser considerada 
como o corpo do la$o. Depois que um valor e retornado pelo iterador e atribuido a variavel, 
e se esse valor passa no teste da condicional, essa expressao e avaliada e o valor resultante e 
inserido no array que esta sendo criado. 

Aqui estao alguns exemplos mais concretos para esclarecer a sintaxe: 

data = [2,3,4, -5]; // Um array de numeros 

squares = [x*x for each (x in data)]; // 0 quadrado de cada um: [4,9,16,25] 

// Agora tira a raiz quadrada de cada elemento nao negativo 
roots = [Math.sqrt(x) for each (x in data) if (x >= 0)] 

// Agora vamos criar arrays de nomes de propriedade de um objeto 
o = {a:l, b:2, f: function(){}} 
let allkeys = [p for (p in o)] 

let ownkeys = [p for (p in o) if (o.hasOwnProperty(p))] 

let notfuncs = [k for ([k,v] in Iterator(o)) if (typeof v !== "function")] 


11.4.5 Expressoes geradoras 

Em JavaScript 1.8 , pode-se substituir os colchetes em torno de uma inclusao de array por paren¬ 
teses, para produzir uma expressao geradora. Uma expressao geradora e como um array comprehen- 

As expressoes geradoras nao eram suportadas no Rhino quando este livro estava sendo produzido. 
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sion (a sintaxe dentro dos parenteses e exatamente igual a sintaxe dentro dos colchetes), mas seu 
valor e um objeto gerador, em vez de um array. As vantagens de usar uma expressao geradora em 
vez de um array comprehension sao que voce obtem avaliaqao preguiqosa — os calculos sao efetu- 
ados conforme o necessario, em vez de todos de uma vez - e pode trabalhar com sequencias po- 
tencialmente infinitas. A desvantagem de usar um gerador em vez de um array e que os geradores 
so permitem acesso sequencial aos seus valores e nao acesso aleatoric. Ou seja, os geradores nao 
podem ser indexados como os arrays: para obter o »-esimo valor, deve-se iterar por todos os n-1 
valores que vem antes dele. 

Anteriormente neste capftulo, escrevemos uma fun^ao map() como segue: 

function map(i, f) { // Um gerador que gera f(x) para cada elemento de i 
for(let x in i) yield f(x); 

} 

As expressoes geradoras tornam desnecessario escrever ou usar essa fun^ao map(). Para obter um novo 
gerador h que gera f(x) para cada x gerado por um gerador g, basta escrever o seguinte: 

let h = (f(x) for (x in g)); 

Na verdade, dado o gerador eachlineQ do Exemplo 11-1, podemos cortar espa^os em branco e 
filtrar comentarios e linhas em branco, como segue: 

let lines = eachline(text); 

let trimmed = (l.trim() for (1 in lines)); 

let nonblank = (1 for (1 in trimmed) if (1.length > 0 && 1[0]!='#')); 

11.5 Fun0es abreviadas 

JavaScript 1.8 introduz um atalho (chamado “closures de expressao”) para escrever fun^oes simples. 
Se uma funqao avalia uma unica expressao e retorna seu valor, pode-se omitir a palavra-chave return 
e tambem as chaves em torno do corpo da funqao, e simplesmente colocar a expressao a ser avaliada 
imediatamente apos a lista de argumentos. Aqui estao alguns exemplos: 

let succ = function(x) x+1, yes = function() true, no = functionQ false; 

Isso e apenas uma conveniencia: as fun(;oes definidas dessa maneira se comportam exatamente como 
as funqoes definidas com chaves e a palavra-chave return. No entanto, essa sintaxe abreviada e espe- 
cialmente conveniente ao se passar funqoes para outras fun^oes. Por exemplo: 

// Classifica um array em ordem numerica inversa 
data.sort(function(a,b) b-a); 

// Define uma funcao que retorna a soma dos quadrados de um array de dados 
let sumOfSquares = function(data) 

Array.reduce(Array.map(data, function(x) x*x), function(x,y) x+y); 




3 O Rhino nao imple 
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11.6 Clausulas catch multiplas 

Em JavaScript 1.5, a instru^ao try/catch foi estendida para permitir varias clausulas catch. Para usar 
esse recurso, coloque apos o nome do parametro da clausula catch a palavra-chave if e uma expres- 
sao condicional: 

try { 

// varios tipos de excecao podem ser lancados aqui 

} 

catch(e if e instanceof ReferenceError) { 

// Trata de erros de referencia aqui 

} 

catch(e if e === "quit") { 

// Trata da string "quit" lanqada 

} 

catch(e if typeof e === "string") { 

// Trata de qualquer outra string lancada aqui 

} 

catch(e) { 

// Trata de todo o resto aqui 

} 

finally { 

// A clausula finally funciona normalmente 

} 

Quando ocorre uma excecao, cada clausula catch e tentada por sua vez. A excecao e atribufda ao 
parametro da clausula catch nomeado e a condicional e avaliada. Se for verdadeira, o corpo dessa 
clausula catch e avaliado e todas as outras clausulas catch sao puladas. Se uma clausula catch nao 
tem condicional, ela se comporta como se a condicional if fosse true e e sempre disparada se 
nenhuma clausula antes dela foi disparada. Se todas as clausulas catch tem uma condicional e 
nenhuma dessas condicionais e verdadeira, a excecao se propaga sem ser capturada. Observe que, 
como as condicionais ja aparecem dentro dos parenteses da clausula catch, elas nao sao obrigadas 
a ser incluidas diretamente nos parenteses, como aconteceria em uma instrufao if normal. 

11.7 E4X: ECMAScript para XML 

ECMAScript para XML, mais conhecida como E4X, e uma extensao padronizada de JavaScript que 
define varios recursos poderosos para processar documentos XML. E4X e suportada pelo Spider- 
monkey 1.5 e pelo Rhino 1.6. Como nao e amplamente suportada pelos fornecedores de navegador, 
talvez seja melhor considerar E4X como uma tecnologia para mecanismos de script baseados em 
Spidermonkey ou Rhino no lado do servidor. 


4 E4X e definida pelo padrao ECMA-357. A especificaqao oficial encontra-se no endere^o http://www.ecma-intemational. 
org!'publications!standards!Ecma-357. htm. 
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E4X representa um documento XML (ou um elemento ou atributo de um documento XML) como 
um objeto XML e representa fragmentos de XML (mais do que um elemento XML nao inclufdo em 
um parente comum) com o objeto estreitamente relacionado XMLList. Vamos ver diversas maneiras 
de criar e trabalhar com objetos XML por toda esta se^ao. Os objetos XML sao um tipo fundamen- 
talmente novo de objeto, com (conforme veremos) sintaxe E4X de proposito muito especial para 
suporta-los. Como voce sabe, o operador typeof retorna “objeto” para todos os objetos padrao de 
JavaScript que nao sejam funijoes. Os objetos XML sao tao diferentes dos objetos normais de JavaS¬ 
cript quanto as fun^oes, e o operador typeof retorna “xml”. E importante entender que os objetos 
XML nao tern rela^ao com os objetos DOM (Document Object Model) utilizados em JavaScript 
do lado do cliente (consulte o Capi'tulo 15). O padrao E4X define recursos opcionais para conver- 
sao entre as representa?6es E4X e DOM de documentos e elementos XML, mas o Lirefox nao os 
implementa. Esse e outro motivo pelo qual pode ser melhor considerar E4X como uma tecnologia 
do lado do servidor. 

Esta seqao apresenta um rapido tutorial sobre E4X, mas nao tenta documenta-la amplamente. Em 
especial, os objetos XML e XMLList tern varios metodos que nao sao mencionados aqui (tambem 
nao sao abordados na se^ao de referenda). Os leitores que quiserem usar E4X precisarao consultar a 
especifica^ao para uma documenta^ao definitiva. 

E4X define bastante sintaxe nova da linguagem. O que mais se destaca na nova sintaxe e que a 
marca^ao XML se torna parte da linguagem JavaScript e e possivel incluir literals XML como os 
seguintes diretamente no codigo JavaScript: 

// Cria um objeto XML 
var pt = 

<periodictable> 

celement id="l"xname>Hydrogen</namex/element> 
celement id="2"xname>Helium</namex/element> 
celement id="3"xname>Lithium</namex/element> 

</periodictable>; 

// Adiciona um novo elemento na tabela 

pt.element += celement id="4"xname>Beryllium</namex/element>; 

A sintaxe de literal XML de E4X usa chaves como caracteres de escape, o que permite colocar ex- 
pressoes JavaScript dentro de codigo XML. Esta, por exemplo, e outra maneira de criar o elemento 
XML que acabamos de mostrar: 

pt = <periodictablex/periodictable>; // Comeca com a tabela vazia 

var elements = ["Hydrogen", "Helium", "Lithium"]; // Elementos a adicionar 

// Cria marcacoes XML usando conteudo de array 
for(var n = 0; n < elements.length; n++) { 

pt.element += celement id={n+i}xname>{elements[n]}</namex/element>; 

} 
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Alem dessa sintaxe literal, voce tambem pode trabalhar com XML analisada a partir de strings. O 
codigo a seguir adiciona outro elemento na tabela periodica: 

pt.element += new XML('celement id="5"><name>Boron</namex/element>'); 

Quando trabalhar com fragmentos de XML, use XMLListQ em vez de XML(): 

pt.element += new XMLList('celement id="6"xname>Carbon</namex/element>' + 

'celement id="7"xname>Nitrogen</namex/element>'); 

Uma vez que se tenha um documento XML definido, E4X define uma sintaxe intuitiva para acessar 
seu conteudo: 

var elements = pt.element; // Avaliado em uma lista de todas as marcacoes <element> 

var names = pt.element.name; // Uma lista de todas as marcacoes <name> 

var n = namesfo]; // "Hydrogen": conteudo da marcacao <name> 0. 

E4X tambem acrescenta nova sintaxe para se trabalhar com objetos XML. O operador .. e o opera- 
dor descendente - ele pode ser usado no lugar do operador de acesso a membro . normal: 

// Aqui esta outro modo de obter uma lista de todas as marcaqoes <name> 
var names2 = pt..name; 

E4X tern ate um operador curinga: 

// Obtem todos os descendentes de todas as marcacoes <element>. 

// Esta e ainda outra maneira de obter uma lista de todas as marcacoes <name>. var 
names3 = pt.element.*; 

Os nomes de atributo sao diferenciados dos nomes de marcacao em E4X com o uso do caractere @ 
(uma sintaxe emprestada da XPath). Por exemplo, o valor de um atributo pode ser consultado como 
segue: 


// Oual e o numero atomico do Helio? 
var atomicNumber = pt.element[l].@id; 

O operador curinga para nomes de atributo e @*: 

// Uma lista de todos os atributos de todas as marcacoes <element> 
var atomicNums = pt.element.®*; 

E4X contem tambem uma sintaxe poderosa e muito concisa para filtrar uma lista usando uma ex- 
pressao de predicado arbitraria: 

// Comeca com uma lista de todos os elementos e a filtra para 
// que inclua somente aqueles cujo atributo id seja < 3 
var lightElements = pt.element.(@id < 3); 

// Comeca com uma lista de todas as marcacoes <element> e filtra para que inclua somente 
// aquelas cujos nomes comecam com "B". Entao, faz uma lista das marcaqoes <name> 

// de cada uma das marcaqoes <element> restantes. 

var bElementNames = pt.element.(name.charAt(O) == 'B').name; 
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O la<jo for/each que vimos anteriormente neste capftulo (consulte a Se<jao 11.4.1) geralmente e util, 
mas foi definido pelo padrao E4X para iterar por listas de marca^oes e atributos XML. Lembre-se 
de que for/each e como o la^o for/in, exceto que, em vez de iterar pelas propriedades de um objeto, 
itera pelos valores das propriedades de um objeto: 

// Imprime os nomes de cada elemento da tabela periodica 
for each (var e in pt.element) { 
console.log(e.name); 

} 

// Imprime os numeros atomicos dos elementos 
for each (var n in pt.element.@*) console.log(n); 

As expressoes de E4X podem aparecer no lado esquerdo de uma atribui^ao. Isso permite que mar- 
cates e atributos ja existentes sejam alterados e que novas marca^oes e atributos sejam adicionados: 
// Modifica a marcacao <element> de Hydrogen para adicionar um novo atributo 
// e um novo elemento filho, para que apareca como segue: 

// 

// celement id="i" symbol="H"> 

// <name>Hydrogen</name> 

// <weight>1.00794</weight> 

// </element> 

// 

pt.element[0].@symbol = "H"; 
pt.element[o].weight = 1.00794; 

Remover atributos e marca?6es tambem e facil com o operador delete padrao: 
delete pt.elementjo].@symbol; // exclui um atributo 
delete pt.. weight; // exclui todas as marcacoes <weight> 

E4X e projetada de modo que seja possivel fazer as manipulates de XML mais comuns usando 
a sintaxe da linguagem. Ela tambem define metodos que podem ser chamados em objetos XML. 
Aqui, por exemplo, esta o metodo insertChildBefore(): 
pt.insertChildBefore(pt.element[l], 

celement id=''i"xname>Deuterium</name></element>); 

E4X reconhece espafo de nomes e inclui sintaxe da linguagem e APIs para trabalhar com namespa¬ 
ces XML: 

// Declara o espaqo de nomes padrao usando uma instruqao "default xml namespace": 
default xml espaco de nomes = "http://www.w3.org/1999/xhtml"; 

// Aqui esta um documento xhtml que tambem contem algumas marcacoes svg: 
d = <html> 

<body> 

This is a small red square: 

<svg xmlns="http://www.w3.org/2000/svg" width="lO" height="lO"> 
erect x="0" y="0" width=''iO” height="iO" fill="red"/> 

</svg> 

</body> 

</html> 

// 0 elemento body e seu espaco de nomes uri e seu nome local 
var tagname = d.body.nameQ; 
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var bodyns = tagname.uri; 

var localname = tagname.localName; 

// Selecionar o elemento <svg> e mais complicado, pois nao esta no 
// espa$o de nomes padrao. Assim, cria um objeto Namespace para svg e usa o 
// operador :: para adicionar um namespace em um nome de marcacao 
var svg = new Namespace('http://www.w3.org/2000/svg'); 
var color = d..svg::rect.@fill // "red" 



Capi'tulo 12 

JavaScript do lado do servidor 


Os capftulos anteriores abordaram a linguagem JavaScript basica em detalhes e estamos para 
iniciar a Parte II do livro, que explica como JavaScript e incorporada em navegadores Web e 
aborda a ampla API JavaScript do lado do cliente. JavaScript e a linguagem de programaqao da 
Web e a maior parte do codigo JavaScript e escrita para navegadores Web. Mas JavaScript e uma 
linguagem de uso geral rapida e competente, nao havendo motivos para que nao possa ser usada 
em outras tarefas de programaqao. Assim, antes de passarmos para JavaScript do lado do cliente, 
vamos ver rapidamente duas outras incorporates de JavaScript. O Rhino e um interpretador de 
JavaScript baseado em Java que fornece ao programas JavaScript acesso a API Java inteira. O Rhi¬ 
no e abordado na Seqao 12.1. O Node e uma versao do interpretador JavaScript V8 do Google, 
com vinculos de baixo nivel para a API POSIX (Unix) - arquivos, processos, fluxos, soquetes, 
etc. — e enfase especifica em E/S assincrona, ligaqao em rede e HTTP. O Node e abordado na 
Seqao 12.2. 

O titulo deste capitulo diz que ele fala sobre JavaScript “do lado do servidor”, sendo que o Node e o 
Rhino sao ambos em geral usados para criar ou fazer scripts de servidores. Mas a expressao “do lado 
do servidor” tambem pode signiflcar “algo fora do navegador Web”. Os programas Rhino podem 
criar interfaces graflcas com o usuario com a estrutura Swing da linguagem Java. E o Node pode 
executar programas JavaScript que manipulam arquivos como os scripts de shell. 

Este capitulo e breve, destinado apenas a destacar algumas maneiras de usar JavaScript fora dos 
navegadores Web. Ele nao tenta abordar o Rhino ou o Node de forma abrangente e as APIs 
discutidas aqui nao sao abordadas na seqao de referenda. Obviamente, este capitulo nao pode 
documentar a plataforma Java nem a API POSIX; portanto, a seqao sobre Rhino presume certa 
familiaridade com Java e a seqao sobre Node presume algum conhecimento de APIs Unix de 
baixo nivel. 

12.1 Scripts Java com Rhino 

O Rhino e um interpretador JavaScript escrito em Java e projetado para tornar facil escrever progra¬ 
mas JavaScript que alavancam o poder das APIs da plataforma Java. O Rhino faz automaticamente 
a conversao de primitivas JavaScript em primitivas Java e vice-versa; portanto, scripts JavaScript 
podem configurar e consultar propriedades Java e chamar metodos Java. 
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Obtendoo Rhino 

O Rhino e software livre do Mozilla. Voce pode baixar uma copia no enderego http://www.mozilla.org/ 
rhino/. 0 Rhino versao 1,7r2 implementa ECMAScript 3, alem de varias extensoes da linguagem descritas 
no Capitulo 11.0 Rhino e um software maduro e novas versoes nao sao langadas com frequencia. Quando 
este livro estava sendo produzido, uma versao de pre-langamento do 1.7r3 estava dispomvel no reposito- 
rio de codigo-fonte e indufa uma implementagao parcial de ECMAScript 5. 

0 Rhino e distribuido como um arquivo compactado JAR. Inicie-o com uma linha de comando como a 
seguinte: 

java -jar rhinol_7R2/js.jar piogiama.js 

Se voce omitir piogiama.js, o Rhino vai iniciar um shell interativo, o qual e util para testar programas 
simples ede uma linha. 


O Rhino define varias fungoes globais importantes que nao fazem parte de JavaScript basica: 

a prompt do rhino para mais 

print(x); // A funcao global print imprime na console 

version(l70); // Diz ao Rhino que queremos recursos da linguagem JS 1.7 

load(filenamej...); // Carrega e executa um ou mais arquivos de codigo JavaScript 

readFile(file); // Le um arquivo de texto e retorna seu conteudo como uma string 

readllrl(url); // Le o conteudo textual de um URL e retorna como uma string 

spawn(f); // Executa f() ou carrega e executa o arquivo f em uma nova thread 

runCommand (cmd,[args...]); // Executa um comando de sistema com zero ou mais args de 
//linha de comando 
quit() // Faz o Rhino encerrar 


Observe a funcao printQ: vamos usa-la nesta segao em lugar de console.log(). O Rhino representa 
pacotes e classes Java como objetos JavaScript: 

// Global Packages e a raiz da hierarquia de pacotes Java 
Packages.any.package.name // Oualquer pacote do CLASSPATH Java 

java.lang // Global java e um atalho para Packages.java 

javax.swing // E javax e um atalho para Packages.javax 


// Classes: acessadas como propriedades de pacotes 
var System = java.lang.System; 
var JFrame = javax.swing.JFrame; 

Como os pacotes e classes sao representados como objetos JavaScript, voce pode atribuf-los a varia- 
veis para dar-lhes nomes mais curtos. Mas tambem pode importa-los mais formalmente, se quiser: 

var ArrayList = java.util.ArrayList; // Cria um nome mais curto para uma classe 
importClass(java.util.HashMap); // 0 mesmo que: var HashMap = java.util.HashMap 


// Importa um pacote (de forma preguicosa) com importPackageQ. 

// Nao importa java.lang: muitos conflitos de nome com globais de JavaScript. 
importPackage(java.util); 
importPackage(java.net); 
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// Outra tecnica: passa qualquer numero de classes e pacotes para JavaImporter() 

// e usa o objeto que retorna em urna instruqao with 

var guipkgs = JavaImporter(java.awt, java.awt.event, Packages.javax.swing); 
with (guipkgs) { 

/* Classes como Font, ActionListener e JFrame definidas aqui */ 

} 

As classes Java podem ser instanciadas com new, exatamente como as classes em JavaScript: 

// Objetos: instancia classes Java com new 

var f = new java.io.File('7tmp/test"); // Vamos usar esses objetos a seguir 
var out = new java.io.FileWriter(f); 

O Rhino permite que o operador instanceof de JavaScript funcione com objetos e classes Java: 
f instanceof java.io.File // => verdadeiro 

out instanceof java.io.Reader // => falso: e um Writer, nao urn Reader 
out instanceof java.io.Closeable// => verdadeiro: Writer implementa Closeable 

Como voce pode ver, nos exemplos anteriores de instancia?ao de objeto, o Rhino permite que valo- 
res sejam passados para construtoras Java e que o valor de retorno dessas construtoras seja atribuido 
a variaveis JavaScript. (Observe a conversao de tipo implicita feita pelo Rhino nesse exemplo: a 
string JavaScript “/type/test” e convertida automaticamente em um valor java. lang. String de Java.) 
Os metodos Java sao muito parecidos com as construtoras Java e o Rhino permite que os programas 
JavaScript chamem metodos Java: 

// Os metodos estaticos Java funcionam como funqoes de JavaScript 

java.lang.System.getProperty("java.version") // Retorna a versao de Java 

var isDigit = java.lang.Character.isDigit; // Atribui metodo estatico a variavel 

isDigit("v") // => verdadeiro: Algarismo arabico 2 

// Chama metodos de instancia dos objetos Java f e out criados anteriormente 

out.write("Flello World\n"); 

out.closeQ; 

var len = f.lengthQ; 

O Rhino tambem permite que codigo JavaScript consulte e configure os campos estaticos de classes 
Java e os campos de instancia de objetos Java. As classes Java frequentemente evitam a definRao de 
campos publicos, favorecendo metodos getter e setter. Quando existem metodos getter e setter, o 
Rhino os expoe como propriedades de JavaScript: 

// Le um campo estatico de uma classe Java 
var stdout = java.lang.System.out; 

// 0 Rhino mapeia metodos getter e setter em propriedades unicas de JavaScript 
f.name // => "/tmp/test": chama f.getNameQ 

f.directory // => falso: chama f.isDirectoryQ 

A linguagem Java permite metodos sobrecarregados que tenham o mesmo nome, mas assinaturas 
diferentes. Normalmente, o Rhino consegue descobrir qual versao de um metodo se quer chamar, 
com base no tipo dos argumentos passados. Em alguns momentos, e preciso identificar um metodo 
especificamente pelo nome e pela assinatura: 

// Supoe que o objeto Java o tern um metodo chamado f que espera um int ou 
// um float. Em JavaScript, deve-se especificar a assinatura explicitamente: 
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o['f(int)'](S); // Chama o metodo int 

o['f(float)'](Math.PI); // Chama o metodo float 

Um la^o for/in pode ser usado para iterar pelos metodos, campos e propriedades de classes e objetos 
Java: 

importClass(java.lang.System); 

for(var m in System) print(m); // Imprime os membros estaticos de java.lang.System 

for(m in f) print(m); // Imprime os membros de instancia de java.io.File 

// Note que voce nao pode enumerar as classes em um pacote dessa maneira 
for (c in java.lang) print(c); // Isto nao funciona 

O Rhino permite que programas JavaScript obtenham e configurem os elementos de arrays Java como se 
fossem arrays JavaScript. Os arrays Java nao sao iguais aos arrays de JavaScript, evidentemente: eles tem 
comprimento fixo, seus elementos sao tipados e eles nao tem metodos de JavaScript, como slice(). Nao 
existe uma sintaxe JavaScript natural que o Rhino possa estender para permitir que programas JavaScript 
criem novos arrays Java; portanto, e preciso fazer isso usando a c\asse.java.lang.reflect.Array. 

// Cria um array de 10 strings e um array de 128 bytes 

var words = java.lang.reflect.Array.newlnstance(java.lang.String, 10); 

var bytes = java.lang.reflect.Array.newlnstance(java.lang.Byte.TYPE, 128); 

// Uma vez criados os arrays, voce pode usa-los exatamente como os arrays de JavaScript: 
for(var i = 0; i < bytes.length; i++) bytes[i] = i; 

A programa^ao com Java em geral envolve implementar interfeces. Isso e especialmente comum em pro- 
grama^ao de GUI*, onde cada rotina de tratamento de evento deve implementar uma interface recep- 
tora de eventos. Os exemplos a seguir demonstram como se implementa receptores de evento em Java: 
// Interfaces: implementa interfaces como segue: 
var handler = new java.awt.event.FocusListener({ 

focusCained: function(e) { print("got focus"); }, 
focusLost: function(e) { print("lost focus"); } 

}); 


// Estende classes abstratas da mesma maneira 
var handler = new java.awt.event.WindowAdapter({ 

windowclosing: function(e) { java.lang.System.exit(o); } 

}); 


// Ouando uma interface tem apenas um metodo, voce pode simplesmente usar uma fun^ao em 
// seu lugar 

button.addActionListener(function(e) { print("button clicked"); }); 

// Se todos os metodos de uma interface ou classe abstrata tem a mesma assinatura, 

// entao voce pode usar uma unica funcao como implementacao e o Rhino 
// passara o nome do metodo como ultimo argumento 
frame.addWindowListener(function(e, name) { 

if (name === "windowclosing") java.lang.System.exit(0); 

}); 


* N. de R.T.: GUI e o acronimo para o termo ingles "Graphical User Interfaces", ou Interface Grafica com o Usuario, em 
portugues. 
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// Se precisar de um objeto que implemente varias interfaces, use JavaAdapter: 
var o = new JavaAdapter(java.awt.event.ActionListener, java.lang.Runnable, { 
run: function() {}, // Implementa Runnable 

actionPerformed: function(e) {} // Implementa ActionListener 

}); 

Quando um metodo Java lanfa uma exce^ao, o Rhino a propaga como uma exce^ao de JavaScript. 
Voce pode obter o objeto Java java. lang. Exception original por meio da propriedade javaException 
do objeto Error de JavaScript: 
try { 

java.lang.System.getProperty(null); // null nao e um argumento valido 

} 

catch(e) { // e e a excecao JavaScript 

print(e.javaException); // ela empacota java.lang.NullPointerException 

} 

Uma ultima observa?ao sobre a conversao de tipo do Rhino e necessaria aqui. O Rhino converte 
automaticamente numeros e booleanos primitivos e o valor null conforme for necessario. O tipo 
char da linguagem Java e tratado como um numero JavaScript, pois JavaScript nao tern um tipo 
caractere. As strings JavaScript sao convertidas automaticamente em strings Java, mas (e isso pode 
ser um obstaculo) as strings Java deixadas como objetos java. lang. String nao sao convertidas de volta 
para strings JavaScript. Considere esta linha do codigo anterior: 
var version = java.lang.System.getProperty("java.version"); 

Apos a chamada desse codigo, a variavel version contem um objeto java.lang.String. Normalmente, 
isso se comporta como uma string JavaScript, mas existem diferenfas importantes. Primeiramente, 
uma string Java tern um metodo length(), em vez de uma propriedade length. Segundo, o operador 
typeof retorna “objeto” para uma string Java. Nao e possivel converter uma string Java em uma string 
JavaScript chamando seu metodo toStringQ, pois todos os objetos Java tern seu proprio metodo 
toString() Java que retorna java. lang. String. Para converter um valor Java em uma string, passe-o 
para a fumjao JavaScript String(): 

var version = String(java.lang.System.getProperty("java.version")); 

12.1.1 Exemplode Rhino 

O Exemplo 12-1 e um aplicativo Rhino simples que demonstra muitos dos recursos e tecnicas 
descritos anteriormente. O exemplo usa o pacote de GUI javax.swing, o pacote de liga^ao em rede 
java.net, o pacote de E/S de streaming java, io e recursos de multithreading da linguagem Java para 
implementar um aplicativo gerenciador de downloads simples que baixa URLs em arquivos locais e 
exibe o andamento do download. A Figura 12-1 mostra o aplicativo com dois downloads pendentes. 



Figura12-1 Uma GUI criada < 


Rhino. 
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Exemplo 12-1 Um aplicativo gerenciador de downloads com o Rhino 

* Um aplicativo gerenciador de downloads com uma GUI Java simples 


// Importa os componentes da GUI Swing e algumas outras classes 

importPackage(javax.swing); 

importClass(javax.swing.border.EmptyBorder); 

importClass(java.awt.event.ActionListener); 

importClass(java.net.URL); 

importClass(java.io.FileOutputStream); 

importClass(java.lang.Thread); 


// Cria alguns widgets de GUI 

var frame = new JFrame("Rhino URL Fetcher''); 

var urlfield = new JTextField(SO); 

var button = new JButton("Download"); 

var filechooser = new JFileChooserQ; 

var row = Box.createHorizontalBoxQ; 

var col = Box.createVerticalBoxQ; 

var padding = new EmptyBorder(3,3,3,3); 

// Reune tudo e exibe a GUI 

row.add(urlfield); 

row.add(button); 

col.add(row); 

frame.add(col); 

row.setBorder(padding); 

frame.pack(); 

frame.visible = true; 


// A janela do aplicativo 
// Campo de entrada de URL 
// Botao para iniciar o download 
// Um dialogo de seleqao de arquivo 
// Uma caixa para campo e botao 
// Para as linhas & as barras de 
// progresso 

// Preenchimento para linhas 


// 0 campo de entrada entra na linha 

// 0 botao entra na linha 

// A linha entra na coluna 

// A coluna entra no quadro 

// Adiciona algum preenchimento na linha 

// Configura o tamanho minimo 

// Torna a janela visivel 


// Ouando qualquer coisa acontecer na janelaj chama esta funcao. 
frame.addWindowListener(function(ej name) { 

// Se o usuario fecha a janelaj sai do aplicativo. 

if (name === "windowclosing") // 0 Rhino adiciona o argumento name 

java.lang.System.exit(0); 

}); 


// Ouando o usuario clica no botaoj chama esta funcao 
button.addActionListener(function() { 
try { 

// Cria um java.net.URL para representar o URL de origem. 

// (Isso verifica se a entrada do usuario esta bem formada) 
var url = new URL(urlfield.text); 

// Pede ao usuario para selecionar um arquivo onde vai salvar o conteudo do URL. 
var response = filechooser.showSaveDialog(frame); 

// Sai agoraj se ele clicou em Cancel 

if (response != JFileChooser.APPROVE_OPTION) return; 

// Caso contrarioj obtem o java.io.File que representa o arquivo de destino 
var file = filechooser.getSelectedFileQ; 

// Agora inicia uma nova thread para baixar o url 

new java.lang.Thread(function() { download(url,file); }).start(); 

} 

catch(e) { 

// Exibe uma caixa de dialogo se tudo der errado 
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}); 


JOptionPane.showMessageDialog(frame, e.messagej "Exception", 
JOptionPane.ERROR_MESSAGE); 


// Usa java.net.URL, etc. para baixar o conteudo do URL e usa 
// java.io.File etc. para salvar esse conteudo em um arquivo. Exibe o andamento 
// do download em um componente JProgressBar. Isso vai ser chamado em uma nova thread, 
function download(url, file) { 
try { 


// Sempre que baixamos um URL, adicionamos uma nova linha na janela 
// para exibir o url, o nome de arquivo e o andamento do download 


var row = Box.createHorizontalBoxQ; 

row.setBorder(padding); 

var label = url.toStringQ + ": 

row.add(new JLabel(label)); 

var bar = new JProgressBar(0, 100); 

bar.stringPainted = true; 

bar.string = file.toStringQ; 

row.add(bar); 

col.add(row); 

frame.pack(); 


// Cria a linha 

// Fornece a ela algum preenchimento 
// Exibe o URL 
// em um JLabel 

// Adiciona uma barra de progresso 
// Exibe o nome do arquivo na 
// barra de progresso 
// Adiciona a barra nessa nova linha 
// Adiciona a linha na coluna 
// Redimensiona a janela 



// Ainda nao sabemos o tamanho do URL, de modo que a barra apenas inicia a animacao 
bar.indeterminate = true; 

// Agora conecta o servidor e obtem 
var conn = url.openConnectionQ; 
conn.connect(); 
var len = conn.contentLength; 
if (len) { 

bar.maximo = len; 
bar. indeterminate = false; 

} 

// Obtem fluxos de entrada e saida 

var input = conn.inputStream; // Para ler bytes do servidor 

var output = new FileOutputStream(file); // Para gravar bytes no arquivo 


o comprimento do URL, se possivel 
// Obtem java.net.URLConnection 
// Conecta e espera pelos cabecalhos 
// Verifica se temos o comprimento do URL 
// Se o comprimento e conhecido, entao 
// configura a barra para exibir 
// a porcentagem baixada 


// Cria um array de 4k bytes como buffer de entrada 
var buffer = java.lang.reflect.Array.newlnstance(java.lang.Byte.TYPE, 
4096); 


while((num=input.read(buffer)) != -l) { 
output.write(buffer, 0, num); 
bar.value += num; 

} 

output. closeQ; 
input. closeQ; 

} 

catch(e) { // Se algo der errado, exibe 

if (bar) { 

bar.indeterminate = false; 
bar.string = e.toStringQ; 


// Le e itera ate EOF 
// Grava bytes no arquivo 
// Atualiza a barra de progresso 

// Fecha os fluxos ao terminar 


erro na barra de progresso 
// Para a animacao 

// Substitui o nome do arquivo pelo erro 


} 


} 
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12.2 E/S assmcrona com o Node 

O Node e um interpretador JavaScript rapido, baseado em C++, com vinculos para as APIs Unix 
de baixo nivel para trabalhar com processos, arquivos, soquetes de rede, etc., e tambem para cliente 
HTTP e APIs de servidor. A nao ser por alguns metodos sincronos com nomes especiais, os vinculos 
do Node sao todos assincronos e, por padrao, os programas Node nunca sao bloqueados, isso quer 
dizer que normalmente mudam bem de escala e lidam com cargas grandes de forma eficiente. Como 
as APIs sao assincronas, o Node conta com rotinas de tratamento de evento, as quais sao frequente- 
mente implementadas com fungoes aninhadas e closures . 

Esta segao destaca algumas das APIs e dos eventos mais importantes do Node, mas de modo algum 
a documentagao e completa. Consulte a documentagao online do Node no enderego http://nodejs. 
org/api/. 


ObtendooNode 

0 Node e software livre que pode ser baixado no enderego http://nodejs.org. Quando este livro estava 
sendo produzido, o Node ainda estava sendo desenvolvido e distribuigoes binarias nao estavam dispo- 
nfveis - era preciso construir sua propria copia a partir do codigo-fonte. Os exemplos desta segao foram 
escritos e testados com o Node versao 0.4. A API ainda nao esta congelada, mas e improvavel que os fun- 
damentos ilustrados aqui mudem muito nofuturo. 

0 Node tern como base o mecanismo de JavaScript V8 do Google. 0 Node 0.4 usa V8 versao 3.1, a qual 
implementa toda ECMAScript 5, exceto o modo restrito. 

Quando tiver baixado, compilado e instalado o Node, pode executar programas node com comandos 
como o seguinte: 

node progiama.js 


Comegamos a explicagao do Rhino com suas fungoes print() e loadQ. O Node tern recursos seme- 
lhantes, com nomes diferentes: 

// 0 Node define console.log() para saida de depuracao como fazem os navegadores. 
console.logC'Hello Node"); // Saida de depuragao na console 

// Usa require(), em vez de load(). Ele carrega e executa (somente uma vez) o 
// modulo nomeado, retornando um objeto que contem seus simbolos exportados. 
var fs = require("fs"); // Carrega o modulo "fs" e retorna seu objeto API 

O Node implementa todas as construtoras, propriedades e fungoes de ECMAScript 5 padrao em seu 
objeto global. Contudo, alem disso, tambem suporta as fungoes set de cronometragem do lado do 
cliente setTimeout(), setlntervalQ, clearTimeoutQ e clearlntervalf): 


JavaScript do lado do cliente tambem e altamente assmcrona e baseada em eventos. Talvez seja mais facil entender os 
exemplos desta segao quando voce tiver lido a Parte II e tiver sido exposto aos programas JavaScript do lado do cliente. 
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// Diz ola em urn segundo a partir de agora. 
setTimeout(function() { console.log("Hello World"); }, 1000); 

Essas globais do lado do cliente sao abordadas na Se^ao 14.1. A implementaqao do Node e compa- 
tfvel com as implementa^oes de navegador Web. 

O Node define outras globais importantes sob o espa^o de nomes process. Estas sao algumas das 
propriedades desse objeto: 



process.version // String de versao do Node 

process.argv // Args de linha de comando como um array argvfo] e "node" 

process.env // Variaveis de ambiente como um objeto. por exemplo: process.env.PATH 

process.pid // Identificaqao de processo 

process.getuid() // Retorna a identificacao do usuario 

process.cwd() // Retorna o diretorio corrente de trabalho 

process.chdirQ // Muda de diretorio 

process.exit() // Sai (apos executar ganchos de desligamento) 


Como as fim^oes e metodos do Node sao asslncronos, eles nao sao bloqueados enquanto esperam o 
termino de operates. O valor de retorno de um metodo sem bloqueio nao pode retornar o resul- 
tado de uma opera^ao assfncrona. Se voce precisa obter resultados ou precisa apenas saber quando 
uma opera^ao esta conclulda, tern de fornecer uma fuinjao que o Node possa chamar quando os 
resultados estiverem prontos ou quando a opera^ao estiver conclulda (ou quando ocorrer um erro). 
Em alguns casos (como na chamada de setTimeoutQ anteriormente), basta passar a fiinfao como 
argumento e o Node vai chama-la no momento apropriado. Em outros casos, pode-se contar com a 
infraestrutura de eventos do Node. Os objetos Node que geram eventos (conhecidos como emissores 
de even to) definem um metodo on() para registrar rotinas de tratamento. Passe o tipo de evento 
(uma string) como primeiro argumento e passe a funijao de tratamento como segundo argumento. 
Diferentes tipos de eventos passam diferentes argumentos para a funijao de tratamento, sendo que 
talvez seja necessario consultar a documenta^ao da API para saber exatamente como escrever suas 
rotinas de tratamento: 


emitter.on(name, i) 
emitter.addListener(name, f) 
emitter.once(name, f) 
emitter.listeners(name) 


// Registra f para tratar de eventos name de emitter 
II Idem: addListenerQ e sinonimo de on() 

// Apenas uma vez; em seguida, f e removida automaticamente 
Retorna um array de fun^oes de rotina de tratamento 


emitter.removeListener(name, f) // Anula o registro da rotina de tratamento de evento f 
emitter.removeAllListeners(name)// Remove todas as rotinas de tratamento de eventos name 


O objeto process mostrado anteriormente e um emissor de evento. Aqui estao exemplos de rotinas 
de tratamento para alguns de seus eventos: 

// 0 evento "exit" e enviado antes que o Node saia. 
process.on("exit", function() { console.log("Goodbye"); }); 


// Excecoes nao capturadas geram eventos, se qualquer rotina de tratamento estiver 
// registrada. 

// Caso contrario, a exceqao apenas faz o Node imprimir um erro e sair. 
process.on("uncaughtException", function(e) { console.log(Exception, e); }); 
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// Sinais POSIX, como SIGINT, SIGHUP e SIGTERM, geram eventos 
process.on("SIGINT", function() { console.log("Ignored Ctrl-C"); }); 

Como o Node e projetado para E/S de alto desempenho, sua API de fluxo e comumente utilizada. 
Fluxos que podem ser lidos disparam eventos quando os dados estao prontos. No codigo a seguir, 
presuma que s e um fluxo de que pode ser lido, obtido em algum lugar. Vamos ver como obtemos 
objetos (stream) fluxo para arquivos e soquetes de rede a seguir: 

// Fluxo de entrada s: 

s.on("data", f); // Quando os dados estao disponiveis, passa-os como argumento para f() 

s.on("end", f); // Evento "end" ativado em EOF quando nao vao chegar mais dados 

s.on(''error", f); // Se algo der errado, passa a exceqao para f() 

s.readable // => verdadeiro se e um que ainda esta aberto fluxo que pode ser lido 

s.pauseQ; // Pausa em eventos "data". Para controlar o fluxo de uploads, por exemplo 

s.resumeQ; // Retoma novamente 


// Especifique uma codificacao se quiser passar strings para a rotina de tratamento de 
//evento "data" 

s.setEncoding(enc); // Como decodificar bytes: "utf8", "ascii" ou "base64" 


Os fluxos que podem ser gravados sao menos centrados em eventos do que os fluxos que podem ser 
lidos. Use o metodo write () para enviar dados e o metodo end () para fechar o fluxo quando todos os 
dados tiverem sido gravados. O metodo write () nunca e bloqueado. Se o Node nao consegue gravar 
os dados imediatamente e precisa coloca-los em um buffer internamente, o metodo write () retorna 
false. Registre uma rotina de tratamento para “drenar” eventos, caso precise saber quando o buffer 
do Node tiver descarregado e os dados tiverem sido realmente gravados: 


// Fluxo de saida s: 
s.write(buffer); 
s.write(string, encoding) 
s.endQ 

s.end(buffer); 
s.end(str, encoding) 
s.writeable; 
s.on("drain", f) 


// Grava dados binarios 

// Grava dados de string. A codificacao tern como padrao "utf-8" 
// Fecha o fluxo. 

// Grava o trecho final dos dados binarios e fecha. 

// Grava a string final e fecha tudo em um so 

// verdadeiro se o fluxo ainda esta aberto e pode ser gravado 

// Chama f() quando o buffer interno esvazia 


Como voce pode ver no codigo anterior, os fluxos de Node podem trabalhar com dados binarios 
ou dados textuais. Texto e transferido usando-se strings JavaScript normais. Bytes sao manipulados 
usando-se um tipo especffico do Node conhecido como Buffer. Os buffers do Node sao objetos 
semelhantes a um array de comprimento fixo, cujos elementos devem ser niimeros entre 0 e 255. 
Os programas Node frequentemente podem tratar os buffers como trechos de dados opacos, lendo- 
-os de um fluxo e gravando-os em outro. Mas os bytes de um buffer podem ser acessados como 
elementos de array e existem metodos para copiar bytes de um buffer para outro, para obter fatias de 
um buffer subjacente, para gravar strings em um buffer usando uma codificacao especificada e para 
decodificar um buffer ou uma parte de um buffer novamente em uma string: 


var bytes = new Buffer(256); 
for(var i = 0; i < bytes.length; i++) 
bytes[i] = i; 

var end = bytes.slice(240, 256); 

end[0] 

end[0] = 0; 

bytes[240] 


// Cria um novo buffer de 256 bytes 
// Itera pelos indices 
// Configura cada elemento do buffer 
// Cria uma nova visualizaqao do buffer 
// => 240: end[0] e bytes[240] 

// Modifica um elemento da fatia 

// => 0: o buffer adjacente tambem e modificado 
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var more = new Buffer(8); // Cria um novo buffer separado 

end.copy(morej 0, 8, 16); // Copia os elementos 8-15 de end[] em more[] 

more[o] // => 248 

// Os buffers tambem fazem conversao binario <=> texto 

// Codificacoes validas: "utf8", "ascii" e "base64". "utf8" e o padrao. 

var buf = new Buffer("2nr ", "utf8"); // Codifica texto em bytes usando UTF-8 

buf.length // => 3 caracteres ocupam 4 bytes 

buf.toString() // => "2Ttr": volta para texto 

buf = new Buffer(lO); // Comeca com um novo buffer de comprimento fixo 

var len = buf.write("nr2", 4); // Grava texto nele, comecando no byte 4 

buf.toStringC'utfS"^, 4 +len) // => "nr2": decodifica um intervalo de bytes 

A API de arquivo e sistema de arquivos do Node esta no modulo “fs”: 

var fs = require("fs"); // Carrega a API de sistema de arquivos 



Esse modulo fornece versoes smcronas da maioria de seus metodos. Qualquer metodo cujo nome 
termina com “Sync” e metodo com bloqueio que retorna um valor ou lanpi uma excepio. Os me¬ 
todos de sistema de arquivos que nao terminam com “Sync” sao metodos sem bloqueio que passam 
seus resultados ou erros para a funpio callback especificada. O codigo a seguir mostra como se le 
um arquivo de texto usando um metodo com bloqueio e como se le um arquivo binario usando o 
metodo sem bloqueio: 

// Le um arquivo de forma sincrona. Passa uma codificacao para obter textOj em vez de 
// bytes. 

var text = fs.readFileSync("config.json", "utf8"); 


// Le um arquivo binario de forma assincrona. Passa uma funcao para obter os dados 
fs.readFile("image.png", function(err, buffer) { 

if (err) throw err; // Se tudo deu errado 

process(buffer); // 0 conteudo do arquivo esta no buffer 

}); 

Existem fun^oes writeFileQ e writeFileSync() similares para gravar arquivos: 
fs.writeFile("config.json'b JSON.stringify(userprefs)); 

As funijoes mostradas anteriormente tratam o conteudo do arquivo como uma unica string ou 
Buffer. O Node tambem define uma API de streaming para ler e gravar arquivos. A funcao a seguir 
copia um arquivo em outro: 

// Copia de arquivo com API de streaming. 

// Passe um retorno de chamada se voce quer saber quando esta terminado 
function fileCopy(filenamei, filename2, done) { 

var input = fs.createReadStream(filenamei); // Fluxo de entrada 

var output = fs.createWriteStream(filename2); // Fluxo de saida 

input.on("data", function(d) { output.write(d); }); // Copia in em out 
input.on("error", function(err) { throw err; }); // Lanca erros 

input.on("end"j function() { // Quando a entrada termina 

output.end(); // fecha a saida 

if (done) done(); // E notifica o retorno de chamada 

}); 

} 
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O modulo “fs” tambem inclui varios metodos para listar diretorios, consultar atributos de arquivo, 
etc. O programa Node a seguir usa metodos sincronos para listar o conteudo de um diretorio, junto 
com o tamanho de arquivo e a data de modifica^ao: 

#! /usr/local/bin/node 

var fs = require("fs"), path = require(''path''); 
var dir = process.cwd(); 

if (process.argv.length > 2) dir = process.argv[2] 
var files = fs.readdirSync(dir); 
process.stdout.write("Name\tSize\tDate\n”); 
files.forEach(function(filename) { 

var fullname = path.join(dir,filename); 
var stats = fs.statSync(fullname); 
if (stats.isDirectory()) filename += 
process.stdout.write(filename + "\t" + 

stats.size + "\t" + 
stats.mtime + "\n"); 

}); 

Observe o comentario #! na primeira linha anterior. Esse comentario e conhecido em Unix como 
“shebang”, usado para tornar um arquivo de script como esse autoexecutavel, especificando em qual 
linguagem o interpretador vai executar. O Node ignora linhas como essa, quando elas aparecem 
como a primeira linha do arquivo. 

O modulo “net” e uma API para liga^ao em rede baseada em TCP. (Consulte o modulo “dgram” 
para liga^ao em rede baseada em datagramas.) Aqui esta um servidor TCP muito simples em Node: 

// Um servidor de eco TCP simples em Node: recebe conexoes na porta 2000 

// e ecoa os dados do cliente de volta para ele. 

var net = require('net'); 

var server = net.createServerQ; 

server.listen(2000, functionQ { console.log("Listening on port 2000”); }); 
server.onC'connection", function(stream) { 

console.logC'Accepting connection from", stream.remoteAddress); 

stream.onC'data", function(data) { stream.write(data); }); 

stream.on("end", function(data) { console.log("Connection closed"); }); 

}); 

Alem do modulo “net” basico, o Node tern suporte interno para o protocolo HTTP usando o mo¬ 
dulo “http”. Os exemplos a seguir demonstram isso com mais detalhes. 

12.2.1 Exemplo de Node: servidor de HTTP 

O Exemplo 12-2 e um servidor de HTTP simples em Node. Ele serve arquivos do diretorio corrente 
e tambem implementa duas URLs de proposito especial que manipula de modo particular. Ele usa 
o modulo “http” do Node e tambem as APIs de arquivo e fluxo demonstradas anteriormente. O 
Exemplo 18-17, no Capitulo 18, e um exemplo de servidor de HTTP especializado semelhante. 

Exemplo 12-2 Um servidor de HTTPem Node 

// Este e um servidor de HTTP NodeJS simples que pode servir arquivos do 
// diretorio corrente e que tambem implementa duas URLs especiais para teste. 

// Conecta no servidor em http://localhost:8000 ou http://127.0.0. 1:8000 


// Carrega os modulos necessarios 
// Diretorio corrente 
// Ou a partir da linha de comando 
// Le o conteudo do diretorio 
// Saida de um cabecalho 
// Para cada nome de arquivo 

// Obtem atributos do arquivo 
// Marca subdiretorios 
// Saida do nome de arquivo mais 
// tamanho do arquivo mais 
// hora da modificacao 


// Primeiramente, carrega os modulos que 
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var http = require('http'); // API do servidor de HTTP 

var fs = require('fs'); // Para trabalhar com arquivos locais 


var server = new http.Server(); // Cria urn novo servidor de HTTP 
server.listen(8000); // Executa-o na porta 8000. 

// 0 Node usa o metodo "onQ" para registrar rotinas de tratamento de evento. 

// Quando o servidor recebe um novo pedido, executa esta funqao para tratar dele, 
server.on("request", function (request, response) { 

// Analisa o URL solicitado 

var url = require(' url').parse(request.url); 


// Um URL especial que apenas faz o servidor esperar antes de enviar a 
// resposta. Isso pode ser util para simular uma conexao de rede lenta. 
if (url.pathname === "/test/delay") { 

// Usa string de consulta para quantidade de atraso, ou 2000 milissegundos 
var delay = parselnt(url.query) || 2000; 

// Configura o codigo de status da resposta e cabecalhos 

response.writeHead(200, {"Content-Type": "text/plain; charset=UTF-8"}); 

// Comeca a gravar o corpo da resposta imediatamente 
response.write("Sleeping for " + delay + " milliseconds...”); 

// E entao termina em outra fun^ao chamada posteriormente. 
setTimeout(function() { 

response.write("done.''); 
response.end(); 

}, delay); 

} 

// Se o pedido foi por "/test/mirror", envia o pedido de volta literalmente. 

// Util quando e preciso ver os cabecalhos e o corpo do pedido. 
else if (url.pathname === "/test/mirror") { 

// Status e cabeqalhos da resposta 

response.writeHead(200, {"Content-Type": "text/plain; charset=UTF-8"}); 

// Inicia o corpo da resposta com o pedido 
response.write(request.method + " " + request.url + 

" HTTP/" + request.httpVersion + "\r\n"); 

// E os cabeqalhos do pedido 
for(var h in request.headers) { 

response.write(h + ": " + request.headersfh] + "\r\n"); 

} 

response.write("\r\n"); // Finaliza os cabecalhos com uma linha em branco extra 

// Completamos a resposta nestas funqoes de tratamento de evento: 

// Quando for um trecho do corpo da resposta, adiciona-o na resposta. 
request.on("data", function(chunk) { response.write(chunk); }); 

// Quando o pedido termina, a resposta tambem terminou. 
request.on("end”, function(chunk) { response.end(); }); 

} 

// Caso contrario, serve um arquivo do diretorio local, 
else { 

// Obtem nome de arquivo local e supoe seu tipo de conteudo com base na extensao. 
var filename = url.pathname.substring(l); // corta o inicio / 

var type; 

switch(filename.substring(filename.lastlndex0f(".")+l)) { // extensao 

case "html": 

case "htm": type = "text/html; charset=UTF-8"; break; 

case "js”: type = "application/javascript; charset=UTF-8"; break; 
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case "txt" : 
case "manifest": 
default: 

} 


type = "text/css; charset=UTF-8"; break; 

type = "text/plain; charset=UTF-8"; break; 

type = "text/cache-manifest; charset=UTF-8"; break; 

type = "application/octet-stream"; break; 


// Le o arquivo de forma assincrona e passa o conteudo como urn unico 
// trecho para a funcao callback. Para arquivos realmente grandes, 

// usar a API de streaming com fs.createReadStreamQ seria melhor. 
fs.readFile(filename, functionary content) { 

if (err) { // Se nao pudermos ler o arquivo por algum motivo 

response.writeHead(404, { // Envia o status 404 Not Found 

"Content-Type": "text/plain; charset=UTF-8"}); 
response.write(err.message); // Corpo da mensagem de erro simples 
response.end(); // Terminou 

} 

else { // Caso contrario, se o arquivo foi lido com sucesso. 

response.writeFlead(200, // Configura o codigo de status e o tipo MIME 
{"Content-Type": type}); 

response.write(content); // Envia o conteudo do arquivo como corpo da 
// resposta 

response.end(); // E terminamos 

} 

}); 

} 

}>; 


12.2.2 Exemplo de Node: modulo de utilitarios de cliente HTTP 

O Exemplo 12-3 usa o modulo “http” para definir fun^oes utilitarias para fazer pedidos HTTP 
GET e POST. O exemplo esta estruturado como um modulo “httputils”, o qual poderia ser usado 
em seu codigo como segue: 

var httputils = require("./httputils"); // Observe a ausencia do sufixo ".js" 
httputils.get(url, function(status, headers, body) { console.log(body); }); 

A funcao require!) nao executa codigo de modulo com uma funcao eval() normal. Os modulos 
sao avaliados em um ambiente especial, de modo que nao podem definir variaveis globais ou alterar 
o espa^o de nomes global de alguma forma. Esse ambiente de avaba^ao de modulo especial sempre 
inclui um objeto global chamado exports. Os modulos exportam suas APIs definindo propriedades 
nesse objeto . 

Exemplo 12-3 Modulo"httputils"doNode 
// 

// Um modulo "httputils" para o Node. 


// Faz um pedido GET HTTP assincrono para o URL especificado e passa o 

// status HTTP, os cabeqalhos e o corpo da resposta para a funcao callback especificada. 

// Observe como exportamos esse metodo por meio do objeto exports. 

// exports.get = function(url, callback) { 


2 O Node implementa o contrato de modulo CommonJS, sobre o qual voce pode ler no enderecjo http://www.commonjs. 
org/specs/modules/1.01. 
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// Analisa o URL e obtem as partes que precisamos dele 

url = require('url').parse(url); 

var hostname = url.hostname, port = url.port || 80; 

var path = url.pathname, query = url.query; 

if (query) path += "?" + query; 

// Faz urn pedido GET simples 

var client = require("http").createClient(port, hostname); 
var request = client.request("GET", path, { 

''Host”: hostname // Cabe^alhos do pedido 

}); 

request.end(); 

// Uma fun<;ao para tratar da resposta quando ela comecar a chegar 
request.on("response", function(response) { 

// Define uma codificafao para que o corpo seja retornado como texto e nao como 
// bytes 

response, set Encoding("utf8''); 

// Salva o corpo da resposta quando ela chega 

response.on(''data", function(chunk) { body += chunk; }); 

// Quando a resposta e concluida, chama o retorno da chamada 
response.onC'end”, functionQ { 

if (callback) callback(response.statusCode, response.headers, body); 


// Pedido POST HTTP simples com dados como corpo do pedido 
exports.post = function(url, data, callback) { 

// Analisa o URL e obtem as partes que precisamos dele 

url = require('url').parse(url); 

var hostname = url.hostname, port = url.port || 80; 

var path = url.pathname, query = url.query; 

if (query) path += "?" + query; 

// Descobre o tipo de dados que estamos enviando como corpo do pedido 
var type; 

if (data == null) data = 

if (data instanceof Buffer) // Dados binarios 

type = "application/octet-stream"; 
else if (typeof data === "string") // Dados de string 
type = "text/plain; charset=UTF-8"; 
else if (typeof data === "objeto") { // Pares nome=valor 
data = require("querystring").stringify(data); 
type = "application/x-www-form-urlencoded"; 

} 



// Faz urn pedido POST, incluindo urn corpo no pedido 

var client = require("http").createClient(port, hostname); 

var request = client.request("POST", path, { 

"Host": hostname, 

"Content-Type": type 

}); 

request.write(data); // Envia o corpo do pedido 

request. end(); 
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request.on("response", function(response) { // Trata da resposta 
response.setEncoding("utf8"); // Presume que seja texto 

var body = "" // Para salvar o corpo da resposta 

response.on("data", function(chunk) { body += chunk; }); 

response.on("end", function() { // Ouando terminamos, chama o retorno da chamada 
if (callback) callback(response.statusCodej response.headers, body); 



JavaScript do lado do diente 


Esta parte do livro, capftulos 13 a 22, documenta JavaScript conforme e implementada em nave- 
gadores Web. Esses capftulos apresentam varios objetos de script que representam janelas em nave- 
gadores Web, documentos e conteudo de documentos. Tambem explicam APIs de aplicativo Web 
importantes para conexao em rede, armazenamento e recupera^ao de dados e desenho de elementos 
graficos: 


Capftulo 1 3, JavaScript em navegadores Web 

Capftulo 1 4,0 objeto Window 

Capftulo 15, Escrevendo script de documentos 

Capftulo 16, Escrevendo script de CSS 

Capftulo 17, Tratando eventos 

Capftulo 18, Scripts HTTP 

Capftulo 19, A bibliotecajQuery 

Capftulo 20, Armazenamento no lado do cliente 

Capftulo 21, Midia e graficos em scripts 

Capftulo 22, APIs de HTML5 



Esta pagina foi deixada em branco intencionalmente. 





Capi'tulo 13 

JavaScript em navegadores Web 


A primeira parte deste livro descreveu a linguagem JavaScript basica. Agora passamos para JavaScript 
como e usada em navegadores Web, normalmente chamada de JavaScript do lado do cliente. A 
maioria dos exemplos que vimos ate aqui, embora fossem codigo JavaScript valido, nao tinha con- 
texto algum em especial; eram fragmentos de JavaScript executados em um ambiente nao especifica- 
do. Este capitulo fornece esse contexto. 

Antes de come^armos a falar sobre JavaScript, e interessante pensarmos nas paginas que exibimos 
nos navegadores Web. Algumas delas apresentam informa$6es estaticas e podem ser chamadas de 
documentos. (A apresenta^ao dessas informa^oes pode ser bastante dinamica - por causa de Java¬ 
Script -, mas as informafoes em si sao estaticas.) Outras paginas Web mais parecem aplicativos 
do que documentos. Essas paginas podem carregar novas informa$6es dinamicamente, conforme 
a necessidade, podem ser graficas em vez de textuais e podem funcionar off-line e salvar dados de 
forma local, para que possam restaurar seus estados quando voce visita-las novamente. Ainda outras 
paginas Web fleam em algum ponto no meio desse espectro e combinam recursos de documentos e 
de aplicativos. 

Este capitulo come^a com uma visao geral de JavaScript do lado do cliente. Ele content um exem- 
plo simples e uma discussao do papel de JavaScript em documentos e em aplicativos Web. Essa 
primeira se^ao introdutoria tambem explica o que ha por vir nos capitulos da Parte II. As sefoes 
que se seguem explicam alguns detalhes importantes sobre como codigo JavaScript e incorporado e 
executado dentro de documentos HTML e, em seguida, apresentam topicos em compatibilidade, 
acessibilidade e seguranija. 

13.1 JavaScript do lado do cliente 

O objeto Window e o principal ponto de entrada para todos os recursos e APIs de JavaScript do lado 
do cliente. Ele representa uma janela ou quadro de navegador Web e pode ser referenciado atraves 
do identificador window. O objeto Window define propriedades como location, que se refere a um 
objeto Location especificando o URL atualmente exibido na janela e permite que um script carregue 
um novo URL na janela: 

// Configura a propriedade location para navegar para uma nova pagina Web 

window.location = "http://www.oreilly.com/"; 
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O objeto Window tambem define metodos, como alert(), que exibe uma mensagem em uma caixa 
de dialogo, e setTimeout(), que registra uma funpio a ser chamada depois de um intervalo de tempo 
especificado: 

// Espera 2 segundos e depois diz ola 
setTimeout(function() { alert("hello world"); }, 2000); 

Observe que o codigo anterior nao usa a propriedade window explicitamente. Em JavaScript do lado 
do cliente, o objeto Window tambem e o objeto global. Isso significa que o objeto Window esta 
no topo do encadeamento de escopo e que suas propriedades e metodos sao efetivamente variaveis 
globais e funijoes globais. O objeto Window tern uma propriedade chamada window que sempre se 
refere a ela mesma. Voce pode usar essa propriedade se precisar se referir ao objeto janela em si, mas 
normalmente nao e necessario usar window se quiser apenas se referir as propriedades de acesso do 
objeto janela global. 

Existem varias outras propriedades, metodos e construtoras importantes definidos pelo objeto Win¬ 
dow. Consulte o Capitulo 14 para ver os detalhes completos. 

Uma das propriedades mais importante do objeto Window e document: ela se refere a um objeto 
Document que representa o conteudo exibido na janela. O objeto Document tern metodos impor¬ 
tantes, como getElementByldQ, que retorna um unico elemento documento (representando um par 
de abertura/fechamento de marca^oes HTML e todo o conteudo entre elas) baseado no valor de seu 
atributo id: 

// Localiza o elemento com id="timestamp" 

var timestamp = document.getElementById("timestamp"); 

O objeto Element retornado por getElementByldQ tern outras propriedades e metodos importantes 
que permitem aos scripts obterem seu conteudo, configurar o valor de seus atributos, etc: 

// Se o elemento estiver vazio, insere a data e hora atuais nele 
if (timestamp.firstChild == null) 

timestamp. appendChild(document. createTextNode(new DateQ.toStringQ)); 

As tecnicas para consultar, percorrer e modificar o conteudo de documento sao abordadas no Capf- 
tulo 15. 

Cada objeto Element tern propriedades style e className que permitem aos scripts especificar estilos 
CSS para um elemento documento ou alterar os nomes de classe CSS que se aplicam ao elemento. 
Configurar essas propriedades relacionadas a CSS altera a ap resen tapio do elemento documento: 

// Altera explicitamente a apresentacao do elemento cabe^alho 
timestamp.style.backgroundColor = "yellow"; 

// Ou apenas muda a classe e deixa a folha de estilo especificar os detalhes: 
timestamp.className = "highlight"; 

As propriedades style e className, assim como outras tecnicas de script CSS, sao abordadas no 
Capitulo 16. 

Outro conjunto importante de propriedades em objetos Window, Document e Element sao as pro¬ 
priedades do mecanismo de tratamento de eventos (handlers). Eles permitem que os scripts especi- 
fiquem fun pies que devem ser chamadas de forma assincrona quando certos eventos ocorrem. Os 
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mecanismos de tratamento de evento permitem que o codigo JavaScript altere o comportamento 
de janelas, de documentos e dos elementos que compoem esses documentos. As propriedades de 
tratamento de evento tern nomes que come^am com a palavra “on” e voce pode usa-las como segue: 

// Atualiza o conteudo do elemento timestamp quando o usuario clica nele 

timestamp.onclick = functionQ { this.innerHTML = new Date().toStringQ; } 

Um dos mecanismos de tratamento de evento mais importantes e o handler onload do objeto Win¬ 
dow. Ela e disparada quando o conteudo do documento exibido na janela esta estavel e pronto para 
ser manipulado. Normalmente, o codigo JavaScript fica dentro de um handler de evento onload. 
Os eventos sao o tema do Capftulo 17. O Exemplo 13-1 demonstra o handler onload e mostra mais 
codigo JavaScript do lado do cliente que consulta elementos documento, altera classes CSS e define 
mecanismos de tratamento de evento. O elemento HTML <script> contem o codigo JavaScript 
desse exemplo e esta explicado na Se^ao 13.2. Note que o codigo inclui uma funijao definida dentro 
de outra funqao. Funfoes aninhadas sao comuns em JavaScript do lado do cliente, devido ao seu uso 
extensivo de handlers de evento. 



Exemplo 13-1 JavaScript do lado do cliente simples para exibir conteudo 
<!D0CTYPE html> 

/* Estilos CSS para essa pagina */ 

•reveal * { display: none; } /* Os filhos de class="reveal" nao sao mostrados *1 
• reveal *.handle { display: block;} /* Exceto para o filho de class="handle'' */ 
</style> 

// Nao faz nada ate que o documento inteiro esteja carregado 
window.onload = functionQ { 

// Localiza todos os elementos container com classe "reveal" 
var elements = document.getElementsByClassName("reveal"); 
for(var i = 0; i < elements.length; i++) { // Para cada um... 

var elt = elementsfi]; 

// Localiza o elemento "handle" com o container 
var title = elt.getElementsByClassName("handle")[0]; 

// Quando esse elemento e clicado, exibi o restante do conteudo 
title.onclick = functionQ { 

if (elt.className == "reveal") elt.className = "revealed"; 
else if (elt.className == "revealed") elt.className = "reveal"; 

} 

} 

}; 

</head> 

<body> 

<div class="reveal"> 

<hl class="handle">Click Here to Reveal Hidden Text</hl> 

<p>This paragraph is hidden. It appears when you click on the title.</p> 

</html> 
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Observamos na introdupio deste capftulo que algumas paginas Web parecem documentos e algumas 
parecem aplicativos. As duas subse^oes a seguir exploram o uso de JavaScript em cada tipo de pagina 
Web. 


13.1.1 JavaScript em documentos Web 

Um programa JavaScript pode percorrer e manipular conteudo de documentos por meio do objeto 
Document e dos objetos Element que ele content. Ele pode alterar a apresentagao desse conteudo 
com scripts de estilos e classes CSS. E pode definir o comportamento de elementos do documento, 
registrando mecanismos de tratamento de evento apropriados. A combinapio de conteudo de script, 
apresentagao e comportamento e chamada de HTML Dinamico ou DHTML. As tecnicas para criar 
documentos DHTML sao explicadas nos capitulos 15, 16 e 17. 

O uso de JavaScript em documentos Web normalmente deve ser controlado e moderado. O papel 
apropriado de JavaScript e melhorar a experiencia de navegapio do usuario, tornando mais facil 
obter ou transmitir informa^oes. A experiencia do usuario nao deve depender de JavaScript, mas ela 
pode ajudar a facilitar essa experiencia, por exemplo: 

• Criando an imagoes e outros efeitos visuais para guiar um usuario sutilmente e ajudar na na¬ 
vegapio na pagina 

• Ordenar as colunas de uma tabela para tornar mais facil para o usuario descobrir o que neces- 

• Ocultar certo conteudo e revelar detalhes progressivamente, a medida que o usuario “se apro- 
funda” nesse conteudo 

13.1.2 JavaScript em aplicativos Web 

Os aplicativos Web utilizam todos os recursos de DHTML de JavaScript que os documentos 
Web utilizam, mas tambem vao alem dessa APIs de manipula?ao de conteudo, apresentagao e 
comportamento para tirar proveito de outros services fundamentals fornecidos pelo ambiente do 
navegador Web. 

Para realmente entender os aplicativos Web, e importante perceber que os navegadores Web foram 
muito alem de sua fun$ao original como ferramentas para exibir documentos e se transformaram 
em sistemas operacionais simples. Considere o seguinte: um sistema operacional tradicional per- 
mite organizar l'cones (que representam arquivos e aplicativos) na area de trabalho e em pastas. Um 
navegador Web permite organizar bookmarks (que representam documentos e aplicativos Web) 
em uma barra de ferramentas e em pastas. Um sistema operacional executa varios aplicativos em 
janelas separadas; um navegador Web exibe varios documentos (ou aplicativos) em guias (ou abas) 
separadas. Um sistema operacional define APIs de baixo m'vel para conexao em rede, desenho de 
elementos graficos e salvamento de arquivos. Os navegadores Web definem APIs de baixo nivel 
para conexao em rede (Capftulo 18), salvamento de dados (Capftulo 20) e desenho de elementos 
graficos (Capftulo 21). 

Tendo em mente essa nopio de navegador Web como um sistema operacional simplificado, pode- 
mos definir os aplicativos Web como paginas Web que utilizam JavaScript para acessar servipts mais 
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avanpados (como conexao em rede, elementos graficos e armazenamento de dados) oferecidos pelos 
navegadores. O mais conhecido desses servipos avanpados e o objeto XMLHttpRequest, que permite 
conexao em rede por meio de requisites HTTP em scripts. Os aplicativos Web utilizam esse servipo 
para obter novas informapoes do servidor sem recarregar uma pagina. Os aplicativos Web que fazem 
isso sao comumente chamados de aplicativos Ajax e formam a espinha dorsal do que e conhecido 
como “Web 2.0”. O objeto XMLHttpRequest e abordado em detalhes no Capitulo 18. 

A especificapao HTML5 (a qual, quando este livro estava sendo escrito, ainda estava em uma forma 
preliminar) e especificanoes relacionadas estao definindo varias outras APIs importantes para apli¬ 
cativos Web. Isso inclui as APIs de armazenamento de dados e graficas dos capitulos 21 e 20, assim 
como as APIs para varios outros recursos, como geolocalizapao, gerenciamento de historico e threads 
de segundo piano. Quando forem implementadas, essas APIs vao permitir uma maior evolupao dos 
recursos de aplicativos Web. Elas sao abordadas no Capitulo 22. 

Evidentemente, JavaScript e mais pertinente a aplicativos Web do que a documentos Web. Ela apri- 
mora documentos Web, mas um documento bem projetado vai continuar a funcionar mesmo com 
JavaScript desativada. Os aplicativos Web sao, por definipao, programas JavaScript que utilizam 
servipos como os providos por um sistema operacional e que sao fornecidos pelo navegador Web e 
nao se espera que fimcionem com JavaScript desativada . 

13.2 Incorporando JavaScript em HTML 

O codigo JavaScript do lado do cliente e incorporado em documentos HTML de quatro maneiras: 

• Em linha, entre um par de marcapoes <script> e </script> 

• A partir de um arquivo externo especificado pelo atributo src de uma marcapao <script> 

• Em um atributo de tratamento de evento HTML, como onclick ou onmouseover 

• Em um URL que use o protocolo especial javascript:. 

As subsepoes a seguir explicam cada uma dessas quatro tecnicas de incorporapao de JavaScript. E in- 
teressante notar, contudo, que os atributos de tratamento de evento HTML e os URLs javascript: 
raramente sao usados em codigo JavaScript moderno (eles eram bastante comuns nos primordios 
da Web). Os scripts em linha (aqueles sem um atributo src) tambem sao menos comuns do que ja 
foram. Uma filosofia de programapao conhecida como JavaScript discreta argumenta que conteudo 
(HTML) e comportamento (codigo JavaScript) devem ser separados o maximo possivel. De acordo 
com essa filosofia de programapao, e melhor incorporar JavaScript em documentos HTML usando 
elementos <script> com atributos src. 

13.2.1 0 elemento <script> 

O codigo JavaScript pode aparecer em linha dentro de um arquivo HTML, entre as marcapoes 
<script> e </script>: 


As paginas Web interativas que se comunicam com scripts CGI no lado do servidor por meio de envios de formularios 
HTML eram o “aplicativo Web” original e podem ser escritas sem o uso de JavaScript. Contudo, esse nao e o tipo de aplica- 
tivo Web que vamos discutir neste livro. 
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// Seu codigo JavaScript fica aqui 
</script> 


Em XHTML, o conteudo de um elemento <script> e tratado como qualquer outro conteudo. Se 
seu codigo JavaScript contem os caracteres < ou &, esses caracteres sao interpretados como marca^oes 
XML. Por isso, e melhor colocar todo codigo JavaScript dentro de uma se<jao CDATA, caso voce 
esteja usando XHTML: 


cscriptxI[CDATA[ 

// Seu codigo JavaScript fica aqui 
]]></script> 


O Exemplo 13-2 e um arquivo HTML que contem um programa JavaScript simples. Os comenta- 
rios explicam o que o programa faz, mas o objetivo principal desse exemplo e demonstrar como o 
codigo JavaScript e incorporado dentro de um arquivo HTML, neste caso junto com uma folha de 
estilos CSS. Observe que esse exemplo tern uma estrutura semelhante ao Exemplo 13-1 e utiliza o 
mecanismo de tratamento de evento onload da mesma maneira. 


Exemplo 13-2 Um relogio digital simples em JavaScript 


!-- Este e um arqui 
!-- 0 elemento rai; 
!-- Titulo, script: 


<IDOCTYPE html> 

<head> 

<title>Digital Clock</title> 

<script> 

// Define uma funqao para exibir a hora atual 
function displayTime() { 

var elt = document.getElementById("clock"); 
var now = new DateQ; 

elt.innerHTML = now.toLocaleTimeString(); 
setTimeout(displayTime, 1000); 


estilos ficam aqui --> 
// Um script de codigo js 


// Localiza o elemento com id="clock" 
// Obtem a hora atual 
// Faz elt exibi-la 
// Executa novamente em 1 segundo 


} 

window.onload = displayTime; 
</script> 

<style> 

#clock { 

font: bold 24pt sans; 
background: #ddf; 
padding: lOpx; 
border: solid black 2px; 
border-radius: lOpx; 


// Comeca a exibir a hora quando o documento carrega. 

/* Uma folha de estilos CSS para o relogio */ 

/* 0 estilo se aplica ao elemento com id="clock" */ 

/* Usa uma fonte grande em negrito */ 

/* Sobre um fundo cinza-azulado claro */ 

/* Circunda-o com algum espaco */ 

/* E uma borda preta grossa */ 

/* Arredonda os cantos (onde for suportado) */ 


} 


</style> 

<body> 

<hl>Digital Clock</hl> 
<span id="clock"x/span> 

</html> 


<!-- 0 corpo sao as partes exibidas do doc. --> 
<!-- Exibe um titulo --> 

<!-- A hora e inserida aqui --> 
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13.2.2 Scripts em arquivos externos 

A marca?ao <script> suporta um atributo src que especifica o URL de um arquivo contendo codigo 
JavaScript. Ela e usada como segue: 

<scri.pt src="../../scripts/util. js"x/script> 

Um arquivo JavaScript contem JavaScript puro, sem marca^oes <script> ou qualquer outro codigo 
HTML. Por convenpio, os arquivos de codigo JavaScript tem nomes que terminam com .js. 

Uma marcapio <script> com o atributo src especificado se comporta exatamente como se o con- 
teudo do arquivo JavaScript especificado aparecesse diretamente entre as marcafoes <script> e </ 
script>. Note que a marcapio de fechamento </script> e obrigatoria em documentos HTML, 
mesmo quando o atributo src e especificado, e que nao ha qualquer conteudo entre as marcapies 
<script> e </script>. Em XHTML, pode-se usar a marcapio de atalho <script/> nesse caso. 

Quando o atributo src e usado, qualquer conteudo entre as marcapies <script> de abertura e fecha¬ 
mento e ignorado. Se quiser, voce pode usar o conteudo da marcapio <script> para incluir docu- 
mentapio ou informa<;6es de direitos de copia do codigo incluido. Note, entretanto, que os valida- 
dores de HTML5 vao reclamar se qualquer texto que nao seja espapr em branco ou um comentario 
de JavaScript aparecer entre <scri.pt src=""> e </script>. 

Existem varias vantagens no uso do atributo src: 

• Ele simplifica seus arquivos HTML, permitindo remover deles grandes blocos de codigo Java¬ 
Script - isto e, ajuda a man ter conteudo e comportamento separados. 

• Quando varias paginas Web compartilham o mesmo codigo JavaScript, o uso do atributo 
src permite que voce mantenha apenas uma copia desse codigo, em vez de ter de editar cada 
arquivo HTML quando o codigo mudar. 

• Se um arquivo de codigo JavaScript e compartilhado por mais de uma pagina, ele so precisa 
ser baixado uma vez, pela primeira pagina que o utilizar - as paginas subsequentes podem 
recupera-lo da cache do navegador. 

• Como o atributo src recebe um URL arbitrario como valor, um programa JavaScript ou uma 
pagina Web de um servidor pode empregar o codigo exportado por outros servidores Web. 
Muitos anuncios na Internet contam com isso. 

• A capacidade de carregar scripts de outros sites nos permite levar as vantagens do uso da 
cache um passo adiante: o Google esta promovendo o uso de URLs padrao bem conhecidos 
para as bibliotecas do lado do cliente mais comumente usadas, permitindo que o navegador 
coloque na cache uma unica copia para uso compartilhado por qualquer site. Vincular codigo 
JavaScript aos servidores do Google pode diminuir o tempo de inicializaQo de suas paginas 
Web, pois e provavel que a biblioteca ja exista na cache do navegador do usuario; porem, voce 
precisa estar disposto a confiar em terceiros para fornecer codigo fundamental para seu site. 
Consulte o endere^o http://code.google.com/apis/ajaxlibs/ para obter mais informa^oes. 

O carregamento de scripts de servidores diferentes daquele que forneceu o documento que utiliza o 
script tem importantes implicates na seguranija. A politica de seguran^a da mesma origem, descrita 




306 Parte II JavaScript do lado do cliente 


na Secjao 13.6.2, impede que codigo JavaScript de um documento de um dominio interaja com o 
conteudo de outro dominio. Contudo, note que a origem do script em si nao importa - somente a 
origem do documento no qual o script esta incorporado. Portanto, a politica da mesma origem nao 
se aplica nesse caso: o codigo JavaScript pode interagir com o documento no qual esta incorporado, 
mesmo quando o codigo tern uma origem diferente da do documento. Quando voce usa o atributo 
src para incluir um script em sua pagina, esta dando ao autor desse script (e ao webmaster do domi¬ 
nio a partir do qual o script e carregado) controle completo sobre sua pagina Web. 


13.2.3 Tipode script 

JavaScript foi a linguagem de script original da Web e, por padrao, os elementos <script> hipotetica- 
mente contem ou fazem referenda a codigo JavaScript. Se quiser usar uma linguagem de script nao 
padrao, como VBScript da Microsoft (que e suportada somente pelo IE), o atributo type deve ser 
utilizado para especificar o tipo de script MIME: 

cscript type=”text/vbscript”> 

' 0 codigo VBScript fica aqui 
</script> 

O valor padrao do atributo type e “text/javascript”. Se quiser, voce pode especificar esse tipo explici- 
tamente, mas isso nunca e necessario. 

Os navegadores mais antigos usavam um atributo language na marca^ao <script>, em vez do atri¬ 
buto type, sendo que as vezes voce ainda vai ver paginas Web que incluem marca^oes como segue: 

cscript language="javascript"> 

// codigo JavaScript aqui... 

</script> 

O atributo language foi desaprovado e nao deve mais ser usado. 

Quando um navegador Web encontra um elemento <script> com um atributo type cujo valor nao 
reconhece, ele analisa o elemento, mas nao tenta exibir ou executar esse conteudo. Isso significa que 
voce pode usar o elemento <script> para incorporar dados textuais arbitrarios em seu documento: 
basta usar o atributo type para especificar um tipo nao executavel para seus dados. Para recuperar os 
dados, voce pode usar a propriedade text do objeto HTMLElement que representa o elemento script (o 
Capitulo 15 explica como obter esses elementos). Note, entretanto, que essa tecnica de incorporado 
de dados so fimciona para scripts em linha. Se voce especificar um atributo src e um type desconhe- 
cido, o script sera ignorado e nada sera baixado do URL especificado. 

13.2.4 Rotinas de tratamento de evento em HTML 

O codigo JavaScript em um script e executado uma vez: quando o arquivo HTML que o contem 
e carregado no navegador Web. Para ser interativo, um programa JavaScript precisa definir meca- 
nismos de tratamento de eventos - fun^oes de JavaScript registradas no navegador Web e depois 
chamadas por ele em resposta a eventos (como entrada de usuario). Como mostrado no infcio deste 
capitulo, o codigo JavaScript pode registrar um mecanismo de tratamento de evento atribuindo uma 
fun<;ao a uma propriedade (como onclick ou onmouseover) de um objeto Element que represente um 
elemento HTML no documento. (Tambem existem outras maneiras de registrar rotinas de trata¬ 
mento de evento - consulte o Capitulo 17.) 
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As propriedades dos mecanismos de tratamento de evento como on click espelham atributos 
HTML com os mesmos nomes e tambem e possfvel deflnir mecanismos de tratamento de evento 
colocando codigo JavaScript em atributos HTML. Por exemplo, para definir uma rotina de trata¬ 
mento de evento que e chamada quando o usuario ativa ou desativa uma caixa de selepio em um 
formulario, voce pode especificar o codigo do mecanismo de tratamento como um atributo do 
elemento HTML que define a caixa de selepio: 

cinput type="checkbox" name="options" value="giftwrap" 

onchange="order.options.giftwrap = this.checked;"> 

O interessante aqui e o atributo onchange. O codigo JavaScript que e o valor desse atributo vai ser 
executado quando o usuario marcar ou desmarcar a caixa de selepio. 

Os atributos de tratamento de eventos definidos em HTML podem incluir qualquer niimero de 
instrufoes JavaScript, separadas umas das outras por pontos e vfrgulas. Essas instru$oes se tornam 
o corpo de uma funpio e essa funfao se torna o valor da propriedade de tratamento de evento cor- 
respondente. (Os detalhes da conversao de texto de atributo HTML em uma funpio JavaScript sao 
abordados na Sepio 17.2.2.) Normalmente, contudo, um atributo de tratamento de evento HTML 
consiste em uma atribuipio simples como a anterior ou em uma chamada simples de uma funpio 
definida em outro lugar. Isso mantem a maior parte de seu codigo JavaScript dentro de scripts e re- 
duz a necessidade de misturar JavaScript com HTML. Na verdade, o uso de atributos de tratamento 
de evento HTML e considerado um estilo pobre por muitos desenvolvedores da Web, que preferem 
man ter conteudo e comportamento separados. 

13.2.5 JavaScript em URLs 

Outra maneira de incluir codigo JavaScript no lado do cliente e em um URL apos o especificador de 
protocolo javascript:. Esse tipo de protocolo especial especifica que o corpo do URL e uma string 
arbitraria de codigo JavaScript a ser executada pelo interpretador JavaScript. Ela e tratada como 
uma unica linha de codigo, ou seja, as instrupies devem ser separadas por pontos e vfrgulas e que 
comen tarios /* */ devem ser usados em lugar de comen tarios //. O “recurso” identificado por um 
URL javascript: e o valor de retorno do codigo executado, convertido em uma string. Se o codigo 
tern um valor de retorno undefined, o recurso nao tern conteudo. 

Um URL javascript: pode ser usado em qualquer lugar em que se usaria um URL normal: no 
atributo href de uma marcapio <a>, no atributo action de um <form>, por exemplo, ou mesmo como 
um argumento de um metodo como window.open(). Um URL JavaScript em um hiperlink poderia 
ser como segue: 

<a href="javascript:new DateQ.toLocaleTimeString();"> 

What time is it? 

</a> 

Alguns navegadores (como o Firefox) executam o codigo do URL e utilizam a string retornada como 
conteudo de um novo documento a exibir. Assim como acontece quando segue um link para um 
URL http:, o navegador apaga o documento atual e exibe o novo. O valor retornado pelo codigo 
anterior nao contem qualquer marcapio HTML, mas se contivesse, o navegador a teria represen- 
tado como faria com o documento HTML equivalente, carregado da forma convencional. Outros 
navegadores (como o Chrome e o Safari) nao permitem que URLs como o anterior sobrescrevam 
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o documento contido - eles apenas ignoram o valor de retorno do codigo. No entanto, eles ainda 
suportam URLs como a seguinte: 

<a href="javascript:alert(new Date().toLocaleTimeString());"> 

Check the time without overwriting the document 

Quando esse tipo de URL e carregado, o navegador executa o codigo JavaScript, mas como nao ha 
valor retornado (o metodo alert () retorna undefined), navegadores como o Firefox nao substituem 
o documento atualmente exibido. (Nesse caso, o URL javascript: tern o mesmo objetivo de um 
handler de evento onclick. O link anterior seria mais bem expresso como um handler onclick em um 
elemento <button> - geralmente, o elemento <a> deve ser reservado para hiperlinks que carregam no- 
vos documentos.) Se quiser garantir que um URL javascript: nao sobrescreva o documento, pode 
usar o operador void para obrigar uma chamada ou expressao de atribui^ao a ser undefined: 

<a href="javascript:void window.open('about:blank');">0pen Window</a> 

Sem o operador void nesse URL, o valor de retorno da chamada do metodo Window.open() seria (em 
alguns navegadores) convertido em uma string e exibido, e o documento corrente seria sobrescrito 
por um documento que contivesse este texto: 

[object Window] 

Assim como os atributos de tratamento de evento HTML, os URLs de JavaScript sao remanescentes 
dos primordios da Web e geralmente sao evitados na HTML moderna. Os URLs javascript: tern 
uma funfao util a desempenhar fora de documentos HTML. Se voce precisa testar um pequeno 
trecho de codigo JavaScript, pode digitar um URL javascript: diretamente na barra de endere?os de 
seu navegador. Outro uso legitimo (e poderoso) dos URLs javascript: e em marcadores de navega¬ 
dor, conforme descrito a seguir. 

13.2.5.1 Bookmarklets 

Em um navegador Web, um “marcador” e um URL salvo. Se voce marca um URL javascript:, esta 
salvando um pequeno script, conhecido como bookmarklet. Um bookmarklet e um mini-programa 
que pode ser ativado facilmente a partir dos menus ou da barra de ferramentas do navegador. O 
codigo de um bookmarklet e executado como se fosse um script na pagina e pode consultar e con- 
figurar conteudo de documento, apresen ta^ao e comportamento. Desde que um bookmarklet nao 
retorne um valor, ele pode operar em qualquer documento que esteja sendo exibido, sem substituir 
esse documento por novo conteudo. 

Considere o URL javascript: em uma marca^ao <a> a seguir. Clicar no link abre um avaliador de 
expressao JavaScript simples que permite avaliar expressoes e executar instru^oes no contexto da 
pagina: 

<a href='javascript: 

var e = r = /* Expressao a avaliar e o resultado */ 

do { 

/* Exibe a expressao e o resultado e pede uma nova expressao */ 
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e = prompt("Expression: " + e + "\n" + r + "\n", e); 

try { r = "Result: " + eval(e); } /* Tenta avaliar a expressao */ 

catch(ex) { r = ex; } /* Ou lembra do erro */ 

} while(e); /* Continua ate que nenhuma expressao seja inserida ou que seja clicado 

void 0; /* Isso impede que o documento corrente seja sobrescrito */ 

JavaScript Evaluator 

Note que, mesmo esse URL de JavaScript sendo escrito em varias linhas, o analisador de HTML 
o trata como uma unica linha e comentarios de uma linha / / nao funcionarao nele. Alem disso, 
lembre-se de que todo o codigo faz parte de um atributo HTML entre aspas simples; portanto, o 
codigo nao pode conter aspas simples. 



Um link como esse e util quando codificado em uma pagina que esta sendo desenvolvida, mas se 
torna muito mais util quando armazenado como um marcador que pode ser executado em qualquer 
pagina. Normalmente, os navegadores permitem que voce marque o destino de um hiperlink dando 
um clique no link com o botao direito do mouse e selecionando algo como Bookmark Link ou ar- 
rastando o link para a barra de ferramentas de marcadores. 


13.3 Execu^ao de programas JavaScript 

Nao existe uma definipio formal de pro grama em JavaScript do lado do cliente. Podemos dizer que 
um programa JavaScript consiste em todo o codigo JavaScript de uma pagina Web (scripts em linha, 
rotinas de tratamento de evento HTML e URLs javascript :), junto com o codigo JavaScript exter- 
no referenciado com o atributo src de uma marca^ao <script>. Todos esses itens de codigo separados 
compartilham um unico objeto global Window. Isso significa que todos veem o mesmo objeto Do¬ 
cument e compartilham o mesmo conjunto de funfoes e variaveis globais: se um script definir uma 
nova variavel ou funijao global, essa variavel ou funpio vai ser visivel para qualquer codigo JavaScript 
executado apos o script. 

Se uma pagina Web contem um quadro incorporado (usando o elemento <iframe>), o codigo Java¬ 
Script no documento incorporado tern um objeto global diferente do codigo do documento que esta 
incorporando e pode ser considerado um programa JavaScript separado. Lembre-se, contudo, de 
que nao existe definipio formal de quais sao os limites de um programa JavaScript. Se o documento 
conteiner e o documento contido estao no do mesmo servidor, o codigo de um pode interagir com 
o do outro e, se quiser, voce pode trata-los como duas partes interagentes de um unico programa. A 
Sepio 14.8.3 explica mais sobre o objeto global Window e as intera$oes entre programas de janelas 
e quadros separados. 

Os URLs javascript: de bookmarklets existem fora de qualquer documento e podem ser consi- 
derados um tipo de extensao do usuario ou modificapio de outros programas. Quando o usuario 
executa um bookmarklet, o codigo JavaScript marcado tem acesso ao objeto global e ao conteudo do 
documento corrente e pode manipula-lo como quiser. 

A execuQo de programas JavaScript ocorre em duas fases. Na primeira fase, o conteudo do docu¬ 
mento e carregado e o codigo dos elementos <script> (tanto scripts em linha como scripts externos) 
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e executado. Os scripts geralmente (mas nao sempre; consulte a Segao 13.3.1) sao executados na 
ordem em que aparecem no documento. O codigo JavaScript dentro de qualquer script e executado 
de cima para baixo, na ordem em que aparece, sujeito, e claro, as condicionais, aos lagos e a outras 
instrugoes de controle de JavaScript. 

Uma vez que o documento seja carregado e todos os scripts sejam executados, a execugao de 
JavaScript entra em sua segunda fase. Essa fase e assincrona e dirigida por eventos. Durante essa 
fase dirigida por eventos, o navegador Web chama fungoes de tratamento de evento (definidas 
pelos atributos de tratamento de evento HTML, por scripts executados na primeira fase ou por 
rotinas de tratamento de evento chamadas anteriormente), em resposta aos eventos que ocorrem 
de forma assincrona. As rotinas de tratamento de evento sao mais comumente chamadas em 
resposta a entrada do usuario (cliques de mouse, pressionamentos de tecla, etc.), mas tambem 
podem ser disparadas por atividade da rede, tempo decorrido ou erros no codigo JavaScript. Os 
eventos e as rotinas de tratamento de evento estao descritos em detalhes no Capitulo 17. Tam¬ 
bem vamos ter mais a dizer sobre eles na Segao 13.3.2. Note que os URLs javascript: incorpo- 
rados em uma pagina Web podem ser considerados um tipo de rotina de tratamento de evento, 
pois nao tem efeito algum ate serem ativados por um evento de entrada do usuario, como o 
clique em um link ou o envio de um formulario. 

Um dos primeiros eventos que ocorrem durante a fase dirigida por eventos e o evento load, indican- 
do que o documento esta totalmente carregado e pronto para ser manipulado. Os programas Java¬ 
Script frequentemente usam esse evento como gatilho ou sinal de partida. E comum ver programas 
cujos scripts definem fungoes mas que nada fazem alem de definir uma fungao de tratamento de 
evento onload para ser disparada pelo evento load no inicio da fase dirigida por eventos da execu- 
gao. E essa rotina de tratamento onload que manipula o documento e faz o que quer que seja que 
o programa supoe fazer. A fase de carregamento de um programa JavaScript e relativamente breve, 
normalmente durando apenas um ou dois segundos. Uma vez carregado o documento, a fase dirigi¬ 
da por eventos dura enquanto o documento for exibido pelo navegador Web. Como essa fase e as- 
sincrona e dirigida por eventos, pode haver longos perfodos de inatividade, quando nenhum codigo 
JavaScript e executado, pontuados por picos de atividade disparada pelo usuario ou por eventos da 
rede. A Segao 13.3.4 aborda as duas fases da execugao de JavaScript com mais detalhes. 

Tanto JavaScript basica como JavaScript do lado do cliente tem um modelo de execugao de thread 
unico. Os scripts e as rotinas de tratamento de evento sao (ou devem parecer ser) executados um 
por vez, sem concorrencia. Isso mantem a programagao com JavaScript simples e sera discutido na 
Segao 13.3.3. 

13.3.1 Scripts smcronos, assi'ncronos e adiados 

Quando JavaScript foi adicionada pela primeira vez nos navegadores Web, nao havia qualquer API 
para percorrer e manipular a estrutura e o conteudo de um documento. A unica maneira pela qual o 
codigo JavaScript podia afetar o conteudo de um documento era gerando esse conteudo dinamica- 
mente, enquanto o documento estava sendo carregado. Isso era feito usando-se o metodo document. 
write(). O Exemplo 13-3 mostra como era o estado da arte do codigo JavaScript em 1996. 

Exemplo 13-3 Gerando conteudo de documento no momento do carregamento 
<hi>Table of Factorials</hi> 
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function factorial(n) { // Uma funcao para calcular fatoriais 

if (n <= l) return n; 
else return n*factorial(n-l); 

} 

document.write("<table>"); // Inicia uma nova tabela HTML 

document.write("<trxth>n</thxth>n!</thx/tr>"); // Saida do cabecalho da tabela 

for(var i = l; i <= 10; i++) { // Saida de 10 linhas 

document. write("<trxtd>" + i + "</tdxtd>" + factorial(i) + "</tdx/tr>"); 

} 

document.write("</table>"); // Fim da tabela 

document.write("Generated at " + new Date()); // Saida de urn timestamp 

</script> 

Quando um script passa texto para document.writeQ, esse texto e adicionado no fluxo de entrada 
do documento e o analisador de HTML se comporta como se o elemento script fosse substituido 
por esse texto. O uso de document.write() nao e mais considerado um bom estilo, mas isso ainda e 
possivel (consulte a Sefao 15.10.2) e esse fato tern uma implica^ao importante. Quando o analisador 
de HTML encontra um elemento <script>, deve, por padrao, executar o script antes de retomar a 
analise e representar o documento. Isso nao e um grande problema para scripts em linha, mas se o 
codigo-fonte do script esta em um arquivo externo especificado com um atributo src, isso significa 
que as partes do documento que vem apos o script nao vao aparecer no navegador ate que o script 
tenha sido baixado e executado. 

Essa execuQo de script smcrona ou com bloqueio e apenas o padrao. A marcaQo <script> pode ter 
atributos defer e async, os quais (nos navegadores que os suportam) fazem os scripts serem executa- 
dos de forma diferente. Esses atributos sao booleanos - eles nao tern um valor; apenas precisam estar 
presentes na marcaQo <script>. HTML5 diz que esses atributos so tern significado quando usados 
em conjunto com o atributo src, mas alguns navegadores tambem podem suportar scripts em linha 
adiados: 

cscript defer src="deferred.js"x/script> 
cscript async src="async.js"x/script> 

Os atributos defer e async sao maneiras de dizer ao navegador que o script vinculado nao usa 
document.writeQ e nao vai gerar conteudo de documento e que, portanto, o navegador pode conti- 
nuar a analisar e representar o documento enquanto baixa o script. O atributo defer faz o navegador 
adiar a execuQo do script ate depois que o documento tenha sido carregado e analisado e estiver 
pronto para ser manipulado. O atributo async faz o navegador executar o script assim que possivel, 
mas nao bloqueia a analise do documento enquanto o script esta sendo baixado. Se uma marcaqao 
<script> tiver os dois atributos, um navegador que os suporte vai respeitar o atributo async e ignorar 
o atributo defer. 

Note que os scripts adiados sao executados na ordem em que aparecem no documento. Os scripts 
assincronos sao executados enquanto carregam, ou seja, podem ser executados fora da ordem. 

Quando este livro estava sendo escrito, os atributos async e defer ainda nao estavam amplamente 
implementados e devem ser considerados apenas como dicas de otimizaQo: suas paginas Web de- 
vem ser projetadas para funcionar corretamente, mesmo que scripts adiados e assincronos sejam 
executados de forma smcrona. 

Voce pode carregar e executar scripts de forma assincrona mesmo em navegadores que nao supor¬ 
tam o atributo async, criando um elemento <script> dinamicamente e inserindo-o no documento. 
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A fungao loadasyncQ mostrada no Exemplo 13-4 faz isso. As tecnicas utilizadas sao explicadas no 
Capftulo 15. 

Exemplo 13-4 Carregandoeexecutandoum script de forma assmcrona 

// Carrega e executa um script de forma assincrona a partir 
function loadasync(url) { 

var head = document.getElementsByTagName("head")[o]; // 
var s = document.createElement("script"); // 

s.src = url; // 

head.appendChild(s); // 

} 

Observe que essa fun pro loadasyncQ carrega scripts dinamicamente - scripts que nao sao incluidos 
em linha dentro da pagina Web nem referenciados estaticamente a partir da pagina Web sao carrega- 
dos no documento e se tornam parte do programa JavaScript em execugao. 

13.3.2 JavaScript dirigida poreventos 

O programa JavaScript antigo, mostrado no Exemplo 13-3, e sincrono: ele comepi a executar quan- 
do a pagina carrega, produz alguma saida e entao termina. Esse tipo de programa e muito raro 
atualmente. Em vez disso, escrevemos programas que registram fungoes de tratamento de eventos. 
Entao, essas fun foes sao chamadas de forma assmcrona quando ocorrem os eventos para os quais 
foram registradas. Um aplicativo Web que quisesse habilitar atalhos de teclado para agoes comuns 
registraria uma rotina de tratamento para eventos de tecla, por exemplo. Ate os programas nao inte- 
rativos utilizam eventos. Suponha que voce quisesse escrever um programa que analisasse a estrutura 
de seu documento e gerasse automaticamente um sumario para o documento. Nenhuma rotina de 
tratamento seria necessaria para eventos de entrada de usuario, mas o programa ainda registraria 
uma rotina de tratamento de evento onload para saber quando o documento tivesse terminado de 
carregar e estivesse pronto para gerar o sumario. 

Os eventos e o tratamento de eventos sao temas do Capftulo 17, mas esta segao fornece uma breve 
visao geral. Os eventos tern nomes, como “click”, “change”, “load”, “mouseover”, “keypress” ou 
“readystatechange”, que indicam o tipo geral do evento que ocorreu. Eles tambem tern um alvo, que 
e o objeto em que ocorreram. Quando falamos de um evento, devemos especificar tanto o tipo (o 
nome) como o alvo: um evento click em um objeto HTMLButtonElement, por exemplo, ou um 
evento readystatechange em um objeto XMLHttpRequest. 

Se queremos que nosso programa responda a um evento, escrevemos uma fungao conhecida como 
“rotina de tratamento de evento”, “ouvinte de evento” ou, as vezes, apenas “retorno de chamada” (ou 
callback). Entao, registramos essa fungao para que seja ativada quando o evento ocorrer. Conforme 
observado anteriormente, isso pode ser feito usando-se atributos HTML, mas esse tipo de mistura 
de codigo JavaScript com conteudo HTML e desaconselhado. Em vez disso, a maneira mais simples 
de registrar uma rotina de tratamento de evento normalmente e atribuir uma fungao JavaScript a 
uma propriedade do objeto alvo, com codigo como o seguinte: 
window.onload = functionQ { ... }; 

document.getElementByldC'buttonl").onclick = functionQ { ... }; 


de um URL especificado 

Localiza <head> do documento 
Cria um elemento <script> 
Configura seu atributo src 
Insere o <script> no cabecalho 
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function handleResponseQ { ... } 
request.onreadystatechange = handleResponse; 

Observe que as propriedades da rotina de tratamento de evento tem nomes que, por convenpio, 
comepim com “on” e sao seguidas pelo nome do evento. Note tambem que nao existem chamadas 
de funpio nos codigos anteriores: estamos atribuindo as proprias fun^oes a essas propriedades. O na- 
vegador vai fazer a chamada quando os eventos ocorrerem. A programapio assfncrona com eventos 
frequentemente envolve fun^oes aninhadas e nao e raro acabar escrevendo codigo que define fun^oes 
dentro de fimfoes dentro de finnjoes. 

Na maioria dos navegadores, para a maioria dos tipos de eventos, as rotinas de tratamento de evento 
sao passadas a um objeto como um argumento e as propriedades desse objeto fornecem detalhes 
sobre o evento. O objeto passado para um evento click, por exemplo, teria uma propriedade especifi- 
cando qual botao do mouse foi clicado. (No IE, esses detalhes do evento sao armazenados no objeto 
global event, em vez de serem passados para a funpio de rotina de tratamento.) O valor de retorno 
de uma rotina de tratamento de evento as vezes e usado para indicar se a funpio tratou do evento 
suficientemente e para impedir que o navegador execute qualquer apio padrao que, de outro modo, 
executaria. 

Os eventos cujos alvos sao elementos de um documento frequentemente se propagam para cima na 
arvore de documentos, em um processo conhecido como “bolha”. Se o usuario clica com o mouse 
em um elemento <button>, por exemplo, um evento click e ativado no botao. Se esse evento nao e 
tratado (e sua propagapio interrompida) por uma funpio registrada no botao, o evento sobe como 
uma bolha para o elemento dentro do qual o botao esta aninhado e qualquer rotina de tratamento 
de evento click registrada nesse elemento container vai ser ativada. 

Se voce precisa registrar mais de uma funpio de tratamento de evento para um unico evento ou se 
quer escrever um modulo de codigo que possa registrar rotinas de tratamento de evento com segu- 
ranpi, mesmo que outro modulo ja tenha registrado uma rotina de tratamento para o mesmo evento 
no mesmo alvo, tem de usar outra tecnica de registro de rotina de tratamento de evento. A maioria 
dos objetos que podem ser alvos de evento tem um metodo chamado addEventListenerQ, o qual 
permite o registro de varios ouvintes: 

window.addEventListener("load", function() {...}, false); 

request.addEventListener("readystatechange", functionQ {...}, false); 

Note que o primeiro argumento dessa funpio e o nome do evento. Embora addEventListener() 
esteja padronizado ha mais de uma decada, somente agora a Microsoft o esta implementando para o 
IE9. No IE8 e anteriores, voce precisa usar um metodo semelhante, chamado attachEvent(): 

window.attachEvent("onload", functionQ {...}); 

Consulte o Capitulo 17 para mais informapies sobre addEventListenerQ e attachEventQ. 

Os programas JavaScript do lado do cliente tambem utilizam outros tipos de notificapio assfncrona 
que, tecnicamente falando, nao sao eventos. Se voce configurar a propriedade onerror do objeto 
Window com uma funpio, essa funpio vai ser chamada quando ocorrer um erro (ou qualquer ex- 
cepio nao capturada) de JavaScript (consulte a Sepio 14.6). Alem disso, as fun pies setTimeoutQ e 
setlntervalQ (esses sao metodos do objeto Window e, portanto, funpies globais de JavaScript do 
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lado do cliente) disparam a chamada de uma fungao especificada apos um perfodo de tempo de- 
terminado. As fungoes passadas para setTimeoutQ sao registradas de modo diferente das rotinas de 
tratamento de evento verdadeiras e normalmente sao denominadas “callback”, em vez de “rotinas 
de tratamento”, mas sao tao assincronas como as rotinas de tratamento de evento. Consulte a Segao 
14.1 para mais informagoes sobre setTimeoutQ e setlntervalQ. 

O Exemplo 13-5 demonstrao uso de setTimeout(), addEventListener() e attachEvent() paradefinir 
uma fungao on Load () que registra uma fungao para ser executada quando o documento termina de 
carregar. onLoad() e uma fungao muito util e vamos usa-la em exemplos por todo o restante deste 
livro. 

Exemplo 13-5 onLoad():chama uma fungao quando o documento carrega 

// Registra a funcao f para ser executada quando o documento terminar de carregar. 

// Se o documento ja foi carregado, executa de forma assincrona ASAP, 
function onLoad(f) { 

if (onLoad.loaded) // Se o documento ja esta carregado 

window.setTimeout(f, 0); // Enfileira f para ser executada assim que 

// possivel 

else if (window.addEventListener) // Metodo de registro de evento padrao 
window.addEventListener("load", f, false); 
else if (window.attachEvent) // 0 IE8 e anteriores usam isto em seu lugar 

window.attachEvent("onload", f); 

} 

// Comega configurando um flag que indica se o documento ainda nao esta carregado. 
onLoad.loaded = false; 

// E registra uma funcao para configurar o flag quando o documento estiver carregado. 
onLoad(function() { onLoad.loaded = true; }); 

13.3.3 Modelo de threading de JavaScript do lado do cliente 

JavaScript basica nao contem qualquer mecanismo de threading e JavaScript do lado do cliente 
tradicionalmente tambem nao tern um mecanismo definido. A HTML5 define “Web workers”, os 
quais servem como um tipo de thread de segundo piano (mais sobre Web workers a seguir), mas 
JavaScript do lado do cliente ainda se comporta como se fosse rigorosamente de thread unica. Mes- 
mo quando a execugao concomitante e possivel, JavaScript do lado do cliente nao pode detectar o 
fato de que isso esta ocorrendo. 

A execugao com thread unica contribui para scripts muito mais simples: pode-se escrever codigo 
com a certeza de que duas rotinas de tratamento de evento nunca sera executadas ao mesmo tempo. 
Voce pode manipular conteudo de documento sabendo que nenhuma outra thread esta tentando 
modifica-lo ao mesmo tempo e nunca precisa se preocupar com bloqueios, impasses ou condigoes de 
disputa ao escrever codigo JavaScript. 

A execugao com thread unica significa que os navegadores Web devem parar de responder a entrada 
do usuario enquanto scripts e rotinas de tratamento de evento estao em execugao. Isso sobrecarrega 
os programadores JavaScript, pois significa que os scripts e as rotinas de tratamento de evento de 
JavaScript nao devem executar por muito tempo. Se um script executar uma tarefa que usa muito 
poder de computagao, vai introduzir um atraso no carregamento de documentos e o usuario nao 
vera o conteudo de documentos ate que o script termine. Se uma rotina de tratamento de evento 
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executar uma tarefa que usa muito poder de computa^ao, o navegador podera se tornar nao respon- 
sivo, possivelmente fazendo o usuario pensar que ele caiu 2 . 

Se seu aplicativo precisa fazer um calculo que cause um atraso perceptive!, voce deve permitir que o 
documento seja totalmente carregado antes de efetuar esse calculo e deve certificar-se de notificar o 
usuario de que o calculo esta em andamento e o navegador nao esta travado. Se for possrvel separar 
o calculo em subtarefas distintas, voce pode usar metodos como setTimeoutQ e setlnterval() para 
executa-las em segundo piano, enquanto atualiza um indicador de progresso que de um retorno para 
o usuario. 

HTML5 define uma forma controlada de concomitancia, denominada “Web worker”. Um Web 
worker e uma thread de segundo piano para executar tarefas que usam muito poder de computa^ao 
sem congelar a interface com o usuario. O codigo executado em uma thread Web worker nao tern 
acesso ao conteudo do documento, nao compartilha nenhum estado com a thread principal ou com 
outros workers e so pode se comunicar com a thread principal e com outros workers por meio de 
eventos assincronos, de modo que a concomitancia nao pode ser detectada pela thread principal e os 
Web workers nao alteram o modelo basico de execu^ao com thread unica dos programas JavaScript. 
Consulte a Se^ao 22.4 para ver detalhes completos sobre Web workers. 

13.3.4 Linha do tempo de JavaScript do lado do cliente 

Ja vimos que os programas JavaScript come^am em uma fase de execu^ao de script e depois passam 
para uma fase de tratamento de eventos. Esta se^ao explica a linha do tempo da execu^ao de progra¬ 
mas JavaScript com mais detalhes. 

1. O navegador Web cria um objeto Document e comefa a analisar a pagina Web, adicio- 
nando nos de objetos Element e Text no documento, a medida que analisa os elementos 
HTML e seu conteudo textual. A propriedade document.readyState tern o valor “loading” 
nesse estagio. 

2. Quando o analisador de HTML encontra elementos <script> que nao tern os atributos async 
ou defer, ele adiciona esses elementos no documento e, em seguida, executa o script em linha 
ou externo. Esses scripts sao executados de forma sincrona e o analisador faz uma pausa en¬ 
quanto o script e baixado (se necessario) e executado. Scripts como esses podem usar document, 
write () para inserir texto no fluxo de entrada. Esse texto vai se tornar parte do documento 
quando o analisador reiniciar. Muitas vezes, os scripts sincronos simplesmente definem fun- 
foes e registram rotinas de tratamento de evento para uso posterior, mas podem percorrer e 
manipular a arvore de documentos conforme ela existe ao serem executados. Isto e, os scripts 
sincronos podem ver seus proprios elementos <script> e o conteudo de documentos que ve- 
nham antes deles. 

3. Quando o analisador encontra um elemento <script> que tern o atributo async configurado, 
comeqa a baixar o texto do script e continua a analisar o documento. O script sera executado 
assim que possrvel, depois de baixado, mas o analisador nao para e espera o download. Os 


Alguns navegadores se previnem contra ataques de nega^ao de servi?o e la<;os infinitos acidentais avisando o usuario se 
um script ou uma rotina de tratamento de evento demora muito para executar. Isso da ao usuario a chance de cancelar um 
script descontrolado. 
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scripts assincronos nao devem usar o metodo document.write(). Eles podem ver seus proprios 
elementos <script> e todos os elementos de documento que venham antes deles, podendo ou 
nao ter acesso a conteudo de documento adicional. 

4. Quando o documento e completamente analisado, a propriedade document.readyState muda 
para “interactive”. 

5. Qualquer script que tiver o atributo defer configurado e executado, na ordem em que aparece 
no documento. Os scripts assincronos tambem podem ser executados nesse momento. Os 
scripts adiados tern acesso a arvore de documentos completa e nao devem usar o metodo docu¬ 
ment. write(). 

6. O navegador dispara um evento DOMContentLoaded no objeto Document. Isso faz a tran- 
si<jao da fase de execu<jao de script sincrono para a fase assincrona da execu<jao do programa 
dirigida por eventos. Note, entretanto, que neste momento ainda pode haver scripts async que 
nao foram executados. 

7. Neste ponto, o documento esta completamente analisado, mas o navegador ainda pode estar 
esperando o carregamento de conteudo adicional, como imagens. Quando o carregamento 
de todo o conteudo termina e quando todos os scripts async foram carregados e executados, a 
propriedade document. readyState muda para “complete” e o navegador Web dispara um even¬ 
to de carga (load) no objeto Window. 

8. Dai em diante, as rotinas de tratamento de evento sao chamadas de forma assincrona, em 
resposta a eventos de entrada do usuario, eventos de rede, expira^oes de cronometro, etc. 

Essa e uma linha do tempo idealizada e navegador algum suporta todos os seus detalhes. O evento 
load e suportado universalmente: todos os navegadores o disparam e essa e a tecnica mais comum 
para se determinar que o documento esta completamente carregado e pronto para ser manipulado. 
O evento DOMContentLoaded e disparado antes do evento load e e suportado por todos os nave¬ 
gadores atuais, exceto o IE. A propriedade document.readyState era implementada pela maioria dos 
navegadores quando este livro estava sendo escrito, mas os valores dessa propriedade diferem ligeira- 
mente de um navegador para outro. O atributo defer e suportado por todas as versoes atuais do IE, 
mas somente agora esta sendo implementado pelos outros navegadores. O suporte para o atributo 
async ainda nao era comum quando este livro estava sendo escrito, mas a execuQo assincrona de 
script por meio da tecnica mostrada no Exemplo 13-4 e suportada por todos os navegadores atuais. 
(Note, contudo, que a capacidade de carregar scripts dinamicamente com fun (joes como loadasyncQ 
torna indistinto o limite entre as fases de carregamento de script e a dirigida por eventos da execuQo 
do programa.) 

Essa linha do tempo nao especifica quando o documento se torna visivel para o usuario ou quando 
o navegador Web deve comecjar a responder aos eventos de entrada do usuario. Esses sao detalhes da 
implementa<jao. Para documentos muito longos ou conexoes de rede muito lentas, teoricamente e 
possivel um navegador Web representar parte de um documento e permitir que o usuario comece a 
interagir com ela antes que todos os scripts tenham executado. Nesse caso, os eventos de entrada do 
usuario podem ser disparados antes que a fase dirigida por eventos da executjao do programa tenha 
come<jado formalmente. 
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13.4 Compatibilidade e interoperabilidade 

O navegador Web e o sistema operacional dos aplicativos Web, mas a Web e um ambiente heterogeneo 
e seus documentos e aplicativos serao vistos e executados em navegadores de epocas diferentes (desde 
lan^amentos beta de ultima gera^ao ate navegadores de dez anos atras, como o IE6), de diferentes for- 
necedores (Microsoft, Mozilla, Apple, Google, Opera), executando em diferentes sistemas operacionais 
(Windows, Mac OS, Linux, OS, Android). E um desafio escrever programas complexos em JavaScript 
do lado do cliente que sejam executados corretamente em uma variedade tao ampla de plataformas. 

Os problemas de compatibilidade e interoperabilidade de JavaScript do lado do cliente caem em tres 
categorias gerais: 

Evolugao 

A plataforma Web esta sempre evoluindo e expandindo. Um organismo de padronizatjao pro- 
poe um novo recurso ou API. Se o recurso parece util, os fornecedores de navegador o imple- 
mentam. Se fornecedores suficientes o implementam com capacidade de opera^ao conjunta, 
os desenvolvedores comefam a utilizar e a depender do recurso; assim, ele garante um lugar 
permanente na plataforma Web. As vezes, os fornecedores de navegador e os desenvolvedores 
Web tomam a iniciativa e os organismos de padroniza^ao escrevem a versao oficial bem depois 
que o recurso ja e um padrao de fato. Em um ou outro caso, um novo recurso foi adicionado 
na Web. Os navegadores novos o suportam e os antigos, nao. Os desenvolvedores Web fleam 
divididos entre querer utilizar novos recursos poderosos e querer que suas paginas Web pos- 
sam ser utilizadas pelo maior niimero de visitantes - mesmo aqueles que nao estao usando os 
navegadores mais recentes. 

Nao implementagdo 

As vezes, os fornecedores de navegador tern opinioes diferentes quanto a um recurso em es¬ 
pecial ser util o suficiente para ser implementado. Alguns o implementam e outros nao. Nao 
se trata de uma questao de navegadores atuais com o recurso versus navegadores mais antigos 
sem ele, mas sim de implementadores de navegador que priorizaram o recurso versus aqueles 
que nao priorizaram. O IE8, por exemplo, nao oferece suporte para o elemento <canvas>, 
embora todos os outros navegadores o tenham adotado. Um exemplo mais notorio e a decisao 
da Microsoft de nao implementar a especifica^ao de eventos Level 2 do DOM (que define 
addEventListener() e metodos relacionados). Essa especifica^ao foi padronizada ha quase uma 
decada e outros fornecedores de navegador o suportam ha muito tempo . 


Erros 

Todo navegador tern erros e nenhum implementa todas as APIs de JavaScript do lado do clien¬ 
te exatamente conforme o especificado. As vezes, escrever codigo compatfvel em JavaScript do 
lado do cliente e uma questao de estar ciente e saber como solucionar os erros nos navegadores 
existentes. 

Felizmente, a linguagem JavaScript em si e implementada considerando a interoperabilidade por 
todos os fornecedores de navegador e nao e uma fonte de problemas de compatibilidade. Todos os 
navegadores tern implementaffies interoperaveis de ES3 e, quando este livro estava sendo escrito, 


3 Para dar credito a Microsoft, o IE9 agora oferece suporte para o elemento <canvas> e para o metodo addEventListener(). 
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todos os fornecedores estavam trabalhando na implementa^ao de ES5. A transi^ao entre ES3 e ES5 
pode ser a fonte de problemas de compatibilidade, pois alguns navegadores suportam o modo res- 
trito enquanto outros nao, mas a expectativa e de que os fornecedores de navegador implementem 
ES5 de forma interoperavel. 

O primeiro passo para tratar de problemas de compatibilidade em JavaScript do lado do cliente e 
saber quais sao esses problemas. O ciclo de lan^amento de navegadores Web e cerca de tres vezes 
mais rapido do que o ciclo de lan^amento deste livro, ou seja, este livro nao pode indicar com se- 
guran^a quais versoes de qual navegador implementam quais recursos e muito menos descrever os 
erros existentes ou a qualidade da implementa^ao dos recursos nos diversos navegadores. E melhor 
ver detalhes como esses na Web. A tentativa de padroniza^ao HTML5 tern como objetivo produzir 
um conjunto de teste. Quando este livro estava sendo escrito, tais testes nao existiam, mas quando 
existirem, deverao fornecer muitas informafoes sobre compatibilidade de navegador. Enquanto isso, 
aqui estao alguns sites que talvez voce ache uteis: 

https://developer. mozilla. org 

Mozilla Developer Center 

http:llmsdn. microsoft. com 

Microsoft Developer Network 

http://developer, apple, com!safari 

Safari Dev Center na Apple Developer Connection 

http:IIcode.google, com/doctype 

O Google descreve seu projeto Doctype como “uma enciclopedia da Web aberta”. Esse site 
que pode ser editado pelo usuario content extensas tabelas de compatibilidade para JavaScript 
do lado do cliente. Quando este livro estava sendo escrito, essas tabelas apenas relatavam a 
existencia de varias propriedades e metodos de cada navegador: elas nao diziam se esses recur¬ 
sos funcionavam corretamente. 

http:/ten. wikipedia. org/wiki/Comparison_of_layout_engines_(HTML _5) 

Artigo da Wikipedia que monitora o status de implementa^ao de recursos e APIs da HTML5 
em varios navegadores. 

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Document_Object_Model) 

Artigo semelhante que monitora o status de implementa?ao dos recursos DOM. 

http:/I a. deveria. com/caniuse 

O site “When can I use...” (Quando posso usar...) monitora o status de implementaQo de 
importantes recursos da Web, permite que sejam filtrados de acordo com varios criterios e 
recomenda seu uso sempre que existem navegadores que nao suportam o recurso. 

http:/1www. quirksmode. org/dom 

Tabelas que listam a compatibilidade de varios navegadores com o DOM W3C. 
http://webdevout.net/browser-support 

Outro site que tenta monitorar a implementaQo de padroes da Web por parte dos fornecedo¬ 
res de navegador. 
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Note que os tres ultimos sites listados sao mantidos por pessoas. Apesar da dedicagao desses herois de 
JavaScript do lado do cliente, esses sites podem nem sempre estar atualizados. 

Conhecer as incompatibilidades entre os navegadores e apenas o primeiro passo, evidentemente. Em 
seguida, e preciso decidir como se vai tratar delas. Uma estrategia e restringir-se a usar somente os 
recursos suportados universalmente (ou facilmente simulados) por todos os navegadores que voce 
opte por suportar. O site “When can I use...”, mencionado anteriormente ( http:lla.deveria.com.lca- 
niuse), e baseado nessa estrategia: ele lista varios recursos que vao se tornar utilizaveis assim que o IE6 
for desativado e nao tiver mais uma fatia de mercado significativa. As subsegoes a seguir explicam 
algumas estrategias menos passivas que podem ser usadas para solucionar incompatibilidades no 
lado do cliente. 


Uma palavra sobre "navegadores atuais" 

JavaScript do lado do cliente e urn alvo movel, em especial com o advento de ES5 e HTML5. Como a pla- 
taforma esta evoluindo rapidamente, eu evito fazer dedaragoes categoricas sobre versoes especificas de 
navegadores especificos: e provavel que tais afirmativas fiquem desatualizadas bem antes do surgimento 
de uma nova edigao deste livro. Portanto, voce vai ver que muitas vezes limito minhas dedaragoes com lin- 
guagem intencionalmente vaga, como"todos os navegadores atuais"(ou, as vezes,"todos os navegadores 
atuais, exceto o IE"). Para contextualizar isso, enquanto eu estava escrevendo este capitulo, os navegado¬ 
res correntes (nao beta) eram: 

• Internet Explorer 8 

• Firefox3.6 

• Safari 5 

• ChromeS 

• Opera 10.10 

Quando este livro chegar as livrarias, os navegadores atuais provavelmente vao ser Internet Explorer 9, 
Firefox 4, Safari 5, Chrome 11 e Opera 11. 

Isso nao e uma garantia de que toda dedaragao neste livro sobre "navegadores atuais" seja verdadeira 
para cada urn desses navegadores especificos. Contudo, permite saber quais navegadores representavam 
a tecnologia corrente quando este livro foi escrito. 

A quinta edigao deste livro usou a frase "navegadores modernos", em vez de "navegadores atuais". Aquela 
edigao foi publicada em 2006, quando os navegadores correntes eram Firefox 1.5, IE6, Safari 2 e Opera 
8.5 (o navegador Chrome da Google ainda nao existia). Qualquer referenda a "navegadores modernos" 
restantes neste livro pode agora ser tomada como "todos os navegadores", pois navegadores mais antigos 
do que esses agora sao muito raros. 

Muitos dos recursos mais recentes do lado do cliente descritos neste livro (em especial no Capitulo 
22) ainda nao sao implementados por todos os navegadores. Os recursos que optei por documentar 
nesta edigao estao sendo desenvolvidos sob urn processo de padroes abertos, foram implementados 
em pelo menos urn navegador langado, estao em desenvolvimento em pelo menos mais urn e parece 
provavel que serao adotados por todos os fornecedores de navegador (com a possivel excegao da 
Microsoft). 
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13.4.1 Bibliotecas de compatibilidade 

Uma das maneiras mais faceis de lidar com incompatibilidades e usar bibliotecas de codigo que 
as solucionam para voce. Considere o elemento <canvas> de elementos graficos do lado do cliente 
(o tema do Capitulo 21), por exemplo. OIEeo unico navegador atual que nao oferece suporte 
para esse recurso. Contudo, ele suporta uma obscura linguagem de elementos graficos do lado do 
cliente proprietaria chamada VML e o elemento canvas pode ser emulado em cima dela. O projeto 
de codigo-fonte aberto “explorercanvas”, no endere^o http://code.google.eom/p/explorercanvas, lanijou 
uma biblioteca que faz exatamente isso: voce inclui um unico arquivo de codigo JavaScript chamado 
excanvas, js e o IE se comporta como se oferecesse suporte para o elemento <canvas>. 

excanvas.js e um exemplo especialmente puro de biblioteca de compatibilidade. E possivel escrever 
bibliotecas semelhantes paracertos recursos. Os metodos Array deES 5 (Se^ao 7.9), como forEachQ, 
map() e reduceQ, podem ser emulados de modo quase perfeito em ES3 e, adicionando a biblioteca 
apropriada em suas paginas, voce pode tratar esses metodos muito uteis como parte da plataforma 
basica de todos os navegadores. 

As vezes, no entanto, nao e possivel implementar um recurso completamente (ou eficientemente) 
em navegadores que nao o suportam. Conforme ja mencionado, oIEeo unico navegador que nao 
implementa uma API de tratamento de eventos padrao, incluindo o metodo addEventListenerQ 
para registrar rotinas de tratamento de evento. O IE suporta um metodo semelhante, chamado 
attachEventQ. attachEventQ nao e tao poderoso quanto addEventListenerQ e nao e viavel imple¬ 
mentar o padrao inteiro de forma transparente sobre o que o IE oferece. Em vez disso, os desenvol- 
vedores as vezes definem um metodo de tratamento de eventos de meio-termo - frequentemente 
chamado addEventQ - que pode ser implementado de forma portavel com addEventListenerQ ou 
attachEventQ. Entao, eles escrevem todo seu codigo para usar addEventQ em lugar de addEventLis¬ 
tenerQ ou attachEventQ. 

Na pratica, atualmente muitos desenvolvedores Web utilizam estruturas JavaScript do lado do clien¬ 
te, como a jQuery (consulte o Capitulo 19), em todas as suas paginas Web. Uma das fun<;6es que 
torna essas estruturas tao indispensaveis e que elas definem uma nova API do lado do cliente e a 
implementam de forma compativel para todos os navegadores. Em jQuery, por exemplo, o regis- 
tro de rotina de tratamento de eventos e feito com um metodo chamado bindQ. Se voce adotar 
jQuery para todo desenvolvimento Web, nunca vai precisar pensar nas incompatibilidades entre 
addEventListenerQ e attachEventQ. Consulte a SeQo 13.7 para mais informa^oes sobre estruturas 
do lado do cliente. 

13.4.2 Graded browser support 

Graded browser support e uma tecnica de teste e garantia de qualidade promovida e defendida 
pela Yahoo! que traz algum equilibrio a normalmente descontrolada proliferafao de variantes de 
fornecedores/versao/sistema operacional de navegadores. Sucintamente, o graded browser support 
envolve escolher navegadores “grau A” que recebem suporte e teste totais e identificar navegadores 
“grau C” que nao sao suficientemente poderosos. Os navegadores grau A recebem paginas Web 
completas e os navegadores grau C funciona versoes minimas, somente de HTML das paginas 
que nao exigem JavaScript ou CSS. Os navegadores que nao sao nem grau A, nem grau C sao 
denominados grau X: normalmente, sao navegadores novos ou especialmente raros. Presume-se 
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que eles tem capacidade suficiente e aceitam as paginas Web completas, mas nao sao oficialmente 
suportados nem testados. 

Voce pode ler mais sobre o sistema graded browser support da Yahoo! no endereqo http:/'/developer. 
yahoo.com/yui/articles/gbs. Essa pagina Web tambem inclui a lista atualizada da Yahoo! de navegado¬ 
res grau A e grau C (a lista e atualizada trimestralmente). Mesmo que voce nao adote tecnicas de 
graded browser support, a lista da Yahoo! de navegadores grau A e uma maneira util de determinar 
quais navegadores sao atuais e tem fatia de mercado significativa. 

13.4.3 Teste de recursos 

Teste de recursos (as vezes chamado de teste de capacidade) e uma tecnica poderosa para lidar com 
incompatibilidades. Se quiser usar um recurso ou uma capacidade que talvez nao seja suportada por 
todos os navegadores, inclua em seu script um codigo que faqa um teste para ver se esse recurso e 
suportado. Se o recurso desejado nao e suportado na plataforma atual, nao o utilize nessa plataforma 
ou forne^a codigo alternative que funcione em todas as plataformas. 

Voce vai ver teste de recursos repetidamente nos capitulos a seguir. No Capitulo 17, por exemplo, 
usamos codigo como o seguinte: 

if (element.addEventListener) { // Testa esse metodo W3C antes de usa-lo 
element.addEventListener("keydown", handler, false); 
element.addEventListener("keypress", handler, false); 

} 

else if (element.attachEvent) { // Testa esse metodo IE antes de usa-lo 
element.attachEvent("onkeydown", handler); 
element.attachEvent("onkeypress", handler); 

} 

else { // Caso contrario, recorre a uma tecnica suportada universalmente 

element.onkeydown = element.onkeypress = handler; 

} 

O importante a respeito da tecnica de teste de recurso e que resulta em codigo nao vinculado a uma 
lista especifica de fornecedores ou de numeros de versao de navegador. Ele funciona com o grupo de 
navegadores existentes atualmente e deve continuar a funcionar com futuros navegadores, quaisquer 
que sejam os conjuntos de recursos que implementem. Note, entretanto, que isso exige aos forne¬ 
cedores de navegador nao definirem uma propriedade ou um metodo, a nao ser que a propriedade 
ou o metodo seja totalmente funcional. Se a Microsoft definisse um metodo addEventListener( ) que 
implementasse a especificaqao W3C apenas parcialmente, prejudicaria muito o codigo que utilizasse 
teste de recurso antes de chamar addEventListenerQ. 

13.4.4 Modo Quirks emodo Standards 

Quando a Microsoft lanqou o IE6, adicionou suporte para diversos recursos de CSS padrao que nao 
eram suportados no IE5. Contudo, para assegurar a compatibilidade com conteudo da Web ante¬ 
rior, ela precisou definir dois modos de renderizaqao distintos. No “modo Standards” ou “modo de 
compatibilidade CSS”, o navegador seguiria os padroes de CSS. No “modo Quirks”, o navegador se 
comportaria da maneira peculiar nao padronizada do IE4 e do IE5. A escolha de modos de renderi- 
zaqao dependia da declaraqao DOCTYPE no irn'cio do arquivo HTML. As paginas sem DOCTYPE e as 
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paginas que declaravam certas defi nifties permissivas de tipo de documento, que eram comumente 
utilizadas na epoca do IE5, eram renderizadas no modo Quirks. As paginas com definifoes de tipo 
de documento restritas (ou, por compatibilidade com futuras versoes, paginas com defi nifties de 
tipo de documento nao reconhecidas) eram renderizadas no modo Standards. As paginas com de- 
fini^ao de tipo de documento HTML5 (< IDOCTYPE html>) sao renderizadas no modo Standards em 
todos os navegadores modernos. 

Essa distinQo entre modo Quirks e modo Standards passou pelo teste do tempo. As novas versoes do 
IE ainda implementam isso, outros navegadores modernos tambem e a existencia desses dois modos 
e reconhecida pela especificaQo HTML5. As diferen^as entre o modo Quirks e o modo Standards 
normalmente importam mais para autores de HTML e CSS. Mas as vezes o codigo JavaScript do 
lado do cliente precisa saber em que modo um documento esta renderizado. Para fazer esse tipo de 
teste de recurso de modo de renderizaQo, verifique a propriedade document. compatMode. Se ela tiver o 
valor “CSSICompat”, o navegador esta usando o modo Standards. Se o valor e “BackCompat” (ou 
undefined, caso a propriedade nao exista), o navegador esta usando o modo Quirks. Todos os nave¬ 
gadores modernos implementam a propriedade compatMode e a especificaQo HTML5 a padroniza. 

Muitas vezes nao e necessario testar compatMode. Contudo, o Exemplo 15-8 ilustra um caso onde esse 
teste e necessario. 

13.4.5 Teste de navegador 

O teste de recurso e muito conveniente para verificar o suporte de areas funcionais grandes. Ele pode 
ser usado para determinar se um navegador suporta o modelo de tratamento de evento W3C ou o 
modelo de tratamento de evento do IE, por exemplo. Por outro lado, as vezes pode ser necessario 
solucionar erros ou peculiaridades individuals em um navegador especifico e pode nao haver um 
modo facil de testar a existencia do erro. Nesse caso, e preciso criar uma soluQo especffica para a 
plataforma, vinculada a um fornecedor, versao ou sistema operacional de navegador em especial (ou 
alguma combinaQo dos tres). 

Em JavaScript do lado do cliente, isso e feito com o objeto Navigator, sobre o qual voce vai apren- 
der no Capitulo 14. O codigo que determina o fornecedor e a versao do navegador presente e 
frequentemente chamado de browser sniffer (farejador de navegador) ou client sniffer (farejador de 
cliente). Uma amostra simples aparece no Exemplo 14-3. Farejar cliente era uma tecnica de progra- 
mafao comum nos primordios da Web, quando as plataformas Netscape e IE eram incompativeis 
e divergentes. Agora a tecnica perdeu a popularidade e so deve ser usada quando absolutamente 
necessaria. 

Note que o farejamento de cliente tambem pode ser feito no lado do servidor, com o servidor Web 
escolhendo o codigo JavaScript a ser enviado, com base em como o navegador se identifica em seu 
cabe^alho User-Agent. 

13.4.6 Comentarios condicionais no Internet Explorer 

Na pratica, voce vai ver que muitas das incompatibilidades na programaQo JavaScript do lado do 
cliente sao especfficas do IE. Isto e, deve-se escrever codigo de uma maneira para o IE e de outra 
para todos os outros navegadores. O IE suporta comentarios condicionais (introduzidos no IE5) 
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completamente nao padronizados, mas que podem ser muito uteis para resolver incompatibili- 


Aqui esta como sao os comentarios condicionais do IE em HTML. Observe o truque feito com o 
delimitador de fechamento de comentarios HTML: 

<!--[if IE 6]> 

Este conteudo esta na verdade dentro de um comentario HTML. 

Ele so sera exibido no IE 6. 

<![endif]--> 

<!--[if lte IE 7]> 

Este conteudo so sera exibido pelo IE 5, 6, 7 e anteriores. 

lte significa "menor ou igual a”. Voce tambem pode usar "It", "gt" e "gte". 

<![endif]--> 



<!--[if !IE]> <--> 

Este e um conteudo HTML normal, mas o IE nao vai exibi-lo 
por causa do comentario acima e do comentario abaixo. 
<!--> <! [endi-F]--> 


Este e um conteudo normal, exibido por todos os navegadores. 

Como um exemplo concreto, considere a biblioteca excanvas.js descrita anteriormente para imple- 
mentar o elemento <canvas> no Internet Explorer. Como essa biblioteca so e exigida no IE (e so 
funciona no IE), e razoavel inclui-la em suas paginas dentro de um comentario condicional para que 
outros navegadores nunca a carreguem: 

<! - - [if IE]xscript src="excanvas. js"x/scriptx! [endif]--> 

Os comentarios condicionais tambem sao suportados pelo interpretador JavaScript do IE, e os pro- 
gramadores C e C++ podem acha-los parecidos com a funcionalidade de #ifdef/#endif do pre- 
-processador C. Um comentario condicional em JavaScript no IE comeqa com o texto /*@cc_on e 
termina com o texto @*/. (O cc em cc_on significa compilaqao condicional.) O comentario condicio¬ 
nal a seguir contem codigo que so e executado no IE: 

/*@cc_on 
@if (@Jscript) 

// Este codigo esta dentro de um comentario JS, mas e executado no IE. 
alert("In IE"); 

@end 

@*/ 

Dentro de um comentario condicional, as palavras-chave @if, @else e @end delimitam o codigo que 
deve ser executado condicionalmente pelo interpretador JavaScript do IE. Quase sempre voce so 
precisa da condicional simples mostrada anteriormente: @if (@_jscript). JScript e o nome dado pela 
Microsoft para seu interpretador JavaScript e a variavel @_jscript e sempre true no IE. 

Com uma intercalaqao inteligente de comentarios condicionais e comentarios normais de Java¬ 
Script, voce pode definir um bloco de codigo para executar no IE e um bloco diferente para executar 
em todos os outros navegadores: 

/*@cc_on 
@if (@Jscript) 
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// Este codigo esta dentro de um comentario condicional, que tambem e um 
// comentario normal de JavaScript. 0 IE o executa, mas outros navegadores o ignoram. 
alert('You are using Internet Explorer); 

(Seise*/ 

// Este codigo nao esta mais dentro de um comentario JavaScript, mas ainda esta 
// dentro do comentario condicional do IE. Isso significa que todos os navegadores, 

// exceto o IE, vao executar este codigo. 
alert('You are not using Internet Explorer'); 

/*@end 

<3*/ 

13.5 Acessibilidade 

A Web e uma ferramenta maravilhosa para disseminar informa^oes e os programas JavaScript po- 
dem melhorar o acesso a essas informa^oes. No entanto, os programadores de JavaScript devem ser 
cuidadosos: e facil escrever codigo JavaScript que inadvertidamente nega informafoes aos visitantes 
com limita^oes visuais ou fisicas. 

Os usuarios cegos podem usar uma forma de “tecnologia auxiliar”, conhecida como leitor de tela, 
para converter palavras escritas em palavras faladas. Alguns leitores de tela sao sensiveis a JavaScript 
e outros funcionam melhor quando JavaScript esta desativada. Se voce projetar um site que exige 
JavaScript para exibir suas informafoes, vai excluir os usuarios desses leitores de tela. (E tambem vai 
excluir qualquer pessoa que desabilite JavaScript intencionalmente em seu navegador.) A fun^ao cor- 
reta de JavaScript e melhorar a apresenta^ao de informa^oes e nao assumir o lugar da apresenta^ao 
dessas informa^oes. Uma regra fundamental da acessibilidade com JavaScript e projetar seu codigo 
de modo que a pagina Web em que vai ser usado ainda funcione (pelo menos de alguma forma) com 
o interpretador JavaScript desativado. 

Outra preocupa^ao importante quanto a acessibilidade sao os usuarios que utilizam o teclado, mas 
nao podem usar (ou optam por nao usar) um dispositivo de apontamento, como o mouse. Se voce 
escrever codigo JavaScript que conta com eventos especificos do mouse, vai excluir os usuarios que 
nao utilizam o mouse. Os navegadores permitem percorrer uma pagina Web com o teclado e ativar 
elementos de interface com o usuario dentro dela, e seu codigo JavaScript tambem deve permitir 
isso. Como mostrado no Capitulo 17, JavaScript suporta eventos independentes de dispositivo, 
como onfocus e onchange, assim como eventos dependentes de dispositivo, como onmouseover e on- 
mousedown. Para o bem da acessibilidade, voce deve favorecer os eventos independentes de dispositi¬ 
vo, sempre que possivel. 

Criar paginas Web acessiveis nao e um problema simples, sendo que uma discussao completa sobre 
acessibilidade esta fora dos objetivos deste livro. Os desenvolvedores de aplicativos Web preocupados 
com acessibilidade devem conhecer os padroes WAI-ARIA (Web Accessibility Initiative-Accessible 
Rich Internet Applications), no endere^o http://www.w3.org/WAI/intro/aria. 

13.6 Seguran^a 

A introduqao de interpretadores JavaScript nos navegadores Web significa que carregar uma pagina 
Web pode causar a execu^ao de codigo JavaScript arbitrario em seu computador. Isso tern claras 
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implicates na seguran^a, sendo que os fornecedores de navegador tem trabalhado bastante para 
equilibrar dois objetivos conflitantes: 

• Definir APIs do lado do cliente poderosas para possibilitar aplicativos Web uteis. 

• Impedir que codigo mal-intencionado leia ou altere seus dados, comprometendo a privacida- 
de, cometendo fraudes ou desperdi?ando seu tempo. 

Assim como em muitos setores, a seguranfa de JavaScript evoluiu por meio de um processo 
interativo e continuo de explora?oes e emendas. Nos primordios da Web, os navegadores adicio- 
naram recursos como a capacidade de abrir, mover e redimensionar janelas e escrever na linha 
de status. Quando anunciantes e fraudadores antieticos come?aram a abusar desses recursos, os 
fornecedores de navegador tiveram que restringir ou desabilitar essas APIs. Hoje, no processo 
de padroniza?ao da HTML5, os fornecedores de navegador estao suspendendo cuidadosamente 
(de forma aberta e colaborativa) certas restrifoes de seguranfa antigas e adicionando muito po- 
der a JavaScript do lado do cliente, ao passo que (espera-se) nao introduzem novas brechas de 
seguran^a. 

As subse^oes a seguir apresentam as restri^oes de seguran^a de JavaScript e problemas de seguran^a 
que voce, como desenvolvedor Web, precisa conhecer. 

13.6.1 0 que JavaScript nao pode fazer 

A primeira linha de defesa dos navegadores Web contra codigo mal-intencionado e simplesmente 
nao aceitarem certos recursos. Por exemplo, JavaScript do lado do cliente nao fornece maneiras de 
gravar ou excluir arquivos arbitrarios ou listar diretorios arbitrarios no computador cliente. Isso 
significa que um programa JavaScript nao pode excluir dados nem disseminar virus. (Mas consulte a 
Se^ao 22.6.5 para saber como JavaScript pode ler arquivos selecionados pelo usuario e a Se<;ao 22.7 
para saber como ela pode obter um sistema de arquivos privado seguro dentro do qual pode ler e 
gravar arquivos.) 

Da mesma forma, JavaScript do lado do cliente nao tem qualquer recurso de conexao em rede de uso 
geral. Um programa JavaScript do lado do cliente pode fazer script do protocolo HTTP (consulte o 
Capitulo 18). E outro padrao associado ao HTML5, conhecido como WebSockets, define uma API 
do tipo soquete para comunica^ao com servidores especializados. Mas nenhuma dessas APIs permite 
acesso sem intermediaries a rede mais ampla. Os clientes e servidores de Internet de uso geral nao 
podem ser escritos em JavaScript do lado do cliente. 

A segunda linha de defesa dos navegadores contra codigo mal-intencionado e impor restri^oes ao 
uso de certos recursos que suportam. A seguir estao alguns recursos restritos: 

• Um programa JavaScript pode abrir novas janelas do navegador, mas para evitar abuso com 
pop-ups por parte dos anunciantes, a maioria dos navegadores restringe esse recurso de modo 
que so possa acontecer em resposta a um evento iniciado pelo usuario, como um clique de 
mouse. 

• Um programa JavaScript pode fechar janelas do navegador que ele mesmo abriu, mas nao 
pode fechar outras janelas sem confirma^ao do usuario. 
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• A propriedade value de elementos HTML FileUpload nao pode ser configurada. Se pudesse, 
um script poderia configura-la com qualquer nome de arquivo desejado e fazer o formulario 
carregar no servidor o conteudo de qualquer arquivo especificado (como um arquivo de se- 

• Um script nao pode ler o conteudo de documentos carregados de servidores diferentes do 
documento que content o script. Da mesma forma, um script nao pode registrar ouvintes 
de evento em documentos de diferentes servidores. Isso impede que os scripts inspecionem a 
entrada do usuario (como os pressionamentos de tecla que constituem uma entrada de senha) 
em outras paginas. Essa restriijao e conhecida como politico, da mesma origem e esta descrita 
com mais detalhes na proxima se^ao. 

Note que essa nao e uma lista definitiva das restrifoes de JavaScript do lado do cliente. Diferentes 
navegadores tern diferentes politicas de seguran^a e podem implementar diferentes restrRoes de API. 
Alguns navegadores tambem podem permitir que as restrifoes sejam reforijadas ou abrandadas por 
meio de preferences do usuario. 

13.6.2 A poh'tica da mesma origem 

A politico da mesma origem e uma restri^ao de seguran^a que delimita o conteudo Web com que o 
codigo JavaScript pode interagir. Normalmente, ela entra em a^ao quando uma pagina Web inclui 
elementos <iframe> ou abre outras janelas no navegador. Nesse caso, a politica da mesma origem 
governa as intera$oes do codigo JavaScript em uma janela ou quadro com o conteudo de outras 
janelas e quadros. Especificamente, um script so pode ler as propriedades de janelas e documentos 
que tenham a mesma origem do documento que content o script (consulte a Se^ao 14.8 para saber 
como usar JavaScript com varias janelas e quadros). 

A origem de um documento e definida como o protocolo, hospedeiro (ou host) e porta do URL a 
partir dos quais o documento foi carregado. Documentos carregados de diferentes servidores Web 
tern origens diferentes. Documentos carregados por meio de portas diferentes do mesmo hospedeiro 
tern origens diferentes. E um documento carregado com o protocolo http: tern uma origem diferen- 
te de um carregado com o protocolo httpsmesmo sendo provenientes do mesmo servidor Web. 

E importante entender que a origem do script em si e irrelevante para a poh'tica da mesma origem: 
o que importa e a origem do documento no qual o script esta incorporado. Suponha, por exemplo, 
que um script hospedado pelo host A seja inclufdo (usando-se a propriedade src de um elemento 
<script>) em uma pagina Web servida pelo host B. A origem desse script e o host B e o script tern 
total acesso ao conteudo do documento que o content. Se o script abre uma nova janela e carrega 
um segundo documento do host B, o script tambem tern total acesso ao conteudo desse segundo 
documento. Mas se o script abre uma terceira janela e carrega um documento do host C (ou mesmo 
do host A) nela, a poh'tica da mesma origem entra em vigor e impede que o script acesse esse docu¬ 
mento. 

A poh'tica da mesma origem nao se aplica a todas as propriedades de todos os objetos em uma janela 
de origem diferente. Mas se aplica a muitas delas - em especial, se aplica a praticamente todas as 
propriedades do objeto Document. Voce deve considerar qualquer janela ou quadro que contenha 
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um documentor de outro servidor como fora do limite de seus scripts. Se seu script abriu a janela, 
ele pode fecha-la, mas nao pode “olhar dentro” da janela de maneira alguma. A politica da mes- 
ma origem tambem se aplica aos pedidos HTTP de scripts feitos com o objeto XMLHttpRequest 
(consulte o Capitulo 18). Esse objeto permite que codigo JavaScript do lado do cliente fa^a pedidos 
HTTP arbitrarios para o servidor Web a partir do qual o documento conteiner foi carregado, mas 
nao permite que os scripts se comuniquem com outros servidores Web. 

A politica da mesma origem e necessaria para impedir que os scripts roubem informafoes privile- 
giadas. Sem essa restri^ao, um script mal-intencionado (carregado atraves de um firewall em um 
navegador de uma intranet corporativa segura) poderia abrir uma janela vazia, tentando enganar o 
usuario e faze-lo usar essa janela para procurar arquivos na intranet. Entao, o script mal-intenciona- 
do leria o conteudo dessa janela e o enviaria para seu proprio servidor. A politica da mesma origem 
impede esse tipo de comportamento. 

13.6.2.1 Atenuando a politica da mesma origem 

Em algumas circunstancias, a politica da mesma origem e demasiado restritiva. Esta se^ao descreve 
tres tecnicas para abranda-la. 

A politica da mesma origem causa problemas para sites grandes que utilizam varios subdominios. 
Por exemplo, um script em um documento de home.example.com poderia querer legitimamente ler 
propriedades de um documento carregado de developer.example.com, ou scripts de orders.example, 
com talvez precisassem ler propriedades de documentos em catalog, example, com. Para suportar sites 
de varios dominios desse tipo, voce pode usar a propriedade domain do objeto Document. Por pa- 
drao, a propriedade domain contem o nome de host do servidor a partir do qual o documento foi 
carregado. Essa propriedade pode ser configurada, mas somente em uma string que seja um sufixo 
de dominio valido dela mesma. Assim, se domain e originalmente a string “home.example.com”, voce 
pode configura-la como a string “example.com”, mas nao como “home.example” ou “ample.com”. 
Alem disso, o valor domain deve conter pelo menos um ponto; voce nao pode configura-lo como 
“com” ou qualquer outro dominio de nivel superior. 

Se duas janelas (ou quadros) contem scripts que configuram domain com o mesmo valor, a politica 
da mesma origem e atenuada para essas duas janelas e uma pode interagir com a outra. Por exemplo, 
scripts que funcionam juntos em documentos carregados de orders.example.com e de catalog.example, 
com poderiam configurar suas propriedades document.domain como “example.com”, fazendo com isso 
parecer que os documentos tern a mesma origem e permitindo que cada documento leia proprieda¬ 
des do outro. 

A segunda tecnica para abrandar a politica da mesma origem e padronizar sob o nome Cross-Origin 
Resource Sharing (consulte http://www.w3.org/TR/cors/). Esse esbo$o de padrao estende a HTTP 
com um novo cabefalho de pedido Origin : e um novo cabe^alho de resposta Access-Control-Allow- 
-Origin. Isso permite que os servidores utilizem um cabe^alho para listar explicitamente as origens 
que podem solicitar um arquivo ou usar um curinga e permitir que um arquivo seja solicitado por 
qualquer site. Navegadores como o Firefox 3.5 e o Safari 4 utilizam esse novo cabefalho para permi¬ 
tir pedidos HTTP de origem hibrida com XMLHttpRequest que, de outro modo, seriam proibidos 
pela poh'tica da mesma origem. 




328 Parte II JavaScript do lado do cliente 


Outra tecnica nova, conhecida como troca de mensagens entre documentos, permite que um script 
de um documento passe mensagens textuais para um script de outro documento, independente 
das origens do script. Chamar o metodo postMessageQ em um objeto Window resulta no envio 
assincrono de um evento mensagem (voce pode trata-lo com uma fun^ao de tratamento de evento 
onmessage) para o documento nessa janela. Contudo, um script de um documento nao pode cha¬ 
mar metodos nem ler propriedades do outro documento, mas eles podem se comunicar de forma 
seguramente por meio dessa tecnica de passagem de mensagens. Consulte a Se^ao 22.3 para mais 
informa^oes sobre a API de troca de mensagens entre documentos. 

13.6.3 Scripts de plug-ins e controles ActiveX 

Embora a linguagem JavaScript basica e o modelo de objeto do lado do cliente nao tenham recursos 
de sistema de arquivos e conexao em rede exigidos pelo pior codigo mal-intencionado, a situa^ao 
nao e tao simples quanto parece. Em muitos navegadores Web, JavaScript e usada como um “meca- 
nismo de script” para controles ActiveX (no IE) ou plug-ins (outros navegadores). Os plug-ins Flash 
e Java sao exemplos comumente instalados, sendo que eles expoem recursos importantes e poderosos 
para scripts no lado do cliente. 

Existem implicates relacionadas a seguranqa na capacidade de fazer script de controles ActiveX e 
plug-ins. Os applets Java, por exemplo, tern acesso a recursos de conexao em rede de baixo rn'vel. A 
“caixa de areia” de seguran^a de Java impede que os applets se comuniquem com qualquer servidor 
que nao seja aquele a partir do qual foram carregados, de modo que isso nao abre uma brecha na 
seguranija. Mas isso expoe o problema basico: se e possivel fazer scripts de plug-ins, voce precisa 
confiar nao apenas na arquitetura de seguranfa do navegador Web, mas tambem na arquitetura de 
seguran^a do plug-in. Na pratica, os plug-ins Java e Flash parecem ter seguran^a robusta e sao ativa- 
mente mantidos e atualizados quando brechas de seguranija sao descobertas. No entanto, os scripts 
de ActiveX tern um passado mais turbulento. O navegador IE tern acesso a uma variedade de con¬ 
troles ActiveX que podem fazer parte de scripts e que fazem parte do sistema operacional Windows, 
e no passado alguns desses controles continham brechas de seguranija que podiam ser exploradas. 

13.6.4 Cross-site scripting 

Cross-site scripting (ou XSS) e um termo para uma categoria de problemas de seguranfa nos quais 
um invasor injeta marcades HTML ou scripts em um site. Fazer a defesa contra ataques de XSS 
normalmente e uma das fun (joes dos desenvolvedores Web no lado do servidor. Contudo, os progra- 
madores JavaScript do lado do cliente tambem devem conhecer e se defender do cross-site scripting. 

Uma pagina Web e vulneravel ao cross-site scripting se gera conteudo de documento dinamicamente 
e baseia esse conteudo em dados enviados pelo usuario sem primeiro “desinfeta-los”, removendo 
deles qualquer marca^ao HTML incorporadas. Como um exemplo simples, considere a pagina Web 
a seguir, que usa JavaScript para saudar o usuario pelo nome: 

var name = decodeURIComponent(window.location.search.substring(l)) || 
document.write("Hello " + name); 

</script> 
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Esse script de duas linhas usa window.location.search para obter a parte de seu proprio URL que 
comefa com ?. Ele usa document.write() para adicionar conteudo gerado dinamicamente no docu- 
mento. Essa pagina e destinada a ser chamada com um URL como o seguinte: 
http://www.example.com/greet.html?David 

Quando usada dessa forma, ela exibe o texto “Hello David”. Mas considere o que acontece quando 
ela e chamada com este URL: 

http: / /www.example.com/greet.html?%3Cscript%3Ealert( 1 David" )%3C/script%3E 

Com esse URL, o script gera outro script dinamicamente (%3C e %3E sao codigos para sinais de menor 
e maior)! Nesse caso, o script injetado simplesmente exibe uma caixa de dialogo, o que e relativa- 
mente benigno. Mas considere este caso: 

http://siteA/greet.html?name=%3Cscript src=siteB/evil.js%3E%3C/script%3E 

Os ataques de cross-site scripting sao assim chamados porque mais de um site esta envolvido. O site 
B (ou algum outro site C) inclui um link feito especialmente (como o anterior) para o site A, que 
injeta um script do site B. O script evil.js e hospedado pelo site B mal-intencionado, mas agora esta 
incorporado ao site A e pode fazer absolutamente qualquer coisa com o conteudo do site A. Poderia 
desfigurar a pagina ou faze-la deixar de funcionar (como, por exemplo, iniciando um dos ataques 
de nega?ao de servifo descritos na proxima se^ao). Isso seria ruim para as relates com os clientes 
do site A. Mais perigosamente, o script mal-intencionado pode ler cookies armazenados pelo site A 
(talvez numeros de conta ou outras informa^oes de identificafao pessoal) e enviar esses dados para o 
site B. O script injetado pode ate monitorar os toques de tecla do usuario e enviar esses dados para 

Em geral, o modo de evitar ataques de XSS e remover as marca^oes HTML de qualquer dado nao 
confiavel antes de usa-lo para criar conteudo de documento dinamico. O arquivo greet.html mostra- 
do anteriormente pode ser corrigido pela adi?ao da seguinte linha de codigo para remover os sinais 
de menor e maior em torno das marca?6es <script>: 

name = name.replace(/</g, "&ltj").replace(/>/g, "&gt;"); 

O codigo simples anterior substitui todos os sinais de menor e maior na string por suas entidades 
HTML correspondentes, fazendo com isso o escape de qualquer marcaqao HTML e desativando- 
-a na string. O IE8 define um metodo toStaticHTMLQ mais sutil que remove marca^oes <script> (e 
qualquer outro conteudo potencialmente executavel) sem alterar a HTML nao executavel. toSta- 
ticHTMLQ nao e padronizado, mas e simples escrever sua propria firnfao de desinfec^ao de HTML 
como essa em JavaScript basica. 

HTML5 vai alem das estrategias de desinfec^ao de conteudo e esta definindo um atributo sandbox 
(caixa de areia) para o elemento <iframe>. Quando implementado, devera permitir a exibiQo segura 
de conteudo nao confiavel, com os scripts desativados automaticamente. 

O cross-site scripting e uma vulnerabilidade nociva cujas raizes sao profundas na arquitetura da 
Web. Vale a pena entender bem essa vulnerabilidade, mas uma discussao detalhada esta fora dos ob- 
jetivos deste livro. Existem muitos recursos online para ajuda-lo a se defender do cross-site scripting. 
Uma fonte primaria importante sobre esse problema e o CERT Advisory original: http://www.cert. 
org!advisories!CA-2000-02. html. 
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13.6.5 Ataques de nega^ao de servi^o 

A polftica da mesma origem e outras restriijoes de seguranija descritas aqui fazem um bom trabalho 
de evitar que codigo mal-intencionado danifique seus dados ou comprometa sua privacidade. Con- 
tudo, eles nao protegem contra ataques de nega^ao de servifo tipo forija bruta. Se voce visita um 
site mal-intencionado com JavaScript habilitada, esse site pode prender seu navegador com um la?o 
infinito de caixas de dialogo alert() ou diminuir a velocidade de sua CPU com um la?o infinito ou 
um calculo sem sentido. 

Alguns navegadores detectam caixas de dialogo repetidas e scripts de longa dura?ao e dao ao usua- 
rio a op^ao de interrompe-los. Mas um codigo mal-intencionado pode utilizar metodos como 
setlntervalQ para carregar a CPU e tambem podem atacar seu sistema alocando muita memoria. 
Nao existe uma maneira geral pela qual os navegadores Web possam evitar esse tipo de ataque gros- 
seiro. Na pratica, esse nao e um problema comum na Web, pois ninguem volta a um site que se 
dedica a esse tipo de abuso de script! 

13.7 Estruturas do lado do cliente 

Muitos desenvolvedores Web acham util construir seus aplicativos Web em cima de uma biblioteca 
de estruturas (ou framework) do lado do cliente. Essas bibliotecas sao “estruturas” no sentido de 
que constroem uma nova API de nfvel mais alto para programa?ao no lado do cliente, sobre as APIs 
padrao e proprietarias oferecidas pelos navegadores Web: quando voce adota uma estrutura, seu 
codigo precisa ser escrito de forma a usar as APIs definidas por essa estrutura. A vantagem obvia de 
usar uma estrutura e que se trata de uma API de nfvel mais alto que permite fazer mais com menos 
codigo. Uma estrutura bem escrita tambem vai tratar de muitos dos problemas de compatibilidade, 
seguran^a e acessibilidade descritos anteriormente. 

Este livro documenta a jQuery, uma das estruturas mais populares, no Capftulo 19. Se voce decidir 
adotar a jQuery em seus projetos, deve ler tambem os capftulos que preparam o terreno para o Ca¬ 
pftulo 19 - entender as APIs de baixo nfvel vai torna-lo um desenvolvedor Web melhor, mesmo que 
voce raramente precise utiliza-las diretamente. 

Existem muitas estruturas em JavaScript alem da jQuery - muito mais do que posso listar aqui. Al- 
gumas das estruturas de codigo-fonte aberto mais conhecidas e amplamente usadas incluem: 

Prototype 

A biblioteca Prototype ( http://prototypejs.org) se concentra nos utilitarios DOM e Ajax, assim 
como faz a jQuery, e tambem adiciona muitos utilitarios da linguagem basica. A biblioteca 
Scriptaculous {http://script.aculo.us/) pode ser adicionada para animates e efeitos visuais. 

Dojo 

A Dojo ( http://dojotoolkit.org ) e uma estrutura grande que apregoa sua “incrfvel profundi- 
dade”. Ela inclui um amplo conjunto de widgets de interface com o usuario, um sistema de 
pacotes, uma camada de abstraQo de dados e muito mais. 

YUI 

A YUI {http://developer.yahoo.com/yui/) e a biblioteca interna do Yahoo! e e usada em sua home 
page. Assim como a Dojo, e uma biblioteca grande e abrangente com utilitarios da linguagem, 
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utilitarios DOM, widgets de interface com o usuario, etc. Na verdade, existem duas versoes 
incompativeis da YUI, conhecidas como YUI 2 e YUI 3. 

Closure 

A Closure ( http://code.google.com/closure/library/) e a biblioteca do lado do cliente que o Google 
usa para Gmail, Google Docs e outros aplicativos Web. Essa biblioteca se destina a ser usada 
com o compilador Closure ( http://code.google.com/ closure!compiler/), o qual elimina as fun^oes 
nao utilizadas da biblioteca. Como o codigo nao utilizado e eliminado antes da distribui^ao, 
os projetistas da biblioteca Closure nao precisaram manter o conjunto de recursos compacto, 
de modo que a Closure tern um amplo conjunto de utilitarios. 

GWT 

GWT, o Google Web Toolkit ( http://code.google.com/webtoolkit/) e um tipo de estrutura do 
lado do cliente completamente diferente. Ela define uma API de aplicativo Web em Java e 
fornece um compilador para transformar seus programas Java em JavaScript do lado do cliente 
compativel. A GWT e usada em alguns produtos da Google, mas nao e tao amplamente utili- 
zada como sua biblioteca Closure. 




Capi'tulo 14 

Oobjeto Window 


O Capftulo 13 apresentou o objeto Window e o papel central que desempenha em JavaScript do 
lado do cliente: e o objeto global de programas JavaScript do lado do cliente. Este capftulo aborda 
as propriedades e os metodos do objeto Window. Essas propriedades definem varias APIs diferentes, 
apenas algumas das quais estao realmente relacionadas as janelas do navegador para as quais o objeto 
Window foi nomeado. Este capftulo aborda o seguinte: 

• A Se^ao 14.1 mostra como usar setTimeoutQ e setlntervalQ para registrar uma fun^ao a ser 
chamada no futuro, em momentos especificados. 

• A Se<jao 14.2 explica como usar a propriedade location para obter o URL do documento cor- 
rentemente exibido e carregar novos documentos. 

• A Se^ao 14.3 aborda a propriedade history e mostra como se mover o navegador para frente e 
para tras no historico do navegador. 

• A Se^ao 14.4 mostra como usar a propriedade navigator para obter informafoes sobre o for- 
necedor e a versao do navegador e como usar a propriedade screen para consultar o tamanho 
da area de trabalho. 

• A Seqao 14.5 mostra como exibir dialogos de texto simples com os metodos alert ( ), conf irm() 
e promptQ e como exibir caixas de dialogo HTML com showModalDialogQ. 

• A Se$ao 14.6 explica como voce pode registrar um metodo de tratamento onerror para ser 
chamado quando ocorrerem exce^oes de JavaScript nao capturadas. 

• A Sefao 14.7 explica que as identificanoes e os nomes de elementos HTML sao usados como 
propriedades do objeto Window. 

• A Se<jao 14.8 e longa e explica como abrir e fechar janelas do navegador e como escrever codi- 
go JavaScript que trabalha com varias janelas e quadros aninhados. 

14.1 Crondmetros 

setTimeout() e setlntervalQ permitem registrar uma funijao para ser chamada uma vez ou repetida- 
mente, apos decorrida uma quantidade de tempo especificada. Essas sao funfoes globais importantes 
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de JavaScript do lado do cliente e, portanto, sao definidas como metodos de Window, mas sao fun- 
?oes de uso geral e na verdade nao tern nada a ver com a janela. 

O metodo setTimeout() do objeto Window agenda a execuqao de uma funpio para depois de decor- 
rido um numero especificado de milissegundos. setTimeout() retorna um valor que pode ser passado 
para clearTimeout() a fim de cancelar a execupio da funfao agendada. 

setlntervalQ e como setTimeout(), exceto que a funpio especificada e chamada repetidamente em 
intervalos do numero de milissegundos especificado: 

setInterval(updateClock, 60000); // Chama updateClock() a cada 60 segundos 

Assim como setTimeoutQ, setlntervalQ retorna um valor que pode ser passado para clearlntervalQ 
a fim de cancelar qualquer chamada futura da funpio agendada. 

O Exemplo 14-1 define uma funpio utilitaria que espera uma quantidade de tempo especificada, 
chama uma funpio repetidamente e entao cancela as chamadas apos outra quantidade de tempo 
especificada. Ele demonstra setTimeoutQ, setlntervalQ e clearlntervalQ. 


Exemplo 14-1 Uma funpio cronometro utilitaria 


/* 

* Agenda uma (ou mais) chamada de f() no futuro. 

* Espera start milissegundos e entao chama f() a cada interval milissegundos, 

* parando apos um total de start+end milissegundos. 

* Se interval for especificado, mas end for omitido, entao nunca para de chamar f. 

* Se interval e end forem omitidos, entao chama f apenas uma vez, apos start ms. 

* Se apenas f for especificado, se comporta como se start fosse 0. 

* Note que a chamada de invokeQ nao e bloqueada: ela retorna imediatamente. 


function invokeQ, start, interval, end) { 
if (!start) start = 0; 
if (arguments.length <= 2) 
setTimeoutQ, start); 
else { 

setTimeout(repeat, start); 
function repeatQ { 

var h = setlntervalQ, interval); 
// E para de chamar apos end m 


// 0 padrao e 0 ms 

// Caso de uma so chamada 

// Chamada unica apos start ms. 

// Caso de varias chamadas 
// As repeticoes comecam em start ms 
// Chamada pelo tempo-limite acima 
// Chama f a cada interval ms. 
end for definido 


} 


if (end) setTimeout(function() { clearlnterval(h); }, end); 


Por motivos historicos, voce pode passar uma string como primeiro argumento de setTimeoutQ e 
setlntervalQ. Se fizer isso, a string sera avaliada (assim como acontece com evalQ) apos o tempo- 
-limite ou o intervalo especificado. A especificaQLo HTML5 (e todos os navegadores, exceto o IE) 
permitem argumentos adicionais para setTimeoutQ e setlntervalQ, apos os dois primeiros. Quais- 
quer desses argumentos sao passados para a funqao chamada. Entretanto, se for exigida portabilidade 
com o IE, esse recurso nao deve ser usado. 
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Se setTimeoutQ e chamada com um tempo de 0 ms, a fun<;ao especificada nao e chamada imediata- 
mente. Em vez disso, e colocada em uma fila para ser chamada “assim que possivel”, apos a execu^ao 
de qualquer rotina de tratamento de even to pendente. 

14.2 Localiza^ao do navegador e navega^ao 

A propriedade location do objeto Window se refere a um objeto Location, o qual representa o URL 
corrente do documento exibido na janela, e tambem define metodos para fazer a janela carregar um 
novo documento. 

A propriedade location do objeto Document tambem se refere ao objeto Location: 
window.location === document.location // sempre true 

O objeto Document tambem tern uma propriedade URL que e uma string estatica que content o 
URL do documento quando foi carregado pela primeira vez. Se voce navega para identificadores de 
fragmento (como “#table-of-contents”) dentro do documento, o objeto Location e atualizado para 
refletir isso, mas a propriedade document.URL permanece intacta. 


14.2.1 AnalisandoURLs 

A propriedade location de uma janela e uma referenda a um objeto Location; ela representa o URL 
atual do documento que esta sendo exibido nessa janela. A propriedade href do objeto Location e 
uma string que content o texto completo do URL. O metodo toString( ) do objeto Location retorna 
o valor da propriedade href; portanto, nos contextos que chamam toString( ) implicitamente, pode- 
-se escrever apenas location, em vez de location. href. 

Outras propriedades desse objeto — protocol, host, hostname, port, pathname, search e hash — es- 
pecificam as diversas partes individuals do URL. Elas sao conhecidas como propriedades de 
“decomposifao de URL” e tambem sao suportadas por objetos Link (criados por elementos <a> 
e <area> em documentos HTML). Consulte as entradas Location e Link na Parte IV para ver mais 
detalhes. 

As propriedades hash e search do objeto Location sao interessantes. A propriedade hash retorna 
a parte do “identificador de fragmento” do URL, caso haja um: um sinal numerico (#) seguido 
de uma identifica?ao de elemento. A propriedade search e semelhante. Ela retorna a parte do 
URL que come^a com um ponto de interroga^ao: frequentemente algum tipo de string de con- 
sulta. Em geral, essa parte de um URL e usada para parametriza-lo e oferece uma maneira de 
incorporar argumentos nele. Embora esses argumentos normalmente se destinem a execu?ao de 
scripts em um servidor, nao ha razao para nao poderem tambem ser utilizados em paginas com 
JavaScript ativada. O Exemplo 14-2 mostra a definifao de uma fun^ao de uso geral urlArgsQ 
que pode ser usada para extrair argumentos da propriedade search de um URL. O exemplo usa 
decodeURIComponentQ, que e uma fun$ao global definida por JavaScript do lado do cliente. (Con¬ 
sulte Global na Parte III para ver os detalhes.) 
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Exemplo 14-2 Extraindo argumentos da string de pesquisa de um URL 

* Esta funcao analisa pares de argumento nome=valor separados da string de consulta do URL 

* por um E comercial. Ela armazena os pares nome=valor em 

* propriedades de um objeto e retorna esse objeto. Utilize-a como segue: 

* var args = urlArgsQ; // Analisa args do URL 

* var q = args.q || // Usa o argumento, se definido, ou um valor padrao 

* var n = args.n ? parselnt(args.n) : 10; 

function urlArgsQ { 
var args = {}; 

var query = location.search.substring(l); 
var pairs = query.split("&"); 
for(var i = 0; i < pairs.length; i++) { 
var pos = pairs[i].indexOf('='); 
if (pos == -l) continue; 
var name = pairs[i].substring(0,pos); 
var value = pairs[i].substring(pos+l); 
value = decodeURIComponent(value); 
args[name] = value; 

} 

return args; // Retorna os argumentos analisados 


// Comeca com um objeto vazio 

// Obtem a string de consulta, menos '?' 

// Divide nos E comerciais 

// Para cada fragmento 

// Procura "nome=valor" 

// Se nao for encontrado, pula 
// Extrai o nome 
// Extrai o valor 
// Decodifica o valor 
// Armazena como uma propriedade 


14.2.2 Carregando novos documentos 

O metodo assignQ do objeto Location faz a janela ser carregada e exibe o documento do URL 
especificado. O metodo replaceQ e semelhante, mas remove o documento corrente do historico de 
navega?ao antes de carregar o novo documento. Quando um script carrega um novo documento 
incondicionalmente, o metodo replaceQ em geral e uma escolha melhor do que assignQ. Caso con- 
trario, o botao Voltar levaria o navegador de volta ao documento original e o mesmo script carregaria 
o novo documento novamente. Voce poderia usar location.replaceQ para carregar uma versao em 
HTML estatica de sua pagina Web, caso detectasse que o navegador do usuario nao tern os recursos 
exigidos para exibir a versao completa: 

// Se o navegador nao oferece suporte para o objeto XMLHttpRequest 
// redireciona para uma pagina estatica que nao o exige. 
if (!XMLHttpRequest) location.replace("staticpage.html"); 

Observe que o URL passado para replaceQ e relativo. Os URLs relativos sao interpretados em re- 
la^ao a pagina na qual aparecem, exatamente como aconteceria se fossem usados em um hiperlink. 

Alem dos metodos assignQ e replaceQ, o objeto Location tambem define reloadQ, que faz o nave¬ 
gador recarregar o documento. 

Uma maneira mais tradicional de fazer o navegador ir para uma nova pagina e simplesmente atribuir 
o novo URL diretamente a propriedade location: 

location = "http://www.oreilly.com"; // Va comprar alguns livros! 
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Tambem e possivel atribuir URLs relativos a location. Eles sao usados em relafao ao URL corrente: 
location = "page2.html"; // Carrega a proxima pagina 

Um identificador de fragmento simples e um tipo especial de URL relativo que nao faz o navegador 
carregar um novo documento, mas simplesmente rolar para exibir uma nova sefao do documento. 
O identificador #top e um caso especial: se nenhum elemento do documento tern a identificafao 
“top”, ele faz o navegador pular para o inicio do documento: 
location = "#top"; // Pula para o inicio do documento 

As propriedades de decomposifao de URL do objeto Location podem ser gravadas, e configura-las 
altera o URL do local e tambem faz o navegador carregar um novo documento (ou, no caso da pro- 
priedade hash, navegar dentro do documento corrente): 

location.search = "?page=" + (pagenum+l); // carrega a proxima pagina 

14.3 Historico denavega^ao 

A propriedade history do objeto Window se refere ao objeto History da janela. O objeto History 
modela o historico de navegafao de uma janela como uma lista de documentos e estados de docu¬ 
mento. A propriedade length do objeto History especifica o numero de elementos na lista do histori¬ 
co de navegafao, mas por motivos de seguranfa os scripts nao podem acessar os URLs armazenados. 
(Se pudessem, qualquer script poderia bisbilhotar seu historico de navegafao.) 

O objeto History tern metodos back() e forward() que se comportam como os botoes Voltar e Avan- 
far do navegador: eles fazem o navegador retroceder ou avanfar um passo no historico de navegafao. 
Um terceiro metodo, go(), recebe um argumento inteiro e pode pular qualquer numero de paginas 
para frente (para argumentos positivos) ou para tras (para argumentos negativos) na lista do histo¬ 
rico: 

history.go(-2); // Retrocede 2, como clicar no botao Voltar duas vezes 

Se uma janela contem filhos (como os elementos <iframe> - consulte a Sefao 14.8.2), os historicos 
de navegafao das janelas filhas sao intercalados cronologicamente com o historico da janela prin¬ 
cipal. Isso significa que chamar history.back() (por exemplo) na janela principal pode fazer uma 
das janelas filhas navegar de volta para um documento exibido anteriormente, mas deixe a janela 
principal em seu estado atual. 

Os aplicativos Web modernos podem alterar seu proprio conteudo dinamicamente sem carregar um 
novo documento (consulte os capitulos 15 e 18, por exemplo). Os aplicativos que fazem isso talvez 
queiram permitir que o usuario utilize os botoes Voltar e Avan far para navegar entre esses estados 
de aplicativo criados dinamicamente. HTML5 padroniza duas tecnicas para fazer isso e elas estao 
descritas na Sefao 22.2. 

O gerenciamento de historico antes de HTML5 e um problema mais complexo. Um aplicativo que 
gerencia seu proprio historico deve ser capaz de criar uma nova entrada no historico de navegafao da 
janela, associar suas informafoes de estado a essa entrada do historico, determinar quando o usuario 
utilizou o botao Voltar para ir a uma entrada diferente do historico, obter as informafoes de estado 
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associadas a essa entrada e recriar o estado anterior do aplicativo. Uma estrategia usa um elemento 
<iframe> oculto para salvar informafoes de estado e criar entradas no historico do navegador. Para 
criar uma nova entrada no historico, voce grava dinamicamente um novo documento nesse quadro 
oculto, usando os metodos openQ e writeQ do objeto Document (consulte a Se^ao 15.10.2). O 
conteudo do documento deve incluir as informafoes exigidas para recriar o estado do aplicativo. 
Quando o usuario clicar no botao Voltar, o conteudo do quadro oculto vai mudar. No entanto, antes 
da HTML5 nenhum evento era gerado para notifica-lo dessa mudanfa; portanto, para detectar que 
o usuario clicou em Voltar, voce podia usar setlntervalQ (Se^ao 14.1) para verificar o quadro oculto 
duas ou tres vezes por segundo para ver se ele mudou. 

Na pratica, os desenvolvedores que precisam desse tipo de gerenciamento de historico anterior a 
HTML5 normalmente contam com uma solu^ao pronta. Muitas estruturas de JavaScript content 
uma. Existe um plug-in de historico para jQuery, por exemplo, e tambem estao disponiveis bibho- 
tecas independentes de gerenciamento de historico. A RSH (Really Simple History) e um exemplo 
conhecido. Voce pode encontra-la no enderefo http:llcode.google.com/plreallysimplehistoryl. A Se$ao 
22.2 explica como fazer gerenciamento de historico com HTML5. 

14.4 Informa^oes do navegador e da tela 

As vezes, os scripts precisam obter informafoes sobre o navegador Web no qual estao sendo execu- 
tados ou sobre a area de trabalho na qual o navegador aparece. Esta sefao descreve as propriedades 
navigator e screen do objeto Window. Essas propriedades se referem aos objetos Navigator e Screen, 
respectivamente, e esses objetos fornecem informafoes que permitem a um script personalizar seu 
comportamento com base em seu ambiente. 


14.4.1 0 objeto Navigator 

A propriedade navigator de um objeto Window se refere a um objeto Navigator que content in- 
forma^oes sobre o fornecedor e o numero da versao do navegador. O objeto Navigator recebe esse 
nome por causa do antigo navegador Navigator da Netscape, mas tambem e suportado por todos os 
outros navegadores. (O IE tambem suporta clientlnformation como sinonimo neutro com rela^ao 
ao fornecedor para navigator. Infelizmente, outros navegadores nao adotaram essa propriedade de 
nome mais sensato.) 

No passado, o objeto Navigator era em geral usado por scripts para determinar se estavam sendo 
executados no Internet Explorer ou no Netscape. Essa estrategia de “farejar o navegador” e proble- 
matica, pois exige ajustes constantes a medida que aparecem novos navegadores e novas versoes de 
navegadores ja existentes. Hoje, o teste de recurso (consulte a Se^ao 13.4.3) e preferido: em vez de 
fazer suposRoes sobre versoes de navegador especificas e seus recursos, voce simplesmente testa o 
recurso (isto e, o metodo ou a propriedade) de que precisa. 

Contudo, o farejar o de navegador as vezes ainda e valioso, como quando e preciso contornar um 
erro especffico que existe em determinada versao de navegador. O objeto Navigator tern quatro pro¬ 
priedades que fornecem informafoes sobre o navegador que esta sendo executado e elas podem ser 
usadas para ferejar o navegador: 
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appName 

O nome completo do navegador Web. No IE e “Microsoft Internet Explorer”. No Firefox essa 
propriedade e “Netscape”. Por compatibilidade com codigo de farejamento de navegador ja 
existente, outros navegadores frequentemente tambem informam o nome “Netscape”. 

appVersion 

Essa propriedade normalmente comega com um numero e segue a isso uma string detalhada 
contendo informagoes do fornecedor e da versao do navegador. O numero no inicio dessa 
string em geral e 4.0 ou 5.0, para indicar compatibilidade generica com navegadores de quarta 
e de quinta geragao. Nao ha um formato padrao para a string appVersion, de modo que nao e 
possfvel analisa-la de modo independente de navegador. 

userAgent 

A string enviada pelo navegador em seu cabegalho HTTP USER-AGENT. Essa propriedade nor¬ 
malmente contem todas as informagoes de appVersion e pode conter mais detalhes. Assim 
como appVersion, nao existe um formato padrao. Como essa propriedade contem o maximo 
de informagoes, o codigo de farejamento de navegador costuma utiliza-lo. 

platform 

Uma string que identifica o sistema operacional (e possivelmente o hardware) no qual o nave¬ 
gador esta sendo executado. 

A complexidade das propriedades Navigator demonstra a inutilidade da estrategia de farejamento 
de navegador para compatibilidade no lado do cliente. Nos primordios da Web foi escrito muito 
codigo especffico de navegador que testava propriedades como navigator.appName. A medida que 
novos navegadores foram escritos, os fornecedores descobriram que, para exibir os sites existentes 
corretamente, tinham que definir a propriedade appName como “Netscape”. Um processo semelhante 
fez o numero no inicio de appVersion perder o significado, sendo que hoje um codigo de farejamento 
de navegador deve contar com a string navigator.userAgent e e mais complicado do que antes. O 
Exemplo 14-3 mostra como usar expressoes regulares (da jQuery) para extrair o nome e o numero 
de versao do navegador a partir de navigator. userAgent. 

Exemplo 14-3 Farejamento de navegador usando navigator.userAgent 

// Define browser.name e browser.version para farejamento de cliente, usando codigo 
// extraido da jQuery 1 . 4 . 1 . Tanto 0 nome como 0 numero sao strings e ambos 
// podem diferir do nome e versao publicos do navegador. Os nomes detectados sao: 

// 

// "webkit": Safari ou Chrome; a versao e 0 numero da construgao do WebKit 
// "opera": 0 navegador Opera; a versao e 0 numero da versao publica 
// "mozilla": Firefox ou outros navegadores baseados em gecko; a versao e Gecko 
// "msie”: IE; a versao e 0 numero da versao publica 
// 

// Firefox 3.6, por exemplo, retorna: { name: "mozilla", version: " 1 . 9 . 2 " }. 
var browser = (functionQ { 

var s = navigator.userAgent.toLowerCaseQ; 
var match = /(webkit)[ \/]([\w.]+)/.exec(s) || 

/(opera)(?:Aversion)?[ \/j([\w.]+)/.exec(s) || 

/(msie) ([\w.]+)/.exec(s) || 
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!/compatible/.test(s) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(s) || 

[]; 

return { name: match[l] || version: match[2] || "0" }; 

}()); 

Alem de suas propriedades de in form ancles de fornecedor e versao do navegador, o objeto Navigator 
tem algumas propriedades e metodos variados. As propriedades padronizadas e nao padrao mas 
amplamente implementadas incluem: 

onLine 

A propriedade navigator.onLine (se existe) especifica se o navegador esta conectado na rede. 
Os aplicativos talvez queiram salvar o estado localmente (usando tecnicas do Capftulo 20), 
enquanto estao off-line. 

geolocation 

Objeto Geolocation que define uma API para determinar a localiza^ao geografica do usuario. 
Consulte a Se^ao 22.1 para ver os detalhes. 

javaEnabled() 

Um metodo nao padronizado que deve retornar true se o navegador pode executar applets 
Java. 

cookiesEnabled() 

Metodo nao padronizado que deve retornar true se o navegador pode armazenar cookies per- 
sistentes. Pode nao retornar o valor correto se os cookies sao configurados com base no site. 

14.4.2 0 objeto Screen 

A propriedade screen de um objeto Window se refere a um objeto Screen que fornece informafoes 
sobre o tamanho da tela do usuario e o niimero de cores disponfveis. As propriedades width e height 
especificam o tamanho da tela em pixels. As propriedades availWidth e availHeight especificam o 
tamanho da tela realmente disponfvel; elas excluem o espa^o exigido por recursos como uma barra 
de tarefas na area de trabalho. A propriedade colorDepth especifica o valor de bits por pixel da tela. 
Valores normais sao 16, 24 e 32. 

A propriedade window, screen e o objeto Screen ao qual ela se refere sao ambos nao padronizados, mas 
sao amplamente implementados. O objeto Screen pode ser usado para determinar se seu aplicativo 
Web esta sendo executado em um dispositivo de tamanho ffsico pequeno, como um netbook. Se o 
espa^o na tela e limitado, voce pode optar por usar fontes e imagens menores, por exemplo. 

14.5 Caixasdedialogo 

O objeto Window fornece tres metodos para exibir caixas de dialogo simples para o usuario. alert () 
exibe uma mensagem para o usuario e espera que ele a feche. confirm () exibe uma mensagem, espera 
que o usuario clique em um botao OK ou Cancelar e retorna um valor booleano. E prompt () exibe 
uma mensagem, espera que o usuario digite uma string e retorna essa string. O codigo a seguir usa 
todos os tres metodos: 
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do { 

var name = prompt("What is your name?''); // Obtem uma string 

var correct = confirm("You entered '" + name + '".\n" + // Obtem um valor booleano 

"Click Okay to proceed or Cancel to re-enter."); 

} while(!correct) 

alert("Hello, " + name); // Exibe uma mensagem simples 

Embora os metodos alertQ, con-firmQ e promptQ sejam muito faceis de usar, o bom projeto impoe 
utiliza-los moderadamente, se e que devem ser usados. Caixas de dialogo como essas nao sao um 
recurso comum na Web e a maioria dos usuarios vai achar que as caixas de dialogo produzidas por 
esses metodos atrapalham a experiencia de navega?ao. Atualmente, o unico uso comum para esses 
metodos e na depura^ao: os programadores JavaScript as vezes inserem metodos alert () em codigo 
que nao esta funcionando na tentativa de diagnosticar o problema. 

Note que as mensagens exibidas por alertQ, confirmQ e promptQ sao texto simples e nao texto 
formatado com HTML. Essas caixas de dialogo podem ser formatadas apenas com espa^os, novas 
linhas e caracteres de pontua^ao. 

Os metodos confirmQ e promptQ bloqueiam — isto e, esses metodos nao retornam ate que o 
usuario feche as caixas de dialogo que eles exibem. Isso significa que, quando uma dessas caixas 
e exibida, seu codigo para de executar e o documento que esta sendo carregado, se houver, para 
de carregar ate que o usuario responda com a entrada solicitada. Na maioria dos navegadores o 
metodo alertQ tambem bloqueia e espera que o usuario feche a caixa de dialogo, mas isso nao 
e obrigatorio. Para ver detalhes completos sobre esses metodos consulte Window.alert. Window, 
confirm e Window.prompt na Parte IV. 

Alem dos metodos alertQ, confirmQ e promptQ de Window, um metodo mais complicado, 
showModalDialogQ, exibe uma caixa de dialogo modal com conteudo formatado com HTML e 
permite que argumentos sejam passados (e um valor retornado) para o dialogo. showModalDia¬ 
logQ exibe uma caixa de dialogo modal em sua propria janela no navegador. O primeiro argu- 
mento e o URL que especifica o conteudo HTML da caixa de dialogo. O segundo argumento e 
um valor arbitrario (arrays e objetos sao permitidos) que vai se tornar disponfvel para scripts na 
caixa de dialogo como o valor da propriedade window.dialogArguments. O terceiro argumento e 
uma lista nao padronizada de pares nome=valor separados com pontos e vfrgulas que, se supor- 
tado, podem conflgurar o tamanho ou outros atributos da caixa de dialogo. Use “dialogwidth” e 
“dialogheight” para conflgurar o tamanho da janela de dialogo e use “resizable=yes” para permi- 
tir que o usuario redimensione a janela. 

A janela exibida por esse metodo e modal e a chamada para showModalDialogQ nao retorna ate que 
a janela seja fechada. Quando a janela e fechada, o valor da propriedade window. returnValue se torna 
o valor de retorno da chamada do metodo. O conteudo HTML da caixa de dialogo normalmente 
deve incluir um botao OK que define returnValue, se desejado, e chama window.closeQ (consulte a 
Seqao 14.8.1.1). 

O Exemplo 14-4 e um arquivo HTML conveniente para uso com showModalDialogQ. O comentario 
no inicio do codigo inclui um exemplo de chamada de showModalDialogQ e a Figura 14-1 mostra 
a caixa de dialogo criada por essa chamada. Note que a maior parte do texto que aparece na caixa 
de dialogo e proveniente do segundo argumento de showModalDialogQ, em vez de ser codificada na 
HTML. 



Capftulo 14 O objeto Window 341 



Figura 14-1 Uma caixa de dialogo HTML exibida com showModalDialogO. 


Exemplo 14-4 Um arquivo HTML para uso com showModalDialogO 

Este nao e um arquivo HTML independente. Ele deve ser chamado por showModalDialogO. 
Ele espera que window.dialogArguments seja um array de strings. 

0 primeiro elemento do array e exibido na parte superior da caixa de dialogo. 

Cada elemento restante e um rotulo para um campo de entrada de texto de uma linha. 
Retorna um array de valores do campo de entrada quando o usuario clica em OK. 

Use este arquivo com codigo como o seguinte: 

var p = showModalDialogC'multiprompt.html", 

["Enter 3D point coordinates", "x", "y", "z"], 
"dialogwidth: 400 ; dialogheight:300; resizableryes"); 


<fieldset id="fields"x/fieldset> <!-- Corpo do dialogo preenchido pelo script a seguir --> 
<div style="text-align:center"> <!-- Botoes para fechar a caixa de dialogo --> 
cbutton onclick="okay()">Okay</button> <!-- Configura o valor de retorno e fecha --> 
cbutton onclick="cancel()">Cancel</button> <!-- Fecha sem nenhum valor de retorno --> 
</div> 

<script> 

// Cria o codigo HTML do corpo do dialogo e o exibe no fieldset 

var args = dialogArguments; 

var text = "<legend>" + args[o] + "</legend>"; 

for(var i = 1; i < args.length; i++) 

text += "<label>" + args[i] + <input id='f" + i + ></labelxbr>"; 
document.getElementById("fields").innerHTML = text; 

// Fecha a caixa de dialogo sem configurar um valor de retorno 
function cancelQ { window.closeQ; } 

// Le os valores do campo de entrada e configura um valor de retorno; em seguida, fecha 
function okay() { 

window.returnValue = []; // Retorna um array 

for(var i = 1 ; i < args.length; i++) // Configura elementos dos campos de entrada 

window.returnValue[i-l] = document.getElementById(“f” + i). value; 
window.closeQ; // Fecha a caixa de dialogo. Isso faz showModalDialogO retornar. 

} / ' t 
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14.6 Tratamento de erros 

A propriedade onerror de um objeto Window e uma rotina de tratamento de evento chamada quan- 
do uma excepio nao capturada se propaga ate o initio da pilha de chamada e uma mensagem de erro 
esta para ser exibida na console JavaScript do navegador. Se uma funpio e atribuida a essa proprieda¬ 
de, a funpio e chamada quando um erro JavaScript ocorre nessa janela: a funpio atribuida se torna 
uma rotina de tratamento de erro para a janela. 

Por motivos historicos, a rotina de tratamento de evento onerror do objeto Window e chamada com 
tres argumentos string, em vez do objeto evento normalmente passado. (Outros objetos do lado do 
cliente tern retinas de tratamento onerror para tratar de diferentes condipies de erro, mas todas elas 
sao retinas de tratamento de evento normais, passadas para um unico objeto evento.) O primeiro 
argumento de window.onerror e uma mensagem descrevendo o erro. O segundo argumento e uma 
string contendo o URL do codigo JavaScript que causou o erro. O terceiro argumento e o niimero 
da linha dentro do documento onde o erro ocorreu. 

Alem desses tres argumentos, o valor de retorno da rotina de tratamento onerror tern significado. 
Se a rotina de tratamento onerror retorna false, isso diz ao navegador que a rotina de tratamento 
tratou do erro e que mais nenhuma apio e necessaria - em outras palavras, o navegador nao deve 
exibir sua propria mensagem de erro. Infelizmente, por motivos historicos, no Firefox, uma rotina 
de tratamento de erro deve retornar true para indicar que tratou do erro. 

A rotina de tratamento onerror e remanescente dos primordios de JavaScript, quando a linguagem 
basica nao incluia a instrupio de tratamento de excepio try/catch. Em codigo moderno ela e rara- 
mente utilizada. Durante o desenvolvimento, contudo, voce pode definir uma rotina de tratamento 
de erro como esta para notifica-lo explicitamente quando um erro ocorrer: 

// Exibe mensagens de erro em uma caixa de dialogo, mas nunca mais do que 3 
window.onerror = function(msg, url, line) { 
if (onerror.num++ < onerror.max) { 

alert("ERROR: * + msg + "\n" + url + + line); 

return true; 

} 

} 

onerror.max = 3; 
onerror.num = 0; 

14.7 Elementos de documento como propriedades de Window 

Se voce nomeia um elemento em seu documento HTML usando o atributo id e se o objeto Window 
ainda nao tern uma propriedade com esse nome, o objeto Window recebe uma propriedade nao 
enumeravel cujo nome e o valor do atributo id e cujo valor e o objeto HTMLElement que represen- 
ta esse elemento do documento. 

Conforme ja mencionamos, o objeto Window serve como objeto global no topo do encadea- 
mento de escopo em JavaScript do lado do cliente; portanto, isso significa que os atributos id 
utilizados em seus documentos HTML se tornam variaveis globais acessiveis para seus scripts. 
Se seu documento inclui o elemento <button id="okay"/>, voce pode se referir a esse elemento 
usando a variavel global okay. 
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No entanto, ha uma limitafao importante: isso nao acontece se o objeto Window ja tem uma 
propriedade com esse nome. Os elementos com as identificaqoes “history”, “location” ou “navi¬ 
gator”, por exemplo, nao vao aparecer como variaveis globais, pois essas identificaqoes ja estao 
em uso. Da mesma forma, se seu documento HTML inclui um elemento cujo atributo id e “x” 
e voce tambem declara e atribui um valor para a variavel global x em seu codigo, a variavel de- 
clarada explicitamente vai ocultar a variavel impb'cita do elemento. Se a variavel e declarada em 
um script que aparece antes do elemento nomeado, sua existencia vai impedir que o elemento 
obtenha sua propria propriedade window. E se a variavel e declarada em um script que aparece 
depois do elemento nomeado, sua atribuiqao expb'cita a variavel sobrescreve o valor implicito da 
propriedade. 

Na Seqao 15.2, voce vai aprender que pode pesquisar elementos de documento pelo valor de seu 
atributo HTML id, usando o metodo document.getElementById(). Considere este exemplo: 

var ui = ["input","prompt","heading"]; // Um array de identificacoes de elemento 

ui.forEach(function(id) { // Para cada identificaqao, pesquisa o elemento 

ui[id] = document.getElementByld(id); // e o armazena em uma propriedade 

}); 

Apos a execuqao desse codigo, ui. input, ui. prompt e ui. heading se referem a elementos do documen¬ 
to. Um script poderia usar as variaveis globais input e heading, em vez de ui.input e ui.heading. Mas 
lembre-se, da Seqao 14.5, que o objeto Window tem um metodo chamado promptQ, de modo que 
um script nao pode usar a variavel global prompt em lugar de ui. prompt. 

O uso implicito de identificacoes de elemento como variaveis globais e uma peculiaridade historica 
da evoluqao dos navegadores Web. Ele e exigido para compatibilidade com versoes anteriores de 
paginas Web ja existentes, mas seu uso nao e recomendado - sempre que um fornecedor de nave- 
gador define uma nova propriedade do objeto Window, prejudica qualquer codigo que utilize uma 
definicao impb'cita desse nome de propriedade. Em vez disso, use document.getElementByldQ para 
pesquisar elementos explicitamente. O uso desse metodo parece menos oneroso se damos a ele um 
nome mais simples: 

var $ = function(id) { return document.getElementByld(id); }; 
ui.prompt = $("prompt"); 

Muitas bibliotecas do lado do cbente definem uma funqao $ que pesquisa elementos pela identifica- 
9ao, como essa. (Vamos ver, no Capftulo 19, que a funqao $ da jQuery e um metodo de seleqao de 
elementos de uso geral que retorna um ou mais elementos com base em suas identificacoes, nome de 
marcaqao, atributo class ou outros criterios.) 

Qualquer elemento HTML com um atributo id vai se tornar o valor de uma variavel global, supon- 
do que a identificaqao ainda nao esteja sendo usada pelo objeto Window. Os elementos HTML a 
seguir tambem se comportam dessa maneira quando recebem um atributo name: 

<a> <applet> <area> <embed> <form> <frame> <frameset> <iframe> <img> <object> 

E obrigatorio que o elemento id seja unico dentro de um documento: dois elementos nao podem 
ter o mesmo atributo id. Contudo, isso nao vale para o atributo name. Se mais de um dos elementos 
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anteriores tem o mesmo atributo name (ou se um elemento tem um atributo name e outro elemento 
tem um atributo id com o mesmo valor), a variavel global implfcita com esse nome vai se referir a 
um objeto semelhante a um array que contem cada um dos elementos nomeados. 

Existe um caso especial para elementos <iframe> com um atributo name ou id. A variavel criada impli- 
citamente para esses elementos nao se refere ao objeto Element que representa o elemento em si, mas 
ao objeto Window que representa o quadro aninhado do navegador, criado pelo elemento <iframe>. 
Vamos falar sobre isso novamente na Secjao 14.8.2. 

14.8 Varias janelas e quadros 

Uma unica janela de navegador Web em sua area de trabalho pode con ter varias guias (ou abas). 
Cada guia e um contexto de navegagao independente. Cada uma tem seu proprio objeto Window e 
cada uma e isolada de todas as outras. Os scripts em execu^ao em uma guia normalmente nao tem 
nenhuma maneira nem mesmo de saber que as outras guias existem, muito menos de interagir com 
seus objetos Window ou manipular o conteudo de seus documentos. Se voce usa um navegador Web 
que nao aceita guias ou se esta com as guias desativadas, pode ter muitas janelas de navegador Web 
abertas simultaneamente em sua area de trabalho. Assim como acontece com as guias, cada janela 
da area de trabalho tem seu proprio objeto Window e cada uma em geral e independente e isolada 
de todas as outras. 

Mas as janelas nem sempre sao isoladas umas das outras. Um script de uma janela ou guia pode abrir 
novas janelas ou guias e, quando um script faz isso, as janelas podem interagir umas com as outras e 
com os documentos das outras (sujeito as restri^oes da politica da mesma origem da Se^ao 13.6.2). 
A Seqao 14.8.1 tem mais informafoes sobre abertura e fechamento de janelas. 

Os documentos HTML podem conter documentos aninhados, usando-se um elemento <ifra- 
me>. Um <iframe> cria um contexto de navegagao aninhado representado por seu proprio objeto 
Window. Os elementos desaprovados <frameset> e <frame> tambem criam contextos de navegagao 
aninhados e cada <frame> e representado por um objeto Window. JavaScript do lado do cliente faz 
pouquissima distin^ao entre janelas, guias, iframes e quadros: todos eles sao contextos de navegagao 
e, para JavaScript, todos sao objetos Window. Os contextos de navegagao aninhados nao sao isolados 
uns dos outros como acontece normalmente com as guias independentes. Um script em execuQo 
em um quadro sempre pode ver seus quadros ascendentes e descendentes, embora a politica da 
mesma origem possa impedir que o script inspecione os documentos que estao nesses quadros. Os 
quadros aninhados sao o tema da Se^ao 14.8.2. 

Como Window e o objeto global de JavaScript do lado do cliente, cada janela ou quadro tem um 
contexto de execu^ao JavaScript separado. Contudo, o codigo JavaScript de uma janela pode (su¬ 
jeito as restrifoes da mesma origem) usar os objetos, propriedades e metodos definidos nas outras 
janelas. Isso e discutido com mais detalhes na Se^ao 14.8.3. Quando a politica da mesma origem 
impede que os scripts de duas janelas distintas interajam diretamente, HTML5 fornece uma API de 
passagem de mensagens baseada em eventos para comunicaQo indireta. Voce pode ler sobre isso na 
Se^ao 22.3. 
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14.8.1 Abrindoefechandojanelas 

Voce pode abrir uma nova janela (ou guia; normalmente isso e uma opgao de configuragao do na- 
vegador) de navegador Web com o metodo open () do objeto Window. Window, open () carrega o URL 
especificado em uma janela nova ou ja existente e retorna o objeto Window que representa essa 
janela. Ele recebe quatro argumentos opcionais: 

O primeiro argumento de open() e o URL do documento a ser exibido na nova janela. Se esse 
argumento for omitido (ou for uma string vazia), sera usado o URL de pagina em branco especial 
about:blank. 

O segundo argumento de open() e uma string especificando um nome de janela. Se ja existe uma 
janela com esse nome (e se o script pode navegar nessa janela), essa janela existente e usada. Caso 
contrario, uma nova janela e criada e recebe o nome especificado. Se esse argumento for omitido, 
sera usado o nome especial “_blank”: ele abre uma nova janela sem nome. 

Note que os scripts nao podem simplesmente supor nomes de janela e assumir o controle das janelas 
que estao sendo usadas por outros aplicativos Web: eles so podem nomear janelas existentes em que 
“podem navegar” (o termo vem da especificagao HTML5). Imprecisamente, um script so pode espe- 
cificar uma janela existente pelo nome se essa janela content um documento da mesma origem ou se 
o script abriu essa janela (ou abriu uma janela que abriu essa janela recursivamente). Alem disso, se 
uma janela e um quadro aninhado dentro de outro, um script de um quadro pode navegar no outro. 
Nesse caso, os nomes reservados “_top” (a janela ascendente de nrvel superior) e “_parent” (a janela 
pai imediata) podem ser uteis. 


Nomes de janela 

0 nome de uma janela e importante, pois permite que o metodo open() se refira a janelas existentes e 
tambem porque pode ser usado como valor do atributo HTML target em elementos <a> e <form> para 
indicar que o documento vinculado (ou o resultado do envio do formulario) deve ser exibido na janela no- 
meada. 0 atributo target nesses elementos tambem pode ser configurado como "_blank", "_parent" ou 
"_top" para direcionar o documento vinculado para uma nova janela em branco, para a janela ou quadro 
pai ou para a janela de nivel superior. 

A propriedade name de um objeto Window content seu nome, caso ele tenha um. Essa propriedade pode 
ser gravada e os scripts podem configura-la como desejarem. Se um nome (que nao seja "_blank") for 
passado para Window, open (), a janela criada por essa chamada vai ter o nome especificado como valor 
inicial de sua propriedade name. Se um elemento <iframe> tern um atributo name, o objeto Window que 
representa esse quadro vai usar esse atributo name como valor inicial da propriedade name. 


O terceiro argumento opcional de open() e uma lista separada por virgulas de atributos de tamanho 
e de recursos da nova janela a ser aberta. Se voce omitir esse argumento, a nova janela vai receber um 
tamanho padrao e vai ter um conjunto completo de componentes de interface com o usuario: uma 
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barra de menus, linha de status, barra de ferramentas, etc. Em navegadores com guias, isso normal- 
mente resulta na cria^ao de uma nova guia. 

Por outro lado, se voce especificar esse argumento, pode definir o tamanho da janela explicitamente 
e o conjunto de recursos que ela inclui. (E provavel que a especifica^ao explfcita de um tamanho 
resulte na cria<jao de uma nova janela, em vez de uma guia.) Por exemplo, para abrir uma janela de 
navegador pequena, mas que possa ser redimensionada, com uma barra de status, mas sem barra de 
menus, barra de ferramentas ou barra de localiza?ao, voce poderia escrever: 

var w = window.open("smallwin.html", "smallwin", 

"width=400,height=350,status=yes,resizable=yes"); 

Esse terceiro argumento nao e padronizado e a especifica<jao HTML5 insiste que os navegadores 
devem poder ignora-lo. Consulte Window.open () na se<jao de referenda para ver mais detalhes sobre o 
que pode ser especificado nesse argumento. Note que, quando se especifica esse terceiro argumento, 
qualquer recurso nao especificado explicitamente e omitido. Por varios motivos de seguranija, os na¬ 
vegadores fazem restri(joes sobre os recursos que podem ser especificados. Normalmente nao se pode 
especificar uma janela pequena demais ou que seja posicionada fora da tela, por exemplo, e alguns 
navegadores nao permitem criar uma janela sem linha de status. 

O quarto argumento de open() so e util quando o segundo argumento nomeia uma janela ja exis- 
tente. Esse quarto argumento e um valor booleano que indica se o URL especificado como primeiro 
argumento deve substituir a entrada atual no historico de navega<jao da janela (true) ou criar uma 
nova entrada no historico de navegacjao da janela (false). Omitir esse argumento e o mesmo que 
passar false. 

O valor de retorno do metodo open() e o objeto Window que representa a janela nomeada ou recem- 
-criada. Voce pode usar esse objeto Window em seu codigo JavaScript para se referir a nova janela, 
exatamente como usa o objeto Window implicito window para se referir a janela dentro da qual seu 
codigo esta sendo executado: 

var w = window.open(); // Abre uma nova janela em branco. 

w.alertC'About to visit http://example.com"); // Chama seu metodo alertQ 
w.location = "http://example.com"; // Configura sua propriedade location 

Em janelas criadas com o metodo window.open(), a propriedade opener se refere ao objeto Window 
do script que as abriu. Nas outras janelas, opener e null: 

w.opener !== null; // Verdadeiro para qualquer janela w criada por open() 

w.openQ.opener === w; // Verdadeiro para qualquer janela w 

Window.open() e o metodo por meio do qual os anuncios se tornam “pop up” ou “pop under” en- 
quanto voce navega na Web. Gramas a essa enchente de pop ups irritantes, agora a maioria dos nave¬ 
gadores Web instituiu algum tipo de sistema de bloqueio de pop ups. Normalmente, as chamadas 
para o metodo open() sao bem-sucedidas somente se ocorrem em resposta a uma aijao do usuario, 
como um clique em um botao ou em um hnk. O codigo JavaScript que tenta abrir uma janela pop- 
-up quando o navegador carrega (ou descarrega) uma pagina pela primeira vez normalmente falha. 
Testar as hnhas de codigo mostradas anteriormente, colando-as na console JavaScript de seu navega¬ 
dor, tambem pode falhar pelo mesmo motivo. 
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14.8.1.1 Fechandojanelas 

Assim como o metodo open() abre uma nova janela, o metodo close() fecha. Se voce cria um objeto 
Window w, pode fecha-lo com: 
w.closeQ; 

O proprio codigo JavaScript em execu^ao dentro dessa janela pode fecha-la com: 
window.close(); 

Observe o uso explfcito do identificador window para distinguir o metodo close () do objeto Window 
do metodo closeQ do objeto Document - isso e importante se voce esta chamando close( ) a partir 
de uma rotina de tratamento de evento. 

A maioria dos navegadores permite fechar automaticamente somente as janelas criadas por seu pro¬ 
prio codigo JavaScript. Se voce tenta fechar qualquer outra janela, o pedido falha ou e apresentada 
uma caixa de dialogo ao usuario, solicitando a ele para que permita (ou cancele) esse pedido para 
fechar a janela. O metodo close () de um objeto Window que representa um quadro, em vez de 
uma janela ou guia nivel superior, nao faz nada: nao e possivel fechar um quadro (em vez disso, voce 
excluiria o <iframe> de seu documento conteiner). 

Um objeto Window continua a existir depois que a janela que representa foi fechada. Uma janela 
fechada vai ter a propriedade closed configurada como true, document vai ser null e seus metodos 
normalmente nao vao mais funcionar. 

14.8.2 Relacionamentos entre quadras 

Como vimos, o metodo open() de um objeto Window retorna um novo objeto Window que tern 
uma propriedade opener se referindo a janela original. Desse modo, as duas janelas podem se refe- 
rir uma a outra e cada uma pode ler propriedades e chamar metodos da outra. Algo semelhante e 
possivel com quadros. Um codigo em execu^ao em uma janela ou quadro pode se referir a janela ou 
quadro conteiner e aos quadros filhos aninhados, usando as propriedades descritas a seguir. 

Voce ja sabe que o codigo JavaScript em qualquer janela ou quadro pode se referir ao seu proprio 
objeto Window como window ou como self. Um quadro pode se referir ao objeto Window da janela 
ou quadro que o content, usando a propriedade parent: 
parent.history.back(); 

Um objeto Window que representa uma janela ou guia de nivel superior nao tern algum conteiner e 
sua propriedade parent se refere simplesmente a propria janela: 
parent == self; // Para qualquer janela de nivel superior 

Se um quadro esta contido dentro de outro, que esta contido dentro de uma janela de nivel superior, 
esse quadro pode se referir a janela de nivel superior como parent. parent. Contudo, a propriedade 
top e um atalho de caso geral: independente de quanto um quadro esteja profundamente aninhado, 
sua propriedade top se refere a janela conteiner de nivel superior. Se um objeto Window representa 
uma janela de nivel superior, top se refere simplesmente a essa propria janela. Para quadros que sao 
filhos diretos de uma janela de nivel superior, a propriedade top e igual a propriedade parent. 

As propriedades parent e top permitem a um script fazer referenda aos ascendentes de seu quadro. 
Ha mais de uma maneira de fazer referenda aos quadros descendentes de uma janela ou quadro. 
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Os quadros sao criados com elementos <iframe>. Pode-se obter um objeto Element representando 
um <iframe> exatamente como se faria para qualquer outro elemento. Suponha que seu documento 
contem <iframe id="fi">. Entao, o objeto Element que representa esse iframe e: 

var iframeElement = document.getElementById("fl"); 

Os elementos <iframe> tern uma propriedade contentWindow que se refere ao objeto Window do qua¬ 
dra, de modo que o objeto Window desse quadra e: 

var childFrame = document.getElementById("fl").contentWindow; 

Voce pode ir na dire^ao inversa - do objeto Window que representa um quadra para o elemento 
<iframe> que contem o quadra - com a propriedade frameElement do objeto Window. Os objetos 
Window que representam janelas de nivel superior, em vez de quadros, tern uma propriedade null 
frameElement: 

var elt = document.getElementById("fl"); 

var win = elt.contentWindow; 

win.frameElement === elt // Sempre true para quadros 

window.frameElement === null // Para janelas de nivel superior 

Contudo, em geral nao e necessario usar o metodo getElementByldQ e a propriedade contentWindow 
para obter referencias para os quadros filhos de uma janela. Todo objeto Window tern uma proprie¬ 
dade frames que se refere aos quadros filhos contidos dentro da janela ou quadra. A propriedade 
frames se refere a um objeto semelhante a um array que pode ser indexado numericamente ou pelo 
nome do quadra. Para se referir ao primeiro quadra filho de uma janela, pode-se usar frames [0]. Para 
se referir ao terceiro quadra filho do segundo filho, pode-se usar framesjl] .frames[ 2 ], Um codigo 
em execu^ao em um quadra poderia se referir a um quadra irmao como parent. frames [ l] . Note que 
os elementos do array frames [] sao objetos Window e nao elementos <iframe>. 

Se voce especifica o atributo name ou id de um elemento <iframe>, esse quadra pode ser indexado 
pelo nome, assim como pelo numero. Um quadra chamado “fl” seria frames[''fl" ] ou frames.fi, 
por exemplo. 

Lembre-se, da Se^ao 14.7, que os nomes ou identifica^oes de <iframe> e outros elementos sao uti- 
lizados automaticamente como propriedades do objeto Window e que os elementos <iframe> sao 
tratados de forma diferente dos outros elementos: para quadros, o valor dessas propriedades criadas 
automaticamente se refere a um objeto Window, em vez de a um objeto Element. Isso significa 
que podemos nos referir a um quadra chamado “fl” como fl, em vez de frames.fl. Na verdade, 
HTML5 especifica que a propriedade frames e autoreferente, exatamente como window e self, e que 
e o proprio objeto Window que atua como um array de quadros. Isso significa que podemos fazer 
referenda ao primeiro quadra filho como windowjo] e podemos consultar o numero de quadros com 
window.length ou apenas length. No entanto, normalmente e mais claro (e ainda traditional) usar 
frames em vez de window aqui. Note que nem todos os navegadores atuais tornam frame==window, mas 
os que nao os tornam iguais permitem que os quadros filhos sejam indexados pelo numero ou pelo 
nome, por meio de um ou outro objeto. 

O atributo name ou id de um elemento <iframe> pode ser usado para dar ao quadra um nome que 
pode ser usado em codigo JavaScript. Contudo, se o atributo name for usado, o nome especificado 
tambem vai se tornar o valor da propriedade name do objeto Window que representa o quadra. Um 
nome especificado dessa maneira pode ser usado como atributo target de um link e isso pode ser 
usado como segundo argumento de window.open(). 
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14.8.3 JavaScript em janelas que interagem 

Cada janela ou quadro e seu proprio contexto de execu^ao JavaScript, com um objeto Window 
como seu objeto global. Mas se o codigo de uma janela ou quadro pode se referir a outra janela ou 
quadro (e se a politica da mesma origem nao impedir isso), os scripts de uma janela ou quadro po- 
dem interagir com os scripts da outra (ou outro). 

Imagine uma pagina Web com dois elementos <iframe> chamados “A” e “B” e suponha que esses 
quadros content documentos do mesmo servidor e que esses documentos content scripts que intera¬ 
gem. O script do quadro A poderia definir uma variavel i: 

Essa variavel nada mais e do que uma propriedade do objeto global - uma propriedade do objeto 
Window. O codigo do quadro A pode se referir a variavel com o identificador i ou pode referencia-la 
explicitamente por meio do objeto Window: 
window.i 

Como o script do quadro B pode se referir ao objeto Window do quadro A, tambem pode se referir 
as propriedades desse objeto: 

parent.A.i = 4; // Altera o valor de uma variavel no quadro A 

Lembre-se de que a palavra-chave function, que define fumjoes, cria uma variavel exatamente como 
faz a palavra-chave var. Se um script no quadro B declara uma fun^ao f (nao aninhada), essa fun^ao 
e uma variavel global no quadro B e o codigo do quadro B pode chamar f como f(). Entretanto, 
o codigo do quadro A deve se referir a f como uma propriedade do objeto Window do quadro B: 
parent.B.f(); // Chama uma funqao definida no quadro B 

Se o codigo do quadro A precisasse usar essa funqao frequentemente, poderia atribui-la a uma varia¬ 
vel do quadro A para que pudesse se referir a funijao mais convenientemente: 
var f = parent.B.f; 

Agora o codigo do quadro A pode chamar a funijao como f (), exatamente como o codigo do quadro 
B faz. 

Quando voce compartilha fun^oes entre quadros ou janelas dessa forma, e importante ter em mente 
as regras de escopo lexico. Uma funi;ao e executada no escopo em que foi definida e nao no escopo a 
partir do qual e chamada. Assim, se a funi;ao f anterior se refere a variaveis globais, essas variaveis sao 
pesquisadas como propriedades do quadro B, mesmo quando a fun^ao e chamada a partir do quadro A. 

Lembre-se de que as construtoras tambem sao funijoes; portanto, ao se definir uma classe (consulte 
o Capftulo 9) com uma fiutfao construtora e um objeto prototipo associado, essa classe e definida 
apenas dentro de uma janela. Suponha que a janela que content os quadros A e B inclui a classe Set 
do Exemplo 9-6. 

Scripts dentro dessa janela de nfvel superior podem criar novos objetos Set, como segue: 
var s = new Set(); 

Mas os scripts de um ou outro quadro devem se referir explicitamente a construtora Set() como uma 
propriedade da janela pai: 

var s = new parent.Set(); 
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Alternativamente, o codigo de um ou de outro quadro pode definir sua propria variavel para se refe- 
rir mais convenientemente a fungao construtora: 

var Set = top.Set(); 

var s = new Set(); 

Ao contrario das classes definidas pelo usuario, as classes internas, como String, Date e RegExp, sao 
predefinidas automaticamente em todas as janelas. Isso significa, no entanto, que cada janela tem 
uma copia independente da construtora e uma copia independente do objeto prototipo. Por exem- 
plo, cada janela tem sua propria copia da construtora StringQ e do objeto String, prototype. Assim, 
se voce escreve um novo metodo para manipular strings JavaScript e depois o torna um metodo da 
classe String, atribuindo-o ao objeto String.prototype na janela atual, todas as strings criadas pelo 
codigo dessa janela podem usar o novo metodo. Contudo, o novo metodo nao e acessivel para as 
strings criadas em outras janelas. 

O fato de que cada objeto Window tem seus proprios objetos prototipos significa que o operador 
instanceof nao funciona entre janelas. instanceof sera avaliado como false, por exemplo, quando 
usado para comparar uma string do quadro B com a construtora StringQ do quadro A. A Segao 
7.10 descreve uma dificuldade relacionada: a de determinar o tipo de arrays entre janelas. 


0 objeto WindowProxy 

Mencionamos repetidamente que o objeto Window e o objeto global de JavaScript do lado do cliente. Tec- 
nicamente, contudo, isso nao e verdade. Sempre que um navegador Web carrega novo conteudo em uma 
janela ou em um quadro, precisa comegar com um novo contexto de execugao JavaScript, incluindo um 
objeto global recem-criado. Mas quando varias janelas ou quadros estao em uso, e fundamental o objeto 
Window que se refere a um quadro ou a uma janela continuar a ser uma referenda valida, mesmo que esse 
quadro ou janela carregue um novo documento. 

Assim, JavaScript do lado do cliente tem dois objetos importantes. 0 objeto global do lado do cliente e o 
topo do encadeamento de escopo e e onde as variaveis e fungoes globais sao definidas. Na verdade, esse 
objeto global e substituido quando a janela ou quadro carrega novo conteudo. 0 objeto que estivemos 
chamando de Window nao e realmente o objeto global, mas um substituto dele. Quando voce consulta ou 
configura uma propriedade do objeto Window, esse objeto consulta ou configura a mesma propriedade 
no objeto global corrente da janela ou quadro. A especificagao HTML5 chama esse substituto de objeto 
WindowProxy, mas vamos continuar a utilizar o termo objeto Window neste livro. 

Devido ao seu com portamento como substituto, o objeto proxy se comporta exatamente como o objeto glo¬ 
bal real, exceto que tem duragao mais longa. Se voce pudesse comparar os dois objetos, seria diflcil distingui- 
-los. Na verdade, contudo, nao ha maneira de se referir ao objeto global do lado do cliente real. 0 objeto 
global esta no topo do encadeamento de escopo, mas as propriedades window, self, top, parent e frames 
retornam todas objetos proxy. 0 metodo window, open() retorna um objeto proxy. Ate o valor da palavra- 
-chave this dentro de uma fungao de nfvel superior e um objeto proxy, em vez do objeto global real 1 . 


Este ultimo ponto 6 uma pequena violapio das especifica^oes ES3 e ES5, mas e necessaria para suportar os varios contextos 
de execugao de JavaScript do lado do cliente. 





Capi'tulo 15 

Escrevendo script de documentos 


JavaScript do lado do cliente existe para transformar documentos HTML estaticos em aplicativos 
Web interativos. Fazer scripts do conteudo de paginas Web e o principal objetivo de JavaScript. Este 
capitulo - um dos mais importantes do livro - explica como fazer isso. 

Os capftulos 13 e 14 explicaram que cada janela, guia e quadro do navegador Web e representado 
por um objeto Window. Todo objeto Window tem uma propriedade document que se refere a um ob- 
jeto Document. O objeto Document representa o conteudo da janela e esse e o tema deste capitulo. 
Contudo, o objeto Document nao opera independentemente. Ele e o principal objeto de uma API 
maior, conhecida como Document Object Model (ou DOM), para representar e manipular conteudo 
de documento. 

Este capitulo comeqa explicando a arquitetura basica do DOM. Em seguida, passa a explicar: 

• Como consultar ou selecionar elementos individuals de um documento. 

• Como percorrer um documento como uma arvore de nos e como localizar os ascendentes, 
irmaos e descendentes de qualquer elemento do documento. 

• Como consultar e configurar os atributos dos elementos do documento. 

• Como consultar, configurar e modificar o conteudo de um documento. 

• Como modificar a estrutura de um documento, criando, inserindo e excluindo nos. 

• Como trabalhar com formularios HTML. 

A ultima se^ao do capitulo aborda diversos recursos de documento, incluindo a propriedade 
referrer, o metodo write () e tecnicas para consultar o texto do documento selecionado. 

15.1 Visao geral do DOM 

Document Object Model, ou DOM, e a API fundamental para representar e manipular o conteudo 
de documentos HTML e XML. A API nao e especialmente complicada, mas existem varios detalhes 
de arquitetura que precisam ser entendidos. 



352 Parte II JavaScript do lado do cliente 


Primeiramente, voce deve entender que os elementos aninhados de um documento HTML ou XML 
sao representados na DOM como uma arvore de objetos. A representa^ao em arvore de um docu¬ 
mento HTML con tern nos representando marca^oes ou elementos HTML, como <body> e <p>, e 
nos representando strings de texto. Um documento HTML tambem pode conter nos representando 
comentarios HTML. Considere o seguinte documento HTML simples: 

<html> 

<head> 

<title>Sample Document</title> 

<body> 

<hl>An HTML Document</hl> 

<p>This is a <i>simple</i> document. 

</html> 

A representa^ao DOM desse documento e a arvore ilustrada na Figura 15-1. 



Se voce ainda nao conhece as estruturas em arvore da programa^ao de computador, e util saber que 
elas emprestam a terminologia das arvores genealogicas. O no imediatamente acima de outro e o 
pai desse no. Os nos um nfvel imediatamente abaixo de outro no sao os filhos desse no. Os nos no 
mesmo nfvel e com o mesmo pai sao irmaos. O conjunto de nos a qualquer numero de nfveis abaixo 
de outro no sao os descendentes desse no. E o pai, avo e todos os outros nos acima de um no sao os 
ascendentes desse no. 

Cada caixa na Figura 15-1 e um no do documento e e representado por um objeto Node. Vamos 
falar sobre as propriedades e metodos de Node em algumas das se^oes a seguir e voce pode pesquisar 
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essas propriedades e metodos sob Node na Parte IV. Note que a figura content tres tipos diferentes de 
nos. Na raiz da arvore esta o no Document, que representa o documento inteiro. Os nos que repre- 
sentam elementos HTML sao nos Element e os nos que representam texto sao nos Text. Document, 
Element e Text sao subclasses de Node (e tern suas proprias entradas na se^ao de referenda). Docu¬ 
ment e Element sao as duas classes DOM mais importantes e grande parte deste capftulo e dedicada 
as suas propriedades e metodos. 

Node e seus subtipos formam a hierarquia de tipos ilustrada na Figura 15-2. Observe que ha uma 
distinfao formal entre os tipos genericos Document e Element, e os tipos HTMLDocument e 
HTMLElement. O tipo Document representa um documento HTML ou XML e a classe Ele¬ 
ment representa um elemento desse documento. As subclasses HTMLDocument e HTMLEle¬ 
ment sao especfficas de documentos e elementos HTML. Neste livro, usamos frequentemente 
os nomes de classe genericos Document e Element, mesmo ao nos referirmos a documentos 
HTML. Isso tambem vale para a se$ao de referenda: as propriedades e os metodos dos tipos 
HTMLDocument e HTMLElement estao documentados nas paginas de referenda de Docu¬ 
ment e Element. 



—(HTMLHeadElement ] 


—f Document ]-(HTMLDocument ] 

—{ HTMLBodyElement ) 


i—(Text— j 

—(HTMLTitleElement ) 


—(CharacterData ]—_^ 

'— 1 Comment J 

—( HTMLParagraph Element ) 

(NodeJ— 

—(Element ]-( HTMLElement ]- 

—( HTMLInputElement ) 


-FI 

—(HTMLTableElement ) 


-(...etc. ] 


Figura 15-2 Uma hierarquia de classe parcial de nos de documento. 


Tambem e interessante notar na Figura 15-2 que existem muitos subtipos de HTMLElement que 
representam tipos especfficos de elementos HTML. Cada um define propriedades de JavaScript para 
espelhar os atributos HTML de um elemento especffico ou de um grupo de elementos (consulte a 
Se^ao 15.4.1). Algumas dessas classes especfficas do elemento definem mais propriedades ou meto¬ 
dos que vao alem do simples espelhamento da sintaxe HTML. Essas classes e seus recursos adicionais 
sao abordados na se^ao de referenda. 

Por fim, note que a Figura 15-2 mostra alguns tipos de no que nao foram mencionados ate agora. Os 
nos Comment representam comentarios HTML ou XML. Como os comentarios sao basicamente 
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strings de texto, esses nos sao muito parecidos com os nos Text que representam o texto exibido de 
um documento. CharacterData, o ascendente comum de Text e de Comment, define metodos com- 
partilhados pelos dois nos. O tipo de no Attr representa um atributo XML ou HTML, mas quase 
nunca e usado, pois a classe Element define metodos para tratar atributos como pares nome/valor, 
em vez de nos de documento. A classe DocumentFragment (nao mostrada) e um tipo de Node que 
nunca existe em um documento real: ela representa uma sequencia de Nodes que nao tem um pai 
comum. DocumentFragments sao uteis para algumas manipulates de documento e sao abordados 
na Se^ao 15.6.4. O DOM tambem define tipos pouco utilizados, para representar coisas como de- 
clarafes doctype e instruqoes de processamento XML. 


15.2 Selecionando elementos do documento 

A maioria dos programas JavaScript do lado do cliente funciona manipulando de alguma forma um 
ou mais elementos de documento. Quando esses programas come^am, podem utilizar a variavel 
global document para se referirem ao objeto Document. Contudo, para manipular elementos do 
documento, eles precisam de algum modo obter ou selecionar os objetos Element que se referem a 
esses elementos de documento. O DOM define varias maneiras de selecionar elementos. Voce pode 
consultar um documento quanto a um elemento (ou elementos): 

• com um atributo id especificado; 

• com um atributo name especificado; 

• com o nome de marca^ao especificado; 

• com a classe ou classes CSS especificadas; ou 

• correspondente ao seletor CSS especificado 

As subse^oes a seguir explicam cada uma dessas tecnicas de sele^ao de elemento. 

15.2.1 Selecionando elementos pela identificagao 

Qualquer elemento HTML pode ter um atributo id. O valor desse atributo deve ser unico dentro 
do documento - dois elementos no mesmo documento nao podem ter a mesma identifica^ao. Voce 
pode selecionar um elemento com base nessa identifica^ao exclusiva com o metodo getElementByldQ 
do objeto Document. Ja usamos esse metodo no Capitulo 13 e no Capitulo 14: 
var sectionl = document.getElementById("sectionl"); 

Essa e a maneira mais simples e normalmente usada de selecionar elementos. Se seu script vai ma¬ 
nipular determinado conjunto de elementos de documento, de a esses elementos atributos id e pes- 
quise os objetos Element usando essa identifica^ao. Se precisar pesquisar mais de um elemento pela 
identificafao, talvez ache util a funijao getElementsQ do Exemplo 15-1. 

Exemplo 15-1 Pesquisando varios elementos pela identifica^ao 

* Esta funcao espera qualquer numero de argumentos string. Ela trata cada 

* argumento como uma identificaqao de elemento e chama document.getElementByldQ para 
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* Retorna um objeto que mapeia identificaqoes no objeto Element correspondente. 

* Lanca um objeto Error se qualquer uma das identificaqoes for indefinida. 


function getElements(/*ids...*/) { 
var elements = {}; 

for(var i = 0; i < arguments.length; i++) { 
var id = arguments[i]; 

var elt = document.getElementByld(id); 
if (elt == null) 

throw new Error("No element with id: 
elements[id] = elt; 


} 

return elements; 


} 


// Comeca com um mapa vazio 
// Para cada argumento 
// 0 argumento e uma 
// identificacao de elemento 
// Pesquisa Element 
// Se nao estiver definido, 
id); // lanca um erro 

// Mapeia a identificaqao no 
// elemento 

// Retorna a identificaqao 
// para o mapa de elementos 


Nas versoes do Internet Explorer anteriores ao IE8, getElementByldQ faz uma correspondence que 
nao diferencia letras maiusculas e minusculas nas identificafoes de elemento e tambem retorna ele¬ 
mentos que tenham um atributo name coincidente. 


15.2.2 Selecionando elementos pelo nome 

O atributo HTML name se destinava originalmente a atribuir nomes a elementos de formulario e 
o valor desse atributo e usado quando dados de formulario sao enviados para um servidor. Assim 
como o atributo id, name atribui um nome a um elemento. Ao contrario de id, contudo, o valor de 
um atributo name nao precisa ser unico: varios elementos podem ter o mesmo nome e isso e comum 
no caso de botoes de sele^ao e caixas de sele^ao em formularios. Alem disso, ao contrario de id, o 
atributo name e valido somente em alguns elementos HTML, incluindo formularios, elementos de 
formulario, <iframe> e elementos <img>. 

Para selecionar elementos HTML com base no valor de seus atributos name, voce pode usar o meto- 
do getElementsByName() do objeto Document: 

var radiobuttons = document.getElementsByName("favorite_color"); 

getElementsByName( ) e definido pelaclasse HTMLDocument (e nao pela classe Document) e, assim, so 
esta disponivel para documentos HTML e nao para documentos XML. Ele retorna um objeto NodeList 
que se comporta como um array somente para leitura de objetos Element. No IE, get ElementsByName () 
tambem retorna elementos que tern um atributo id com o valor especificado. Por compatibilidade, voce 
deve tomar o cuidado de nao usar a mesma string como nome e como identificacao. 

Vimos, na Se^ao 14.7, que configurar o atributo name de certos elementos HTML criava proprieda- 
des com esses nomes automaticamente no objeto Window. Algo semelhante acontece para o objeto 
Document. Configurar o atributo name de um elemento <form>, <img>, <iframe>, <applet>, <embed> 
ou <object> (mas somente elementos <object> que nao contenham objetos de fallback) cria uma 
propriedade do objeto Document cujo nome e o valor do atributo (supondo, e claro, que o docu¬ 
ment ainda nao tenha uma propriedade com esse nome). 

Se existe apenas um elemento com determinado nome, o valor da propriedade do documento criada 
automaticamente e o proprio elemento. Se existe mais de um elemento, entao o valor da proprieda¬ 
de e um objeto NodeList que atua como um array de elementos. Conforme vimos na Se^ao 14.7, as 
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propriedades de documento criadas para elementos <iframe> nomeados sao especiais: em vez de se 
referirem ao objeto Element, se referem ao objeto Window do quadro. 

Isso significa que alguns elementos podem ser selecionados pelo nome simplesmente usando-se o 
nome como uma propriedade de Document: 

// Obtem o objeto Element para o elemento <form name="shipping_address"> 
var form = document.shipping_address; 

Os motivos dados na Se^ao 14.7 para nao se usar as propriedades de janela criadas automaticamente 
se aplicam igualmente a essas propriedades de documento criadas automaticamente. Se voce pre- 
cisa pesquisar elementos nomeados, e melhor pesquisa-los explicitamente com uma chamada para 
getElementsByNameQ. 

15.2.3 Selecionando elementos pelo tipo 

Todos os elementos HTML ou XML de um tipo (ou nome de marca^ao) especificado podem ser 
selecionados usando-se o metodo getElementsByTagName() do objeto Document. Para obter um obje¬ 
to semelhante a um array somente para leitura, contendo os objetos Element de todos os elementos 
<span> em um documento, por exemplo, voce poderia escrever: 
var spans = document.getElementsByTagName("span"); 

Assim como getElementsByName(), getElementsByTagName() retorna um objeto NodeList. (Consulte 
o quadro desta se^ao para obter mais informa$6es sobre a classe NodeList.) Os elementos do objeto 
NodeList retornado estao na ordem do documento; portanto, o primeiro elemento <p> de um docu¬ 
mento pode ser selecionado como segue: 

var firstpara = document.getElementsByTagName("p")[0]; 

As marca^oes HTML nao diferenciam letras maiusculas e minusculas, e quando getElementsByTag- 
NameQ e usado em um documento HTML, faz uma compara^ao de nomes de marca^oes que nao 
diferencia letras maiusculas e minusculas. A variavel spans anterior, por exemplo, vai incluir todos os 
elementos <span> que foram escritos como <SPAN>. 

Um objeto NodeList representando todos os elementos de um documento pode ser obtido passan- 
do-se o argumento curinga para getElementsByTagName(). 

A classe Element tambem define um metodo getElementsByTagName(). Ele funciona da mesma ma- 
neira que a versao de Document, mas seleciona apenas os elementos descendentes do elemento no 
qual e chamado. Assim, para encontrar todos os elementos <span> dentro do primeiro elemento <p> 
de um documento, voce poderia escrever: 

var firstpara = document.getElementsByTagName("p")[0]; 
var firstParaSpans = firstpara.getElementsByTagName("span"); 

Por motivos historicos, a classe HTMLDocument define propriedades de atalho para acessar certos 
tipos de nos. As propriedades images, forms e links, por exemplo, se referem aos objetos que se com- 
portam como arrays somente para leitura de elementos <img>, <form> e <a> (mas somente marca?6es 
<a> que tenham um atributo href). Essas propriedades se referem a objetos HTMLCollection, os 
quais sao muito mais parecidos com objetos NodeList, mas podem tambem ser indexados pela 
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identificagao ou pelo nome do elemento. Anteriormente, vimos como se pode referir a um elemento 
<forms nomeado, com uma expressao como a seguinte: 
document.shipping_address 

Com a propriedade document .forms, tambem e possfvel se referir mais especificamente ao formulario 
nomeado (ou identificado) como segue: 
document.forms.shipping_address; 

O objeto HTMLDocument tambem define propriedades sinonimas embeds e plugins que sao 
HTMLCollections de elementos <embed>. A propriedade anchors nao e padronizada, mas se refere 
a elementos <a> que tern um atributo name, em vez de um atributo href. A propriedade <scripts> e 
padronizada pela HTML5 para ser uma HTMLCollection de elementos <script>, mas quando este 
livro estava sendo produzido ainda nao estava implementada universalmente. 

HTMLDocument define ainda duas propriedades que se referem a elementos unicos especiais, em 
vez de a colegoes de elementos. document.body e o elemento <body> de um documento HTML e 
document.head e o elemento <head>. Essas propriedades sao sempre definidas: se a origem do docu¬ 
mento nao inclui elementos <head> e <body> explicitamente, o navegador os cria implicitamente. 
A propriedade documentElement da classe Document se refere ao elemento-raiz do documento. Em 
documentos HTML isso e sempre um elemento <html>. 


NodeLists e HTMLCollections 

getElementsByName() e getElementsByTagNameQ retornam objetos NodeList, e propriedades como 
document. images e document. forms sao objetos HTMLCollection. 

Esses objetos sao objetos semelhantes a um array somente para leitura (consulte a Segao 7.11). Eles tern 
propriedades length e podem ser indexados (para leitura, mas nao para gravagao) como arrays verdadeiros. 
Voce pode iterar atraves do conteudo de um NodeList ou HTMLCollection com um lago padrao, como segue: 

for(var i = 0; i < document.images.length; i++) // Itera por todas as imagens 

document.images[i].style.display = "none"; // ...e as oculta. 

Voce nao pode chamar metodos Array em NodeLists e HTMLCollections diretamente, mas pode fazer isso 
indiretamente: 

var content = Array.prototype.map.call(document.getElementsByTagName("p"), 
function(e) { return e.innerHTML; }); 

Os objetos HTMLCollection podem ter propriedades nomeadas adicionais e podem ser indexados com 
strings e com numeros. 

Por motivos historicos, tanto objetos NodeList como HTMLCollection tambem podem ser tratados como 
fungoes: chama-los com um argumento numerico ou de string e o mesmo que indexa-los com um numero 
ou com uma string. 0 uso dessa peculiaridade e desestimulado. 

As interfaces NodeList e HTMLCollection foram projetadas tendo em mente linguagens menos dinami- 
cas do que JavaScript em mente. Ambas definem um metodo item(). Ele espera um inteiro e retorna o 
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elemento que esta nesse mdice. Em JavaScript nunca ha necessidade de chamar esse metodo, pois pode- 
-se simplesmente utilizar indexa^ao de array em seu lugar. Da mesma forma, HTMLCollection define urn 
metodo namedltemQ que retorna o valor de uma propriedade nomeada, mas os programas JavaScript 
podem usar indexagao de array ou acesso a propriedade normal em seu lugar. 

Uma das caracterfsticas mais importantes e surpreendentes de NodeList e HTMLCollection e nao serem 
instantaneos estaticos de urn estado historico do documento, mas geralmente sao dinamicos e a lista 
de elementos que content pode variar a medida que o documento muda. Suponha que voce chame 
getElementsByTagName( ’ div 1 ) em urn documento sem nenhum elemento <div>. 0 valor de retorno e 
urn NodeList com length igual a 0. Se, entao, voce insere urn novo elemento <div> no documento, esse 
elemento se torna automaticamente um membra do NodeList e a propriedade length muda para 1. 

Normalmente, o carater dinamico de NodeLists e HTMLCollections e muito util. Contudo, se voce vai adi- 
cionar ou remover elementos do documento enquanto itera por um NodeList, talvez queira primeiro fazer 
uma copia estatica do NodeList: 

var snapshot = Array.prototype.slice.call(nodelist, 0); 


15.2.4 Selecionando elementos por dasse CSS 

O atributo class de uma HTML e uma lista separada de zero ou mais identificadores por espa?os. 
Ele descreve uma maneira de definir conjuntos de elementos relacionados do documento: todos os 
elementos que tern o mesmo identificador em seu atributo class fazem parte do mesmo conjunto. 
class e uma palavra reservada de JavaScript, de modo que JavaScript do lado do cliente utiliza a pro¬ 
priedade className para conter o valor do atributo HTML class. O atributo class normalmente e 
usado em conjunto com uma folha de estilos CSS para aplicar os mesmos estilos de apresenta^ao em 
todos os membros de um conjunto. Vamos ve-lo outra vez, no Capitulo 16. Alem disso, contudo, 
a HTML5 define um metodo getElementsByClassName() que nos permite selecionar conjuntos de 
elementos de documento com base nos identificadores que estao em seu atributo class. 

Assim como getElementsByTagNameQ, getElementsByClassName() pode ser chamado em documentos 
HTML e em elementos HTML, retornando um NodeList dinamico, contendo todos os descenden- 
tes coincidentes do documento ou elemento. getElementsByClassName() recebe um unico argumento 
de string, mas a string pode especificar varios identificadores separados por espagos. Somente os 
elementos que incluem todos os identificadores especificados em seus atributos class sao coinciden¬ 
tes. A ordem dos identificadores nao importa. Note que tanto o atributo class como os metodos 
get Element sByClassName() separam identificadores de classe com espagos e nao com virgulas. Aqui 
estao alguns exemplos de getElementsByClassName(): 

// Localiza todo os elementos que tern "warning" em seus atributos class 
var warnings = document.getElementsByClassName("warning"); 

// Localiza todos os descendentes do elemento chamado "log" que tern a classe 

// "error" e a classe "fatal" 

var log = document.getElementById("log"); 

var fatal = log.getElementsByClassName("fatal error"); 

Os navegadores Web atuais exibem documentos HTML no “modo Quirks” ou no “modo Standar¬ 
ds”, dependendo do quanto a declaragao <!D0CTYPE> no irn'cio do documento e restrita. O modo 
Quirks existe por compatibilidade com versoes anteriores e uma de suas peculiaridades e que os 






Capftulo 15 Escrevendo script de documentos 359 


identificadores de classe no atributo class e nas folhas de estilos CSS nao diferenciam letras mai¬ 
usculas e minusculas. getElementsByClassName() segue o algoritmo de correspondence usado pelas 
folhas de estilo. Se o documento e renderizado no modo Quirks, o metodo faz uma comparaQo de 
string que nao diferencia letras maiusculas e minusculas. Caso contrario, a comparaQo diferencia 
letras maiusculas e minusculas. 

Quando este livro estava sendo escrito, getElementsByClassName () era implementada por todos os na- 
vegadores atuais, exceto o IE8 e anteriores. O IE8 suporta querySelectorAll(), descrito na proxima 
seqao, e getElementsByClassName() pode ser implementado em cima desse metodo. 


15.2.5 Selecionando elementos com seletores CSS 

As folhas de estilos CSS tem uma sintaxe muito poderosa, conhecida como seletores, para des- 
crever elementos ou conjuntos de elementos dentro de um documento. Os detalhes completos 
sobre a sintaxe de seletor CSS estao fora dos objetivos deste livro , mas alguns exemplos demons- 
trarao os fundamentos. Os elementos podem ser descritos pela identifica?ao, nome de tag ou 
classe: 

#nav // Um elemento com id="nav" 

div // Oualquer elemento <div> 

.warning // Oualquer elemento com "warning" em seu atributo class 

De forma mais geral, os elementos podem ser selecionados com base em valores de atributo: 

p[lang="fr"] // Um paragrafo escrito em trances: <p lang="fr"> 

*[name="x"] // Oualquer elemento com um atributo name="x” 

Esses seletores basicos podem ser combinados: 

span.fatal.error // Oualquer <span> com "fatal" e "error” em sua classe 

span[lang="fr"].warning // Oualquer aviso em frances 

Os seletores tambem podem especificar estrutura de documento: 

#log span // Oualquer descendente <span> do elemento com id="log" 

#log>span // Oualquer filho <span> do elemento com id="log" 

body>hl:first-child // 0 primeiro filho <hl> de <body> 

Os seletores podem ser combinados para selecionar varios elementos ou varios conjuntos de elemen- 

div, #log // Todos os elementos <div>, mais o elemento com id="log" 

Como voce pode ver, os seletores CSS permitem que elementos sejam selecionados de todas as 
maneiras descritas anteriormente: pela identificafao, pelo nome, pelo nome de tag e pelo nome 
da classe. Junto com a padronizaQo de seletores CSS3, outro padrao da W3C, conhecido como 
“API de Seletores” define metodos JavaScript para obter os elementos que coincidem com determi- 
nado seletor 1 2 . O segredo dessa API e o metodo querySelectorAllQ de Document. Ele recebe um 
argumento de string contendo um seletor CSS e retorna um objeto NodeList representando todos 


1 Os seletores CSS3 estao especificados em http://www.w3.org/TR/css3-selectors/. 

O padrao API de Seletores nao faz parte de HTML5, mas e intimamente relacionado a ela. Consulte http://www.w3.org/ 
TR/selectors-api/. 
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os elementos do documento que correspondem ao seletor. Ao contrario dos metodos de selepio 
de elemento descritos anteriormente, o objeto NodeList retornado por querySelectorAllQ nao e 
dinamico: ele contem os elementos que correspondiam ao seletor no momento em que o metodo 
foi chamado, mas nao e atualizado quando o documento muda. Se nenhum elemento coincide, 
querySelectorAllQ retorna um objeto NodeList vazio. Se a string do seletor e invalida, querySelec- 
torAHQ lan9a uma exceplo. 

Alem de querySelectorAllQ, o objeto documento tambem define querySelectorQ, que e como 
querySelectorAllQ mas retorna somente o primeiro (na ordem do documento) elemento coinciden¬ 
ce ou null, caso nao haja elemento coincidente. 

Esses dois metodos tambem sao definidos em Elements (e tambem em nos DocumentFragment; 
consulte a Sepio 15.6.4). Quando chamados em um elemento, o seletor especificado e comparado 
no documento inteiro e, entao, o conjunto resultante e filtrado para que inclua somente os descen- 
dentes do elemento especificado. Isso pode parecer absurdo, pois significa que a string do seletor 
pode incluir ascendentes do elemento em relapio ao qual e comparado. 

Note que CSS define pseudoelementos : first-line e : first-letter. Em CSS, isso corresponde a 
partes de nos de texto, em vez de elementos reais. Eles nao vao corresponder se usados com query¬ 
SelectorAllQ ou querySelectorQ. Alem disso, muitos navegadores vao se recusar a retornar cor¬ 
respondences para as pseudoclasses :link e : visited, pois isso poderia expor informa^oes sobre o 
historico de navega?ao do usuario. 

Todos os navegadores atuais suportam querySelectorQ e querySelectorAllQ. Note, entretanto, que 
a especificapio desses metodos nao exige suporte para seletores CSS 3: os navegadores sao estimu- 
lados a suportar o mesmo conjunto de seletores que suportam em folhas de estilo. Os navegadores 
atuais, fora o IE, suportam seletores CSS3. O IE7 e 8 suportam seletores CSS2. (E esperado que o 
IE9 tenha suporte para CSS3.) 

querySelectorAllQ e o metodo definitivo de selepio de elemento: trata-se de uma tecnica muito po- 
derosa por meio da qual os programas JavaScript do lado do cliente podem selecionar os elementos 
do documento que vao manipular. Felizmente, esse uso de seletores CSS esta disponivel mesmo em 
navegadores sem suporte nativo para querySelectorAllQ. Abiblioteca jQuery (consulte o Capitulo 
19) usa esse tipo de consulta baseada em seletor CSS como principal paradigma de programapio. 
Os aplicativos Web baseados na jQuery utilizam um equivalente de querySelectorAllQ portavel e 
independente de navegador, chamado $ (). 

O codigo de correspondence de seletor CSS da jQuery foi decomposto e lanpido como uma biblio- 
teca independente, chamada Sizzle, que foi adotada pela Dojo e por outras bibliotecas do lado do 
cliente . A vantagem de usar uma biblioteca como a Sizzle (ou uma biblioteca que utiliza Sizzle) e 
que as seletjoes funcionam ate em navegadores mais antigos, e existe um conjunto basico de seletores 
que garantidamente funcionam em todos os navegadores. 

15.2.6 document.all[] 

Antes do DOM ser padronizado, o IE4 introduziu a colepio document.all[] que representava to¬ 
dos os elementos (mas nao nos Text) do documento. document.all[] foi substitufda por metodos 


3 Uma versao independente da Sizzle esta disponivel no endereyo http://sizzlejs.com. 
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padrao, como getElementById() e getElementsByTagName(), e agora esta obsoleta, nao devendo ser 
usada. Contudo, quando foi apresentada, era revolucionaria, sendo que ainda se pode ver codigo 
utilizando-a de uma destas maneiras: 


document.all[0] 
document.all["navbar"] 
document.all.navbar 
document.all.tags("div") 
document.all.tags("p")[o] 


// 0 primeiro elemento no documento 

// 0 elemento (ou elementos) com identificacao 

// Todos os elementos <div> no documento 
// 0 primeiro <p> no documento 


"navbar" 


15.3 Estrutura de documentos e como percorre-los 

Apos ter selecionado um Element de um Document, as vezes voce precisa encontrar partes estru- 
turalmente relacionadas (pai, irmaos, filhos) do documento. Um Document pode ser conceituado 
como uma arvore de objetos Node, como ilustrado na Figura 15-1. O tipo Node define proprieda- 
des para percorrer essa arvore, o que vamos abordar na Serjao 15.3.1. Outra API permite percorrer 
documentos como arvores de objetos Element. A Serjao 15.3.2 aborda essa API mais recente (e 
frequentemente mais facil de usar). 


15.3.1 Documentos como arvores de Nodes 

O objeto Document, seus objetos Element e os objetos Text que representam texto no documento, 
sao todos objetos Node. Node define as seguintes propriedades importantes: 

parentNode 

O objeto Node que e o pai desse no, ou null para nos como o objeto Document, que nao tern 


childNodes 

Um objeto semelhante a um array somente para leitura (um NodeList) que e uma representa- 
<jao dinamica dos nos filhos de um Node. 

firstChild, lastChild 

O primeiro e o ultimo nos filhos de um no, ou null se o no nao tern filhos. 
nextSibling, previousSibling 

O no irmao proximo e anterior de um no. Dois nos com o mesmo pai sao irmaos. Sua ordem 
reflete a ordem na qual aparecem no documento. Essas propriedades conectam nos em uma 
lista duplamente encadeada. 

nodeType 

O tipo do no. Os nos Document tern o valor 9. Os nos Element tern o valor 1. Os nos Text 
tern o valor 3. Os nos Comments sao 8 e os nos DocumentFragment sao 11. 

nodeValue 

O conteudo textual de um no Text ou Comment. 
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nodeName 

O nome da marca de um Element, convertido em letras maiusculas. 

Usando-se as propriedades Node, o segundo no filho do primeiro filho do Document pode ser refe- 
rido com expressoes como as seguintes: 

document.childNodes[0].childNodes[l] 
document.firstChild.firstChild.nextSibling 

Suponha que o documento em questao seja o seguinte: 

<htmlxhead><title>Test</title></headxbody>Hello World !</bodyx/html> 

Entao, o segundo filho do primeiro filho e o elemento <body>. Ele tern nodeType 1 e nodeName 
“BODY”. 

Note, entretanto, que essa API e extremamente sensfvel a variates no texto do documento. Se o do¬ 
cumento e modificado pela inserijao de uma nova linha entre a marca^ao <html> e a marca^ao <head>, 
por exemplo, o no Text que representa essa nova linha se torna o primeiro filho do primeiro filho e 
o segundo filho e o elemento <head>, em vez do corpo de <body>. 


15.3.2 Documentos como arvores de Elements 

Quando estamos interessados principalmente nos objetos Element de um documento, em vez do 
texto dentro deles (e o espafo em branco entre eles), e util usar uma API que nos permita tratar um 
documento como uma arvore de objetos Element, ignorando os nos Text e Comment que tambem 
fazem parte do documento. 

A primeira parte dessa API e a propriedade children de objetos Element. Assim como childNodes, 
isso e um NodeList. Ao contrario de childNodes, contudo, a lista de children contem apenas objetos 
Element. A propriedade children nao e padronizada, mas funciona em todos os navegadores atuais. 
O IE a implementou por um longo tempo e a maioria dos outros navegadores fez o mesmo. O ulti¬ 
mo navegador importante a adota-la foi o Firefox 3.5. 

Note que os nos Text e Comment nao podem ter filhos, ou seja, a propriedade Node.parentNode, 
descrita anteriormente, nunca retorna um no Text ou Comment. O parentNode de qualquer Element 
vai ser sempre outro Element ou, na raiz da arvore, um Document ou DocumentFragment. 

A segunda parte de uma API para percorrer documentos baseada em elemento sao propriedades 
Element analogas as propriedades filho e irmao do objeto Node: 

firstElementChild, lastElementChild 

Parecidas com firstChild e lastChild, mas apenas para filhos de Element. 

nextElementSibling, previousElementSibling 

Parecidas com nextSibling e previousSibling, mas apenas para irmaos de Element. 
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childElementCount 

O numero de filhos do elemento. Retorna o mesmo valor que children.length. 

Essas propriedades filho e irmao sao padronizadas e implementadas em todos os navegadores atuais, 
exceto o IE . 

Como a API para percorrer documentos elemento por elemento ainda nao e completamente univer¬ 
sal, talvez voce queira definir fun<;6es portaveis para percorre-los, como as do Exemplo 15-2. 

Exemplo 15-2 Fun0es portaveis para percorrer documentos 

/** 

* Retorna o n-esimo ascendente de e, ou null se nao existe tal ascendente 

* ou, se esse ascendente nao e um Element (urn Document ou DocumentFragment, por 

* exemplo). 

* Se n e 0, retorna o proprio e. Se n e 1 (ou 

* e omitido), retorna o pai. Se n e 2, retorna o avo, etc. 

function parent(e, n) { 

if (n === undefined) n = 1; 
while(n-- && e) e = e.parentNode; 
if (!e || e.nodeType !== l) return null; 

} r6tUrn ^ 


/** 

* Retorna o n-esimo elemento irmao do Element e. 

* Se n e positivo, retorna o n-esimo proximo elemento irmao. 

* Se n e negativo, retorna o n-esimo elemento irmao anterior. 

* Se n e zero, retorna o proprio e. 

function sibling(e,n) { 

while(e && n !== 0) { // Se e nao esta definido, apenas o retornamos 

if (n > 0) { // Localiza o proximo irmao do elemento 

if (e.nextElementSibling) e = e.nextElementSibling; 
else { 

for(e=e.nextSibling; e && e.nodeType !== l; e=e.nextSibling) 

/* la;o vazio */ ; 

} 

} 

else { // Localiza o irmao anterior do elemento 

if (e.previousElementSibing) e = e.previousElementSibling; 
else { 

for(e=e.previousSibling; e&&e.nodeType! ==i; e=e.previousSibling) 
} ‘ la? ° VaZ1 ° 

} 

} 


http://unvw.w3.org/TmlementTraversal. 
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* Retorna o n-esimo elemento filho de e, ou 

* Valores negativos de n contam a partir do 

* -1 signi-fica o ultimo filho, -2 significa 
*/ 

function child(e, n) { 
if (e.children) { 

if (n < 0) n += e.children.length; 
if (n < 0) return null; 
return e.children[n]; 

} 


null se ele nao tern um. 

final. 0 significa o primeiro filho, mas 

o penultimo e assim por diante. 


// Se o array children existe 
// Converte n negativo no indice do array 
// Se ainda e negativo, nenhum filho 
// Retorna o filho especificado 


// Se e nao tern um array de filhos, localiza o primeiro filho e conta 
// para frente ou localiza o ultimo filho e conta para tras a partir de la. 
if (n >= 0) { lint nao negativo: conta para frente a partir do primeiro filho 
II Localiza o primeiro elemento filho de e 
if (e.firstElementChild) e = e.firstElementChild; 
else { 

for(e = e.firstChild; e && e.nodeType !== l; e = e.nextSibling) 

/* vazio */; 

} 

return sibling(e, n); // Retorna o n-esimo irmao do primeiro filho 

} 

else { lint negativo; portanto, conta para tras a partir do fim 

if (e.lastElementChild) e = e.lastElementChild; 
else { 

for(e = e.lastChild; e && e.nodeType !== 1; e=e.previousSibling) 

} 

return sibling(e, n+l); // +1 para converter filho -1 para irmao 0 do ultimo 

} 

} 


Definindo metodos de Element personalizados 

Todos os navegadores atuais (induindo o IE8, mas nao o IE7 e anteriores) implementam o DOM, de modo 
que tipos como Element e HTMLDocument 5 sao classes como String e Array. Elas nao sao construtoras (va- 
mos ver como se cria novos objetos Element posteriormente no capitulo), mas tern prototipos de objetos 
e voce pode estende-las com metodos personalizados: 

Element.prototype.next = function() { 

if (this.nextElementSibling) return this.nextElementSibling; 
var sib = this.nextSibling; 

while(sib && sib.nodeType !== l) sib = sib.nextSibling; 
return sib; 

h 


5 O IE8 suporta prototipos que podem ser estendidos para Element, HTMLDocument e Text, mas nao para Node, Docu¬ 
ment, HTMLElement ou qualquer um dos subtipos mais especificos de HTMLElement. 
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As fungoes do Exemplo 15-2 nao sao definidas como metodos de Element porque essa tecnica nao e su- 
portada pelo IE7. 

No entanto, essa capacidade de estender tipos DOM ainda e util se voce quer implementar recursos espe- 
cificos do IE em outros navegadores. Conforme mencionado anteriormente, a propriedade nao padroniza- 
da children de Element foi introduzida pelo IE e adotada por outros navegadores. Voce pode usar codigo 
como o seguinte para simula-la em navegadores que nao a suportam, como o Firefox 3.0: 

// Simula a propriedade Element.children em navegadores que nao o IE que nao a tern 
// Note que isso retorna urn array estatico, em vez de urn NodeList dinamico 
if (Idocument.documentElement.children) { 

Element.prototype._defineGetter_("children", function!) { 

var kids = []; 

for(var c = this.firstChild; c != null; c = c.nextSibling) 
if (c.nodeType === l) kids.push(c); 
return kids; 

}); 

} 

O metodo_defineGetter_(abordado na Segao 6.7.1) e completamente nao padrao, mas e perfeito 

para codigo de portabilidade como esse. 


15.4 Atributos 

Os elementos HTML consistem em um nome de tag e um conjunto de pares nome/valor conhe- 
cidos como atributos. O elemento <a> que define um hiperlink, por exemplo, utiliza o valor de seu 
atributo href como destino do link. Os valores de atributo dos elementos HTML estao disponfveis 
como propriedades dos objetos HTMLElement que representam esses elementos. O DOM tambem 
define outras APIs para obter e configurar os valores de atributos XML e atributos HTML nao pa- 
dronizados. As subsegoes a seguir tern detalhes. 

15.4.1 Atributos HTML como propriedades de Element 

Os objetos HTMLElement que representam os elementos de um documento HTML definem pro¬ 
priedades de leitura/gravagao que espelham os atributos HTML dos elementos. HTMLElement 
define propriedades para os atributos HTTP universal, como id, title lang e dir, e propriedades 
de rotina de tratamento de evento, como onclick. Os subtipos especfficos dos elementos definem 
atributos especfficos para esses elementos. Para consultar o URL de uma imagem, por exemplo, voce 
pode usar a propriedade src do objeto HTMLElement que representa o elemento <img>: 
var image = document.getElementById("myimage"); 

var imgurl = image.src; // 0 atributo src e o URL da imagem 

image.id === "myimage" // Visto que pesquisamos a imagem pela identificagao 

Da mesma forma, voce poderia configurar os atributos de envio de formulario de um elemento 
<form> com codigo como o seguinte: 

var f = document.forms[0]; // Primeiro <form> no documento 

f.action = "http://www.example.com/submit.php"; // Configura o URL para envio. 
f.method = "POST"; // Tipo de pedido HTTP 
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Os atributos HTML nao diferenciam letras maiusculas e minusculas, mas os nomes de propriedade 
de JavaScript, sim. Para converter um nome de atributo em propriedade JavaScript, escreva-o em 
letras minusculas. No entanto, se o atributo utiliza mais de uma palavra, coloque a primeira letra de 
cada palavra apos a primeira delas em maiuscula: defaultChecked e tablndex, por exemplo. 

Alguns nomes de atributo HTML sao palavras reservadas em JavaScript. Para esses, a regra geral 
e prefixar o nome de propriedade com “html”. O atributo HTML for (do elemento <label>), 
por exemplo, se torna a propriedade JavaScript htmlFor. “class” e uma palavra reservada (mas nao 
utilizada) em JavaScript e o importante atributo HTML class e uma excefao a regra anterior: 
ele se torna className em codigo JavaScript. Vamos ver a propriedade className novamente, no 
Capitulo 16. 

As propriedades que representam atributos HTML normalmente tem um valor de string. Quan- 
do o atributo e um valor booleano ou numerico (os atributos defaultChecked e maxLength de um 
elemento <input>, por exemplo), os valores das propriedades sao booleanos ou numeros, em vez 
de strings. Os atributos de rotina de tratamento de evento sempre tem objetos Function (ou null) 
como valores. A especifica^ao HTML5 define alguns atributos (como o atributo form de <input> 
e elementos relacionados) que convertem identificanoes de elemento em objetos Element reais. 
Por fim, o valor da propriedade style de qualquer elemento HTML e um objeto CSSStyleDe- 
claration, em vez de uma string. Vamos ver muito mais sobre essa importante propriedade, no 
Capitulo 16. 

Note que essa API baseada em propriedades para obter e configurar valores de atributo nao defi¬ 
ne nenhuma maneira de remover um atributo de um elemento. Em especial, o operador delete 
nao pode ser usado para esse proposito. A se?ao a seguir descreve um metodo que pode ser usado 
para isso. 

15.4.2 Obtendo e configurando atributos que nao sao HTML 

Conforme descrito anteriormente, HTMLElement e seus subtipos definem propriedades que 
correspondem aos atributos padrao de elementos HTML. O tipo Element tambem define meto- 
dos getAttributeQ e setAttribute() que podem ser usados para consultar e configurar atributos 
HTML nao padronizados e para consultar e configurar atributos nos elementos de um documen- 
to XML: 

var image = document.images[0]; 

var width = parseInt(image.getAttribute("WIDTH")); 

image.setAttribute("class", "thumbnail"); 

O codigo anterior destaca duas importantes diferenijas entre esses metodos e a API baseada em pro¬ 
priedades descritas. Primeiramente, todos os valores de atributo sao tratados como strings. getAttri- 
bute() nunca retorna um numero, booleano ou objeto. Segundo, esses metodos utilizam nomes de 
atributo padrao, mesmo quando esses nomes sao palavras reservadas em JavaScript. Para elementos 
HTML, os nomes de atributo nao diferenciam letras maiusculas e minusculas. 

Element tambem define dois metodos relacionados, hasAttributeQ e removeAttributeQ, o primeiro 
dos quais verifica a presen^a de um atributo nomeado e o outro remove um atributo inteiramente. 
Esses metodos sao especialmente uteis com atributos booleanos: esses sao atributos (como o atributo 
disabled de elementos de formulario HTML) cuja presen^a ou ausencia em um elemento importa, 
mas cujo valor nao e relevante. 
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Se estiver trabalhando com documentos XML que incluem atributos de outros esparjo de nomes, 
pode usar as respectivas variantes desses quatro metodos: getAttributeNSQ, setAttributeNSQ, 
hasAttributeNSQ e removeAttributeNS(). Em vezde receberem uma unicastring como nome de atri- 
buto, esses metodos recebem duas. A primeira e o URI que identifica o esparto de nomes. O segundo 
normalmente e o nome local nao qualificado do atributo dentro do espa^o de nomes. Contudo, 
apenas para setAttributeNSQ, o segundo argumento e o nome qualificado do atributo e inclui o 
prefixo do espa^o de nomes. Voce pode ler mais sobre esses metodos com atributo com consciencia 
de espa^o de nomes na Parte IV. 

15.4.3 Atributos de conjuntos de dados 

As vezes e util anexar informafoes nos elementos HTML, normalmente quando o codigo Java¬ 
Script vai seleciona-los e manipula-los de algum modo. As vezes isso pode ser feito pela adifao 
de identificadores especiais no atributo class. Outras vezes, para dados mais complexos, os pro- 
gramadores do lado do cliente recorrem a atributos nao padronizados. Conforme mencionado, 
voce pode usar os metodos getAttributeQ e setAttribute() para ler e gravar valores de atributos 
nao padronizados. O prefo a ser pago, no entanto, e que seu documento nao vai ser um HTML 
valido. 

HTML5 oferece uma solu?ao. Em um documento HTML5, qualquer atributo cujo nome apa- 
re?a em letras minusculas e comece com o prefixo “data-” e considerado valido. Esses “atributos 
de conjunto de dados” nao vao afetar a apresenta?ao dos elementos nos quais aparecem e definem 
uma maneira padronizada de anexar mais dados sem comprometer a validade do documento. 

HTML5 tambem define uma propriedade dataset em objetos Element. Essa propriedade se refere 
a um objeto, o qual tern propriedades que correspondem aos atributos data- com o prefixo removi- 
do. Assim, dataset.x conteria o valor do atributo data-x. Os atributos hifenizados sao mapeados em 
nomes de propriedade com maiusculas no meio: o atributo data-jquery-test se torna a propriedade 
dataset.jqueryTest. 

Como um exemplo mais concreto, suponha que um documento contem a seguinte marca^ao: 

<span class="sparkline" data-ymin="0" data-ymax="lO"> 

111223455435677421 

</span> 

Sparkline e um pequeno grafico - frequentemente um grafico de linhas - destinado a exibi^ao den¬ 
tro do fluxo de texto. Para gerar um grafico de linhas, voce poderia extrair o valor dos atributos do 
conjunto de dados anterior com codigo como o seguinte: 

// Supoe que o metodo ES5 Array.map() (ou um de funcionamento igual) esteja definido 
var sparklines = document.getElementsByClassName("sparkline"); 
for(var i = 0; i < sparklines.length; i++) { 
var dataset = sparklinesfi].dataset; 
var ymin = parseFloat(dataset.ymin); 
var ymax = parseFloat(dataset.ymax); 

var data = sparklinesfi].textContent.split(" ").map(parseFloat); 
drawSparkline(sparklines[i], ymin, ymax, data); // Ainda nao implementado 

} 
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Quando este livro estava sendo escrito, a propriedade dataset nao estava implementada nos navega- 
dores e o codigo anterior teria de ser escrito como segue: 

var sparklines = document.getElementsByClassName("sparkline"); 
for(var i = 0; i < sparklines.length; i++) { 
var elt = sparklines[i]; 

var ymin = parseFloat(elt.getAttribute("data-ymin")); 

var ymin = parseFloat(elt.getAttribute("data-ymax")); 

var points = elt.getAttribute("data-points"); 

var data = elt.textContent.split(" ").map(parseFloat); 

drawSparkline(elt, ymin, ymax, data); // Ainda nao implementado 

} 

Note que a propriedade dataset e (ou sera, quando for implementada) uma interface bidirecional di- 
namica para os atributos data- de um elemento. Configurar ou excluir uma propriedade de dataset 
configura ou remove o atributo data- correspondente do elemento. 

A fun^ao drawSparkline() nos exemplos anteriores e fictfcia, mas o Exemplo 21-13 tra^a graficos de 
linha com marca^ao como esse, usando o elemento <canvas>. 

15.4.4 Atributos como nos Attr 

Ha mais uma maneira de trabalhar com os atributos de um objeto Element. O tipo Node define 
uma propriedade attributes. Essa propriedade e null para todos os nos que nao sao objetos Ele¬ 
ment. Para objetos Element, attributes e um objeto semelhante a um array somente para leitura que 
representa todos os atributos do elemento. O objeto attributes e dinamico como os NodeLists. Ele 
pode ser indexado numericamente, ou seja, e possivel enumerar todos os atributos de um elemento. 
E tambem pode ser indexado por nome de atributo: 

document.body.attributesfo] // 0 primeiro atributo do elemento <body> 

document.body.attributes.bgcolor // 0 atributo bgcolor do elemento <body> 

document, body, attributes [''ONLOAD''] // 0 atributo onload do elemento <body> 

Os valores obtidos ao se indexar o objeto attributes sao objetos Attr. Os objetos Attr sao um tipo 
especializado de Node, mas nunca sao utilizados dessa forma. As propriedades name e value de um 
Attr retornam o nome e o valor do atributo. 

15.5 Conteudo de elemento 

Veja novamente a Figura 15-1 e pergunte-se qual e o “conteudo” do elemento <p>. Existem tres ma- 
neiras de respondermos a essa questao: 

• O conteudo e a string HTML “This is a <i>simple</i> document 

• O conteudo e a string de texto puro “This is a simple document”. 

• O conteudo e um no Text, um no Element que tern um no filho Text e outro no Text. 
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Todas essas sao respostas validas e cada resposta e util a sua propria maneira. As serjoes a seguir ex- 
plicam como trabalhar com a representa^ao HTML, com a representaQo em texto puro e com a 
representarjao em arvore de conteudo de elemento. 

15.5.1 Conteudo de elemento como HTML 

A leitura da propriedade innerHTML de um Element retorna o conteudo desse elemento como uma 
string de marca^ao. Configurar essa propriedade em um elemento invoca o parser do navegador 
Web e substitui o conteudo atual do elemento por uma representafao analisada da nova string. (Ape- 
sar de seu nome, innerHTML pode ser usada com elementos XML e com elementos HTML.) 

Os navegadores Web sao muito bons na analise de HTML e a configura?ao de innerHTML normal- 
mente e muito eficiente, mesmo que o valor especificado precise ser analisado. Note, entretanto, que 
anexar trechos de texto repetidamente na propriedade innerHTML com o operador += normalmente 
nao e eficiente, pois isso exige uma etapa de serializa^ao e uma etapa de analise. 

A propriedade innerHTML foi introduzida no IE4. Embora seja suportada ha tempos por todos os 
navegadores, somente com o advento de HTML5 foi padronizada. HTML5 diz que innerHTML deve 
funcionar em nos Document e em nos Element, mas isso ainda nao e suportado universalmente. 

HTML5 tambem padroniza uma propriedade chamada outerHTML. Quando se consulta outerHTML, a 
string de marca?ao HTML ou XML retornada inclui as tags de abertura e fechamento do elemento 
no qual ela foi consultada. Quando se configura outerHTML em um elemento, o novo conteudo subs¬ 
titui o elemento em si. outerHTML so e definida para nos Element, nao para Documents. Quando este 
livro estava sendo escrito, outerHTML era suportada por todos os navegadores vigentes, exceto o Fire- 
fox. (Veja o Exemplo 15-5, posteriormente neste capftulo, para uma implementaQo de outerHTML 
baseada em innerHTML.) 

Outro recurso introduzido pelo IE e padronizado em HTML5 e o metodo insertAdjacentHTMLQ, o 
qual permite inserir uma string de marcaQo HTML arbitraria “adjacente” ao elemento especificado. 
A marcaQo e passada como segundo argumento para esse metodo e o significado preciso de “adja¬ 
cente” depende do valor do primeiro argumento. Esse primeiro argumento deve ser uma string com 
um dos valores “beforebegin”, “afterbegin”, “beforeend” ou “afterend”. Esses valores correspondem 
aos pontos de inserQo ilustrados na Figura 15-3. 


1 <div 

id="target">l This 

is the element content l</div>l 

t 

t 

t t 

beforebegin 

afterbegin 

beforeend afterend 


Figura 15-3 Pontos de insergao para insertAdjacentHTMLQ. 


insertAdjacentHTML() nao e suportado pelas versoes atuais do Firefox. Posteriormente neste capftulo, 
o Exemplo 15-6 mostra como implementar insertAdjacentHTMLQ usando a propriedade innerHTML 
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e tambem demonstra como escrever metodos de insergao de HTML que nao exigem especificar 
posigao de insergao com um argumento de string. 


15.5.2 Conteudo de elemento como texto puro 

As vezes voce quer consultar o conteudo de um elemento como texto puro ou inserir texto puro em 
um documento (sem fazer o escape dos sinais de menor e maior e dos E comerciais utilizados na 
marcagao HTML). O modo padrao de fazer isso e com a propriedade textContent de Node: 
var para = document.getElementsByTagName("p")[0]; // Primeiro <p> no documento 

var text = para.textContent; // 0 texto e "This is a simple document." 

para.textContent = "Hello World!"; // Altera o conteudo do paragrafo 

A propriedade textContent e suportada por todos os navegadores atuais, exceto o IE. No IE, voce 
pode usar a propriedade Element innerText. A Microsoft introduziu innerText no IE4 e ela e supor¬ 
tada por todos os navegadores atuais, exceto o Firefox. 

As propriedades textContent e innerText sao semelhantes o bastante para que em geral possam ser 
utilizadas indistintamente. Tome o cuidado, contudo, para diferenciar elementos vazios (a string 
em JavaScript e falsa) das propriedades indefinidas: 

* Com um argumento, retorna textContent ou innerText do elemento. 

* Com dois argumentos, configura textContent ou innerText do elemento com value. 

*/ 

function textContent(element, value) { 

var content = element.textContent; // Verifica se textContent esta definida 
if (value === undefined) { // Nenhum valor passado; portanto, retorna o texto atual 
if (content !== undefined) return content; 
else return element.innerText; 

} 

else { // Um valor foi passado; portanto, configura o texto 

if (content !== undefined) element.textContent = value; 
else element.innerText = value; 

} 

} 

A propriedade textContent e uma concatenagao simples de todos os descendentes de no Text do ele¬ 
mento especificado. innerText nao tern um comportamento claramente especificado, mas difere de 
textContent de varias maneiras. innerText nao retorna o conteudo de elementos <script>, omite espa- 
50 em branco irrelevante e tenta preservar formatagao de tabela. Alem disso, innerText e tratada como 
uma propriedade somente para leitura em certos elementos de tabela, como <table>, <tbody> e <tr>. 


Texto em elementos <script> 

Os elementos <script> em linha (isto e, aqueles que nao tern um atributo src) tern uma propriedade 
text que pode ser usada para recuperar seu texto. 0 conteudo de um elemento <script> nunca e exibido 
pelo navegador e 0 parser de HTML ignora sinais de menor e maior e sinais de E comercial dentro de um 
script. Isso torna 0 elemento <script> um lugar ideal para incorporar dados textuais arbitrarios para uso 
por seu aplicativo. Basta configurar 0 atributo type do elemento com algum valor (como"text/x-custom- 
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-data") que tome claro que o script nao e codigo JavaScript executavel. Se voce fizer isso, o interpretador 
JavaScript vai ignorar o script, mas o elemento vai existir na arvore de documentos e sua propriedade text 
vai retomar os dados. 


15.5.3 Conteudo de elemento como nos Text 

Outra maneira de trabalhar com o conteudo de um elemento e como uma lista de nos filhos, cada 
um dos quais podendo ter seu proprio conjunto de filhos. Quando se pensa em conteudo de ele¬ 
mento, normalmente sao os nos Text que tern interesse. Em documentos XML, voce tambem deve 
estar preparado para tratar de nos CDATASection - eles sao um subtipo de Text e representam o 
conteudo de segoes CDATA. 

O Exemplo 15-3 mostra uma fungao textContent() que percorre os filhos de um elemento recursi- 
vamente e concatena o texto de todos os descendentes do no Text. Para entender o codigo, lembre-se 
de que a propriedade nodeValue (definida pelo tipo Node) possui o conteudo de um no Text. 

Exemplo 15-3 Localizando todos os descendentes do noText de um elemento 

// Retorna o conteudo de texto puro do elemento e, usando recursividade para os elementos 
// filhos. 

// Este metodo funciona como a propriedade textContent 
function textContent(e) { 

var child, type, s = // s contem o texto de todos os filhos 

for(child = e.firstChild; child != null; child = child.nextSibling) { 
type a child.nodeType; 

if (type === 3 || type === 4) // Nos Text e CDATASection 

s += child.nodeValue; 

else if (type === l) // Recursividade para nos Element 

s += textContent(child); 

} 

} 

A propriedade nodeValue e de leitura/gravagao e voce pode configura-la de modo a alterar o con¬ 
teudo exibido por um no Text ou CDATASection. Tanto Text como CDATASection sao subtipos 
de CharacterData, sobre o qual voce pode pesquisar na Parte IV. CharacterData define uma proprie¬ 
dade data, a qual e o mesmo texto de nodeValue. A fungao a seguir convene o conteudo de nos Text 
para maiusculas, configurando a propriedade data: 

// Converte recursivamente todos os descendentes do no Text de n para maiusculas. 
function upcase(n) { 

if (n.nodeType == 3 )| n.nodeTyep == 4) // Se n e Text ou CDATA 

n.data = n.data.tollpperCase(); // ...converte o conteudo para 

// maiusculas. 

else // Caso contrario, usa recursividade nos 

// nos filhos 

for(var i = 0; i < n.childNodes.length; i++) 
upcase(n.childNodes[i]); 


} 
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CharacterData tambem define metodos pouco usados para anexar, excluir, inserir e substituir texto 
dentro de um no Text ou CDATASection. Em vez de alterar o conteudo de nos Text existentes, 
tambem e possfvel inserir novos nos Text em um Element ou substituir nos existentes por novos nos 
Text. A criapio, inserpio e exclusao de nos sao o tema da proxima sepio. 

15.6 Criando, inserindo e exduindo nos 

Vimos como consultar e alterar conteudo de documento usando strings HTML e de texto puro. E 
tambem vimos que podemos percorrer um objeto Document para examinar os nos Element e Text 
individuals de que e constituido. Tambem e possfvel alterar um documento no nfvel dos nos indi¬ 
viduals. O tipo Document define metodos para criar objetos Element e Text e o tipo Node define 
metodos para inserir, excluir e substituir nos na arvore. O Exemplo 13-4 demonstrou a criapio e a 
inserpio de nos e aquele breve exemplo esta duplicado aqui: 

// Carrega e executa um script de forma assincrona a partir de um URL especificado 
function loadasync(url) { 

var head = document.getElementsByTagName("head")[0]; // Localiza <head> do documento 
var s = document.createElement("script"); // Cria um elemento <script> 

s.src = url; // Configura seu atributo src 

head.appendChild(s); // Insere o <script> no cabecalho 

} 

As subse^oes a seguir contem mais detalhes e exemplos de criapio de no, de inserpio e exclusao de 
nos e tambem do uso de DocumentFragment como atalho ao se trabalhar com varios nos. 

15.6.1 Criando nos 

Como mostrado no codigo anterior, e possfvel criar novos nos Element com o metodo 
createElementQ do objeto Document. Passe o nome da tag do elemento como argumento do meto¬ 
do: esse nome nao diferencia letras maiusculas e minusculas para documentos HTML e diferencia 
para documentos XML. 

Os nos Text sao criados com um metodo semelhante: 

var newnode = document.createTextNode("text node content"); 

Document tambem define outros metodos de fabrica, como o pouco usado createComment(). Vamos 
usar o metodo createDocumentFragment() na Sepio 15.6.4. Ao trabalhar com documentos que usam 
espap) de nomes XML, voce pode utilizar createElementNSQ para especificar o URI do espapa de 
nomes e o nome de tag do objeto Element a ser criado. 

Outra maneira de criar novos nos de documento e fazer copias dos ja existentes. Todo no tern um 
metodo cloneNodeQ que retorna uma nova copia do no. Passe true para tambem copiar todos os 
descendentes recursivamente, ou false para fazer apenas uma copia rasa. Nos navegadores (me- 
nos o IE), o objeto Document tambem define um metodo semelhante, chamado importNodeQ. Se 
voce passa para ele um no de outro documento, ele retorna uma copia conveniente para inserfao 
nesse documento. Passe true como segundo argumento para importar recursivamente todos os 
descendentes. 
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15.6.2 Inserindo nos 

Uma vez que voce tenha um novo no, pode inseri-lo no documento com os metodos appendChild() 
ou insertBeforeQ de Node. appendChild() e chamado no no Element em que voce deseja inserir, 
sendo que ele insere o no especificado de modo a se tornar o last Child desse no. 

insertBeforeQ e como appendChildQ, mas recebe dois argumentos. O primeiro e o no a ser inserido. 
O segundo argumento e o no antes do qual esse no vai ser inserido. Esse metodo e chamado no no 
que vai ser o pai do novo no e o segundo argumento deve ser filho desse no pai. Se voce passa null 
como segundo argumento, insertBeforeQ se comporta como appendChildQ e insere no final. 

Aqui esta uma funpio simples para inserir um no em um indice numerico. Ela demonstra 
appendChildQ e insertBeforeQ: 

// Insere o no filho no pai de modo a se tornar o no filho n 
function insertAt(parent, child, n) { 

if (n < 0 || n > parent.childNodes.length) throw new Error("invalid index”); 
else if (n == parent.childNodes.length) parent.appendChild(child); 
else parent.insertBefore(child, parent.childNodes[n]); 

} 

Se voce chamar appendChildQ ou insertBeforeQ para inserir um no que ja esta no documento, esse 
no sera automaticamente removido de sua posipio atual e reinserido em sua nova posi?ao: nao ha 
necessidade de remover o no explicitamente. O Exemplo 15-4 mostra uma fun^ao para classificar 
as linhas de uma tabela com base nos valores das celulas em uma coluna especificada. Ela nao cria 
novos nos, mas utiliza appendChildQ para mudar a ordem dos nos existentes. 

Exemplo 15-4 Classificando as linhas de uma tabela 

// Classifica as linhas no primeiro <tbody> da tabela especificada, de acordo com 
// o valor da n-esima celula dentro de cada linha. Usa a funcao comparator 
// se uma estiver especificada. Caso contrario, compara os valores alfabeticamente. 
function sortrows(table, n, comparator) { 

var tbody = table.tBodies[o]; // Primeiro <tbody>; pode ser criado implicitamente 
var rows = tbody.getElementsByTagName("tr"); // Todas as linhas no tbody 
rows = Array.prototype.slice.call(rows,0); // Instantaneo em um array real 

// Agora classifica as linhas com base no texto do n-esimo elemento <td> 
rows.sort(function(rowl,row2) { 

var celll = rowl.getElementsByTagName("td")[n]; // Obtem a n-esima celula 

var cell2 = row2.getElementsByTagName("td")[n]; // das duas linhas 

var vail = celll.textContent || celll.innerText; // Obtem conteudo do texto 

var val2 = cell2.textContent || cell2.innerText; // das duas celulas 

if (comparator) return comparator(vall, val2); // Compara-os! 

if (vail < val2) return -1; 

else if (vail > val2) return 1; 

else return 0; 

}); 
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// Agora anexa as linhas no tbody, em sua ordem classificada. 

// Isso as move automaticamente de sua posicao atual; portanto, nao ha 
// necessidade de remove-las primeiro. Se o <tbody> contiver quaisquer 
// nos que nao sejam elementos <tr>, esses nos vao flutuar para o topo. 
for(var i = 0; i < rows.length; i++) tbody.appendChild(rows[i]); 


// Localiza os elementos <th> da tabela (supondo que exista apenas uma linha deles) 
// e os torna clicaveis para que urn clique em urn cabecalho de coluna classifique 
// por essa coluna. 
function makeSortable(table) { 

var headers = table.getElementsByTagName("th"); 
for(var i = 0; i < headers.length; i++) { 

(function(n) { // Funcao aninhada para criar urn escopo local 
headers[i].onclick = function() { sortrowsftable, n); }; 

}(i)); // Atribui o valor de i a variavel local n 

} 

} 


15.6.3 Removendo e substituindo nos 

O metodo removeChild() remove um no da arvore de documentos. Contudo, tome cuidado: esse 
metodo nao e chamado no no a ser removido, mas (conforme implica a parte “child” - filho - de seu 
nome) no pai desse no. Chame o metodo a partir do no pai e passe como argumento o no filho que 
deve ser removido. Para remover o no n do documento, voce escreveria: 

n.parentNode.removeChild(n); 

replaceChild() remove um no filho e o substitui por um novo no. Chame esse metodo no no pai, 
passando o novo no como primeiro argumento e o no a ser substituido como segundo argumento. 
Para substituir o no n por uma string de texto, por exemplo, voce poderia escrever: 

n.parentNode.replaceChild(document.createTextNode("[ REDACTED ]"), n); 

A funcao a seguir demonstra outro uso de replaceChildQ: 

// Substitui o no n por um novo elemento <b> e torna n um filho desse elemento. 
function embolden(n) { 

// Se passamos uma string em vez de um no, trata-a como uma identifica^ao de elemento 

if (typeof n == "string") n = document.getElementByld(n); 

var parent = n.parentNode; // Obtem o pai de n 

var b = document.createElement("b"); // Cria um elemento <b> 

parent.replaceChild(b, n); // Substitui pelo elemento <b> 

b.appendChild(n); // Torna n um filho do elemento <b> 

} 

A Se$ao 15.5.1 apresentou a propriedade outerHTML de um elemento e explicou que ela nao foi 
implementada nas versoes atuais do Firefox. O Exemplo 15-5 mostra como implementar essa 
propriedade no Firefox (e em qualquer outro navegador que suporte innerHTML, tenha um objeto 
Element.prototype extensfvel e tenha metodos para definir getters e setters de propriedade). O 
codigo tambem demonstra um uso pratico para os metodos removeChildf) e cloneNodeQ. 
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Exemplo 15-5 Implementando a propriedade outerHTML usando innerHTML 

// Implementa a propriedade outerHTML para navegadores que nao a suportam. 

// Presume que o navegador suporta innerHTML, tern urn 

// Element.prototype extensivel e permite a definiqao de getters e setters. 

(function() { 

// Se ja temos outerHTML retorna sem fazer nada 
if (document.createElement("div").outerHTML) return; 

// Retorna a HTML externa do elemento referido por this 
function outerHTMLGetter() { 

var container = document.createElement("div"); // 

container.appendChild(this.cloneNode(true)); // 

return container.innerHTML; // 

} 


Elemento ficticio 
Copia this no ficticio 
Retorna conteudo ficticio 


// Configura a HTML externa desse elemento com o valor especificado 
function outerHTMLSetter(value) { 

// Cria urn elemento ficticio e configura seu conteudo com o valor especificado 
var container = document.createElement("div"); 
container.innerHTML = value; 

// Move cada urn dos nos do ficticio para o documento 

while(container.firstChild) // Itera ate que container nao tenha mais filhos 
this.parentNode.insertBefore(container.firstChild, this); 

// E remove o no que foi substituido 
this.parentNode.removeChild(this); 

} 

// Agora usa estas duas funcoes como getters e setters para a 

// propriedade outerHTML de todos os objetos Element. Usa Object.defineProperty da ES5 

// se existe; caso contrario, recorre a _defineGetter_ e Setter_. 

if (Object.defineProperty) { 

Object. defineProperty (Element, prototype, ''outerHTML'', { 
get: outerHTMLGetter, 
set: outerHTMLSetter, 
enumerable: false, configurable: true 

}); 

} 

else { 

Element.prototype._defineGetter_("outerHTML", outerHTMLGetter); 

Element.prototype._defineSetter_("outerHTML", outerHTMLSetter); 

} 

}()); 


15.6.4 Usando DocumentFragments 

DocumentFragment e um tipo especial de Node que serve como conteiner temporario para outros 
nos. Crie um DocumentFragment como segue: 

var frag = document.createDocumentFragmentQ; 

Assim como um no Document, um DocumentFragment e independente e nao faz parte de ne- 
nhum outro documento. Seu parentNode e sempre null. Contudo, assim como um Element, um 
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DocumentFragment pode ter qualquer numero de filhos, os quais podem ser manipulados com 
appendChildQ, insertBeforeQ, etc. 

O detalhe especial sobre DocumentFragment e que permite a um conjunto de nos ser tratado 
como um unico no: se voce passa um DocumentFragment para appendChildQ, insertBeforeQ ou 
replaceChildQ, sao os filhos do fragmento que sao inseridos no documento e nao o proprio frag- 
mento. (Os filhos sao movidos do fragmento para o documento e o fragmento se torna vazio e 
pronto para reutilizapao.) A funpao a seguir usa um DocumentFragment para inverter a ordem dos 
filhos de um no: 

// Inverte a ordem dos filhos do Node n 
function reverse(n) { 

// Cria um DocumentFragment vazio como container temporario 
var f = document.createDocumentFragmentQ; 

// Agora itera para tras atraves dos filhos, movendo cada um para o fragmento. 

// 0 ultimo filho de n se torna o primeiro filho de f e vice-versa. 

// Note que anexar um filho em f o remove automaticamente de n. 
while(n.lastChild) f.appendChild(n.lastChild); 

// Por fim, move os filhos de f, todos de uma vez, de volta para n, tudo de uma so vez. 
n.appendChild(f); 

} 

O Exemplo 15-6 implementa o metodo insertAdjacentHTMLQ (consulte a Sepao 15.5.1) usando a 
propriedade innerHTML e um DocumentFragment. Ele tambem define fun (joes de inserpao HTML 
com nomes logicos, como uma alternativa a confusa API insertAdjacentHTMLQ. A funpao utilitaria 
interna fragment() possivelmente e a parte mais util desse codigo: ela retorna um DocumentFrag¬ 
ment que contem a represen tapao analisada de uma string de texto HTML especificada. 

Exemplo 15-6 Implementando insertAdjacentHTMLO usando innerHTML 

// Este modulo define Element.insertAdjacentHTML para navegadores que nao 
//a suportam e tambem define funcoes portaveis de inserpao de HTML que tern 
// nomes mais logicos do que insertAdjacentHTML: 

// Insert.beforeQ, Insert.afterQ, Insert.atStartQ, Insert.atEndQ 
var Insert = (functionQ { 

// Se os elementos tern uma insertAdjacentHTML nativa, a utiliza em quatro 
// funcoes de inserpao HTML com nomes mais sensatos. 
if (document.createElement("div").insertAdjacentHTML) { 

before: function(e,h) {e.insertAdjacentHTML(''beforebegin",h);}, 
after: function(e,h) {e.insertAdjacentHTML(''afterend''jh);}, 
atStart: function(e,h) {e.insertAdjacentHTML(''afterbegin"jh);}, 
atEnd: function(e,h) {e.insertAdjacentHTML(''beforeend''jh);} 

}; 

} 

// Caso contrario, nao temos nenhuma insertAdjacentHTML nativa. Implementa as mesmas 
// quatro funpoes de inserpao e, entao, as utiliza para definir insertAdjacentHTML. 

// Primeiramente, define um metodo utilitario que recebe uma string HTML e retorna 
// um DocumentFragment contendo a representacao analisada desse HTML. 
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function fragment(html) { 

var elt = document.createElement("div"); // Cria elemento vazio 

var frag = document.createDocumentFragmentQ; // Cria fragmento vazio 

elt.innerHTML = html; // Configura o conteudo do elemento 

while(elt.firstChild) // Move todos os nos 

frag.appendChild(elt.firstChild); // de elt para frag 
return frag; // E retorna o frag 

} 

var Insert = { 

before: function(elt, html) { 

elt.parentNode.insertBefore(fragment(html), elt); 

h 

after: function(elt, html) { 

elt.parentNode.insertBefore(fragment(html), elt.nextSibling); 

}, 

atStart: function(elt, html) { 

elt.insertBefore(fragment(html), elt.firstChild); 

h 

atEnd: function(elt, html) { elt.appendChild(fragment(html)); } 

}; 

// Agora implementa insertAdjacentHTML com base nas fun<;6es anteriores 
Element.prototype.insertAdjacentHTML = function(pos, html) { 
switch(pos.toLowerCaseQ) { 

case "beforebegin”: return Insert.before(this, html); 
case "afterend": return Insert.after(this, html); 
case "afterbegin": return Insert.atStart(this, html); 
case ''beforeend' 1 : return Insert.atEnd(this, html); 

} 

}; 

return Insert; // Finalmentej retorna as quatro funcoes de insercao 

}()); 

15.7 Exemplo: gerando um sumario 

O Exemplo 15-7 mostra como criar um sumario para um documento dinamicamente. Ele de- 
monstra muitos dos conceitos de script de documento descritos nas seqoes anteriores: sele^ao de 
elementos, como percorrer documentos, configura^ao de atributos do elemento, configurafao da 
propriedade innerHTML e cria^ao de novos nos e sua insercao no documento. O exemplo tern muitos 
comentarios e voce nao devera ter problemas para acompanhar o codigo. 

Exemplo 15-7 Um sumario gerado automaticamente 

/** 

* TOC.js: cria um sumario para um documento. 

* Este modulo registra uma funcao anonima que e executada automaticamente 

* quando o documento termina de carregar. Ao ser executada, a funcao primeiramente 

* procura um elemento no documento com a identificacao "TOC". Se esse 

* elemento nao existir, cria um no inicio do documento. 
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* Em seguida, a funcao localiza todas as tags de <hi> a <h6>, as trata 

* como titulos de se^ao e cria urn sumario dentro do elemento TOC. 

* A funcao adiciona numeros de seqao em cada cabefalho de se^ao 

* e encerra os cabecalhos em ancoras nomeadas para que o TOC possa se vincular a 

* elas. As ancoras geradas tern nomes que comecam com "TOC", de modo que 

* voce deve evitar esse prefixo em sua propria HTML. 

* As entradas no TOC gerado podem ser estilizadas com CSS. Todas elas tern 

* uma classe "TOCEntry". As entradas tambem tern uma classe que corresponde ao nivel 

* do cabe<;alho de secao. As tags <hi> geram entradas da classe "TOCLeveli", 

* As tags <h2> geram entradas da classe "T0CLevel2" e assim por diante. Os numeros de se^ao 

* inseridos nos cabecalhos tern a classe "TOCSectNum". 

* Voce poderia usar este modulo com uma folha de estilo, como segue: 

* #T0C { border: solid black lpx; margin: lOpx; padding: lOpx; } 

* .TOCEntry { font-family: sans-serif; } 

* .TOCEntry a { text-decoration: none; } 

* .TOCLeveli { font-size: I6pt; font-weight: bold; } 

* .T0CLevel2 { font-size: 12 pt; margin-left: .5in; } 

* .TOCSectNum:after { content: ": "; } 

* Essa ultima linha gera urn dois-pontos e urn espa$o apos os numeros de secao. Para ocultar 

* os numeros de secao, use isto: 

* .TOCSectNum { display: none } 

* Este modulo exige a funcao utilitaria onLoadQ. 

onLoad(function() { //A funcao anonima define urn escopo local 

// Localiza o elemento container TOC. 

// Se nao existe, cria urn no inicio do documento. 
var toe = document.getElementById("TOC"); 
if (Itoc) { 

toe = document.createElement("div"); 
toe.id = "TOC"; 

document.body.insertBefore(toe, document.body.firstChild); 

} 

// Localiza todos os elementos de cabecalho de secao 
var headings; 

if (document.querySelectorAll) // Podemos fazer isso do modo facil? 

headings = document.querySelectorAll("hljh2,h3jh4jh5,h6"); 
else // Caso contrario, localiza os cabecalhos da maneira dificil 
headings = findHeadings(document.body, []); 

// Percorre o corpo do documento recursivamente, procurando cabeqalhos 
function findHeadings(root, sects) { 

for(var c = root.firstChild; c != null; c = c.nextSibling) { 
if (c.nodeType !== l) continue; 

if (c.tagName.length == 2 && c.tagName.charAt(O) == "H") 
sects.push(c); 

else 

findHeadings(c, sects); 

} 
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return sects; 

} 

// Inicializa um array que monitora numeros de seqao. 
var sectionNumbers = [0,0,0,0,0,0]; 

// Agora itera pelos elementos de cabecalho de seqao que encontramos. 
for(var h = 0; h < headings.length; h++) { 
var heading = headings[h]; 

// Pula o cabeqalho de secao se estiver dentro do container de TOC. 
if (heading.parentNode == toe) continue; 

// Descobre de que nivel e o cabecalho. 

var level = parseInt(heading.tagName.charAt(l)); 

if (isNaN(level) || level < 1 || level > 6) continue; 

// Incrementa o numero de seqao para esse nivel de cabecalho 
// e zera todos os numeros de nivel de cabeqalho inferiores. 
sectionNumbers[level-i]++; 

for(var i = level; i < 6; i++) sectionNumbers[i] = 0; 



// Agora combina os numeros de seqao de todos os niveis de cabecalho 

// para produzir um numero de seqao como 2.3.1. 

var sectionNumber = sectionNumbers.slice(0,level).join(".") 

// Adiciona o numero de seqao no titulo do cabecalho de secao. 

// Colocamos o numero em um <span> para que possa ser estilizado. 

var span = document.createElement("span"); 

span.className = "TOCSectNum"; 

span.innerHTML = sectionNumber; 

heading.insertBefore(span, heading.firstChild); 

// Encerra o cabeqalho em uma ancora nomeada para que possamos nos vincular a ele. 

var anchor = document.createElement("a"); 

anchor.name = "TOC"+sectionNumber; 

heading.parentNode.insertBefore(anchor, heading); 

anchor.appendChild(heading); 

// Agora cria um link para essa seqao. 
var link = document.createElement("a"); 
link.href = "#T0C" + sectionNumber; // Destino do link 

link.innerHTML = heading.innerHTML; // 0 texto do link e o mesmo do cabeqalho 

// Coloca o link em um div que pode ser estilizado de acordo com o nivel. 
var entry = document.createElement("div"); 
entry.className = "TOCEntry TOCLevel" + level; 
entry.appendChild(link); 

// E adiciona o div no container de TOC. 
toe.appendChild(entry); 

} 

}); 
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15.8 Geometria e rolagem de documentos e elementos 

Ate aqui, neste capftulo, consideramos os documentos como arvores abstratas de elementos e nos 
de texto. Mas quando um navegador renderiza um documento dentro de uma janela, ele cria uma 
representaQo visual do documento na qual cada elemento tern uma posi^ao e um tamanho. Fre- 
quentemente, os aplicativos Web podem tratar os documentos como arvores de elementos e nunca 
precisam pensar em como esses elementos sao renderizados na tela. As vezes, no entanto, e necessario 
determinar a geometria precisa de um elemento. Vamos ver no Capftulo 16, por exemplo, que a CSS 
pode ser usada para especificar a posiQo de um elemento. Se voce quer usar CSS para posicionar 
dinamicamente um elemento (como uma dica de tela ou uma cita^ao) ao lado de algum elemento 
normal posicionado pelo navegador, precisa determinar a localizaqao desse elemento. 

Esta se^ao explica como voce pode ir e voltar entre o modelo abstrato baseado em arvore de um 
documento e o modo de exibigao geometrico baseado em coordenadas do documento, conforme 
e apresentado na janela de um navegador. As propriedades e metodos descritos nesta se^ao ja sao 
implementados nos navegadores ha bastante tempo (embora alguns sejam, ate recentemente, espe- 
cfficos do IE e alguns nao sejam implementado pelo IE ate o IE9). Quando este livro estava sendo 
produzido, eles estavam passando pelo processo de padronizaQo do W3C como o CSSOM-View 
Module (consulte http://www.w3.org/TR/cssom-view/). 

15.8.1 Coordenadas de documento e coordenadas de janela de visualizagao 

A posiqao de um elemento e medida em pixels, com a coordenada X aumentando para a direita e a 
coordenada Y aumentando a medida que nos deslocamos para baixo. Contudo, existem dois pontos 
diferentes que podemos usar como origem do sistema de coordenadas: as coordenadas X e Y de 
um elemento podem ser relativas ao canto superior esquerdo do documento ou ao canto superior 
esquerdo Az janela de visualizagao em que o documento e exibido. Em janelas e guias de nfvel supe¬ 
rior, a “janela de visualizagao” e a parte do navegador que realmente exibe conteudo de documento: 
isso exclui a “moldura” do navegador, como menus, barras de ferramentas e guias. Para documentos 
exibidos em quadros, a janela de visualizagao e o elemento <iframe> que define o quadro. Em um ou 
outro caso, quando falamos sobre a posi?ao de um elemento, devemos esclarecer se estamos usando 
coordenadas do documento ou coordenadas da janela de visualizagao. (Note que as coordenadas da 
janela de visualizagao as vezes sao chamadas de coordenadas da janela.) 

Se o documento e menor do que a janela de visualizagao ou se nao foi rolado, seu canto superior 
esquerdo e o canto superior esquerdo da janela de visualizagao e os sistemas de coordenadas do 
documento e da janela de visualizagao sao os mesmos. Em geral, contudo, para converter entre os 
dois sistemas de coordenadas devemos adicionar ou subtrair os deslocamentos de rolagem. Se um 
elemento tern uma coordenada Y de 200 pixels em coordenadas do documento, por exemplo, e se 
o usuario rolou o navegador para baixo por 75 pixels, entao esse elemento tern uma coordenada 
Y de 125 pixels em coordenadas da janela de visualizagao. Da mesma forma, se um elemento tern 
uma coordenada X de 400 em coordenadas da janela de visualizagao e o usuario rolou a janela de 
visualizagao por 200 pixels horizontalmente, a coordenada X do elemento em coordenadas do 
documento e 600. 

As coordenadas do documento sao mais fundamentals do que as coordenadas da janela de visua- 
lizafao e nao mudam quando o usuario rola. Contudo, e muito comum utilizar coordenadas da 
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janela de visualizagao em programagao no lado do cliente. Usamos coordenadas do documento 
quando especificamos a posigao de um elemento usando CSS (consulte o Capftulo 16). Porem, o 
modo mais simples de consultar a posigao de um elemento (consulte a Segao 15.8.2) retorna a po¬ 
sigao em coordenadas da janela de visualizagao. Da mesma forma, quando registramos fungoes de 
tratamento para eventos de mouse, as coordenadas do cursor do mouse se referem as coordenadas 
da janela de visualizagao. 

Para converter entre os sistemas de coordenadas, precisamos determinar as posigoes da barra de 
rolagem da janela do navegador. As propriedades pageXOffset e pageYOffset do objeto Window 
fornecem esses valores em todos os navegadores, exceto o IE versoes 8 e anteriores. O IE (e todos os 
navegadores modernos) tambem torna as posigoes da barra de rolagem disponfveis por meio das pro¬ 
priedades scrollLeft e scrollTop. O que causa confusao e que voce normalmente consulta essas pro¬ 
priedades no elemento-raiz do documento (document.documentElement), mas no modo Quirks (con- 
sulte a Segao 13.4.4) elas devem ser consultadas no elemento <body> (document.body) do documento. 
O Exemplo 15-8 mostra como consultar as posigoes da barra de rolagem de maneira portavel. 

Exemplo 15-8 Consultando as posigoes da barra de rolagem de uma janela 

// Retorna os deslocamentos atuais da barra de rolagem como propriedades x e y de um 
// objeto 

function getScrollOffsets(w) { 

// Usa a janela especificada ou a janela atual, se nao houver argumento 
w = w || window; 

// Isso funciona para todos os navegadores, exceto o IE versoes 8 e anteriores 
if (w.pageXOffset != null) return (x: w.pageXOffset, y:w.pageYOffset}; 

// Para o IE (ou qualquer navegador) no modo Standards 
var d = w.document; 

if (document.compatMode == "CSSlCompat") 

return (x:d.documentElement.scrollLeft, y:d.documentElement.scrollTop}; 

// Para navegadores no modo Quirks 

return { x: d.body.scrollLeft, y: d.body.scrollTop }; 

} 

As vezes e util determinar o tamanho da janela de visualizagao - para saber quais partes do docu¬ 
mento estao atualmente visfveis, por exemplo. Assim como no caso dos deslocamentos de rolagem, 
o modo facil de consultar o tamanho da janela de visualizagao nao funciona no IE8 e anteriores, 
sendo que a tecnica que funciona no IE depende de o navegador estar no modo Quirks ou no modo 
Standards. O Exemplo 15-9 mostra como consultar o tamanho da janela de visualizagao de modo 
portavel. Observe como o codigo e semelhante ao Exemplo 15-8. 

Exemplo 15-9 Consultando o tamanho da janela de visualizagao em uma janela do navegador 

// Retorna o tamanho da janela de visualizagao como propriedades w e h de um objeto 
function getViewportSize(w) { 

// Usa a janela do navegador especificada ou a janela atual, se nao houver argumento 
w = w || window; 

// Isso funciona para todos os navegadores, exceto o IE8 e anteriores 
if (w.innerWidth != null) return (w: w.innerWidth, h:w.innerHeight}; 
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// Para o IE (ou qualquer navegador) no modo Standards 
var d = w.document; 

if (document.compatMode == "CSSlCompat") 

return { w: d.documentElement.clientWidth, 

h: d.documentElement.clientHeight }; 

// Para navegadores no modo Quirks 
return { w: d.body.clientWidth, h: d.body.clientWidth }; 

} 

Os dois exemplos anteriores utilizaram as propriedades scrollLeft, scrollTop, clientWidth e 
clientHeight. Vamos encontrar essas propriedades novamente na Seqao 15.8.5. 

15.8.2 Consultando a geometria de um elemento 

A maneira mais facil de determinar o tamanho e a posi^ao de um elemento e chamando seu me- 
todo getBoundingClientRect(). Esse metodo foi introduzido no IE5 e agora e implementado por 
todos os navegadores atuais. Ele nao espera argumento algum e retorna um objeto com proprieda¬ 
des left, right, top e bottom. As propriedades left e top fornecem as coordenadas X e Y do canto 
superior esquerdo do elemento e as propriedades right e bottom fornecem as coordenadas do canto 
inferior direito. 

Esse metodo retorna as posiqoes do elemento em coordenadas da janela de visualizaqao. (A palavra 
“Client” no nome do metodo getBoundingClientRectQ e uma referenda indireta ao cliente navega¬ 
dor Web - especificamente a janela do navegador e a janela de visualizaqao que define.) Para con¬ 
verter em coordenadas do documento que continuam validas mesmo que o usuario role a janela do 
navegador, adicione os deslocamentos de rolagem: 

var box = e.getBoundingClientRectQ; // Obtem a posiqao da janela de visualizacao em 
// coordenadas 

var offsets = getScrollOffsetsQ; // Funqao utilitaria definida acima 

var x = box.left + offsets.x; // Converte em coordenadas do documento 

var y = box.top + offsets.y; 

Em muitos navegadores (e no padrao W3C), o objeto retornado por getBoundingClientRectQ tam- 
bem tern propriedades width e height, mas a implementa^ao original do IE nao faz isso. Por portabi- 
lidade, voce pode calcular a largura e a altura do elemento como segue: 

var box = e.getBoundingClientRectQ; 

var w = box.width || (box.right - box.left); 

var h = box.height || (box.bottom - box.top); 

No Capitulo 16, voce vai aprender que o conteudo de um elemento e circundado por uma area 
em branco opcional, conhecida como preenchimento. O preenchimento e circundado por uma 
borda opcional e a borda e circundada por margens opcionais. As coordenadas retornadas por 
getBoundingClientRectQ incluem a borda e o preenchimento do elemento, mas nao suas margens. 

Se a palavra “Client” no metodo getBoundingClientRectQ especifica o sistema de coordenadas do re- 
tangulo retornado, o que explica a palavra “Bounding” (contorno) no nome do metodo? Elementos 
de bloco, como imagens, paragrafos e elementos <div>, quando expostos pelo navegador sao sempre 
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retangulares. No entanto, os elementos em linha, como <span>, <code> e <b>, podem abranger varias 
linhas e, portanto, consistir em varios retangulos. Imagine, por exemplo, um texto em italico (mar- 
cado com tags <i> e </i>) dividido em duas linhas. Seus retangulos consistem na parte do lado direi- 
to da primeira linha e na parte do lado esquerdo da segunda (supondo um texto da esquerda para a 
direita). Se voce chama getBoundingClientRect( ) em um elemento em linha, ele retorna o “retangulo 
de contorno” dos retangulos individuals. Para o elemento <i> descrito anteriormente, o retangulo de 
contorno incluiria a largura inteira das duas linhas. 

Se quiser consultar os retangulos individuals de elementos em linha, chame o metodo 
getClientRects () para obter um objeto semelhante a um array somente para leitura, cujos elementos 
sao objetos retangulo como aqueles retornados por getBoundingClientRect(). 

Vimos que metodos DOM como getElementsByTagName() retornam resultados “dinamicos” que sao 
atualizados quando o documento muda. Os objetos retangulo (e as listas de objeto retangulo) retor¬ 
nados por getBoundingClientRectQ e getClientRects () nao sao dinamicos. Sao instantaneos estaticos 
do estado visual do documento de quando os metodos sao chamados. Eles nao sao atualizados quan¬ 
do o usuario rola ou redimensiona a janela do navegador. 

15.8.3 Determinando o elemento em um ponto 

O metodo getBoundingClientRectQ nos permite determinar a posi^ao atual de um elemento em 
uma janela de visualizacjao. As vezes, queremos ir na outra direfao e determinar qual elemento 
existe em determinada posifao na janela de visualizafao. Isso pode ser determinado com o me¬ 
todo elementFromPointQ do objeto Document. Passe as coordenadas X e Y (usando coordenadas 
da janela de visualiza?ao e nao coordenadas do documento) e esse metodo vai retornar o objeto 
Element que esta na posifao especificada. Quando este livro estava sendo escrito, o algoritmo 
para selecionar o elemento nao estava especificado, mas o objetivo desse metodo e retornar o 
elemento mais interno e mais externo (consulte o atributo CSS z-index na Se$ao 16.2.1.1) nesse 
ponto. Se voce especificar um ponto fora da janela de visualizaQo, elementFromPointQ vai retor¬ 
nar null, mesmo que esse ponto seja perfeitamente valido quando convertido em coordenadas 
do documento. 

elementFromPointQ parece ser um metodo muito util e o caso de uso obvio e a passagem das coorde¬ 
nadas do cursor do mouse para determinar sobre qual elemento o mouse esta. Contudo, conforme 
vamos aprender no Capftulo 17, os objetos “evento de mouse” ja contem essa informa?ao em sua 
propriedade target. Na pratica, portanto, elementFromPointQ nao e comumente usado. 

15.8.4 Rolagem 

O Exemplo 15-8 mostrou como consultar as posifoes da barra de rolagem para uma janela do nave¬ 
gador. As propriedades scrollLeft e scrollTop utilizadas nesse exemplo podem ser configuradas para 
fazer o navegador rolar, mas ha um modo mais facil que e suportado desde os primordios de Java¬ 
Script. O metodo scrollToQ do objeto Window (e seu sinonimo scrollQ) recebe as coordenadas 
X e Y de um ponto (em coordenadas do documento) e as configura como deslocamentos da barra 
de rolagem. Isto e, rola a janela do navegador de modo que o ponto especificado esteja no canto 
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superior esquerdo da janela de visualizacao. Se voce especificar um ponto proximo demais da parte 
inferior ou da margem direita do documento, o navegador vai move-lo para o mais perto possivel do 
canto superior esquerdo, mas nao vai conseguir leva-lo ate o fim. O codigo a seguir rola o navegador 
de modo que a pagina inferior do documento fique visivel: 

// Obtem a altura do documento e da janela de visualizacao. offsetHeight esta explicado a 
// seguir. 

var documentHeight = document.documentElement.offsetHeight; 

var viewportHeight = window.innerHeight; // Ou usa getViewportSizeQ anterior 

II E rola de modo que a ultima "pagina" apareqa na janela de visualizacao 
window.scrollTo(0, documentHeight - viewportHeight); 

O metodo scrollBy() do objeto Window e semelhante a scrollQ e a scrollTo(), mas seus argu- 
mentos sao relativos e adicionados aos deslocamentos da barra de rolagem atuais. Leitores rapidos 
poderiam gostar de um bookmarklet (Se^ao 13.2.5.1) como este, por exemplo: 

// Rola 10 pixels para baixo a cada 200 ms. Note que nao ha maneira alguma de desativar 
javascript:void setInterval(function() {scrollBy(0,10)}, 200); 

Frequentemente, em vez de rolar para uma posicao numerica no documento, queremos apenas rolar 
de modo que determinado elemento do documento fique visivel. Voce poderia calcular a posicao 
do elemento com getBoundingClientRect(), converter essa posicao em coordenadas do documento 
e, entao, usar o metodo scrollToQ, mas e mais facil apenas chamar o metodo scrollIntoViewQ no 
elemento HTML desejado. Esse metodo garante que o elemento em que e chamado esteja visivel 
na janela de visualizacao. Por padrao, ele tenta colocar a margem superior do elemento na parte 
superior da janela de visualizacao ou proximo a ela. Se voce passar false como o unico argumento, 
ele vai tentar colocar a margem inferior do elemento na parte inferior da porta de visualizacao. O 
navegador tambem vai rolar a janela de visualizacao horizontalmente, conforme o necessario, para 
tornar o elemento visivel. 

O comportamento de scrollIntoViewQ e semelhante ao que o navegador faz quando window.loca¬ 
tion.hash e configurado com o nome de uma ancora nomeada (um elemento <a name="">). 

15.8.5 Mais informagoes sobre tamanho, posicao e overflow de elemento 

O metodo getBoundingClientRectQ e definido em todos os navegadores atuais, mas se voce precisa 
dar suporte a uma geracao mais antiga de navegadores, nao pode contar com esse metodo e deve 
usar tecnicas mais antigas para determinar o tamanho e a posicao do elemento. O tamanho do ele¬ 
mento e facil: as propriedades somente para leitura offsetWidth e offsetHeight de qualquer elemento 
HTML retornam seu tamanho na tela, em pixels CSS. Os tamanhos retornados incluem a borda e o 
preenchimento do elemento, mas nao as margens. 

Todos os elementos HTML tern propriedades offsetLeft e offsetTop que retornam as coordenadas 
X e Y do elemento. Para muitos elementos, esses valores sao coordenadas do documento e especifi- 
cam a posicao do elemento diretamente. Mas para descendentes de elementos posicionados e para 
alguns outros elementos, como celulas de tabela, essas propriedades retornam coordenadas relativas 
a um elemento ascendente, em vez do documento. A propriedade offsetParent especifica a qual 
elemento as propriedades sao relativas. Se offsetParent e nula, as propriedades sao coordenadas do 
documento. Em geral, portanto, calcular a posicao de um elemento e usando offsetLeft e offsetTop 
exige um laco: 
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function getElementPosition(e) { 
var x = 0, y = 0; 
while(e != null) { 
x += e.offsetLeft; 
y += e.offsetTop; 
e = e.offsetParent; 

} 

return {x:x, y:y}; 

} 

Iterando pelo encadeamento de offsetParent e acumulando deslocamentos, essa fun^ao calcula as 
coordenadas do documento do elemento especificado. (Lembre-se de que getBoundingClientRect() 
retorna, em vez disso, coordenadas da janela de visualiza^ao.) Contudo, essa nao e a palavra final so- 
bre posicionamento de elementos - essa fiinfao getElementPosition() nem sempre calcula os valores 
corretos. Vamos ver a seguir como corrigimos isso. 


Alem da configura^ao de propriedades offset, todos os elementos do documento definem dois 


outros conjuntos de propriedades, i 

am dos quais cujos nomes come^am com client e outro cujos 

nomes come^am co 

m scroll. Isto e. 

todo elemento HTML tern todas as seguintes propriedades: 

offsetWidth 

clientWidth 

scrollWidth 

offsetHeight 

clientHeight 

scrollHeight 

offsetLeft 

clientLeft 

scrollLeft 

offsetTop 

offsetParent 

clientTop 

scrollTop 


Para entender essas propriedades client e scroll, voce precisa saber que o conteudo de um elemento 
HTML pode ser maior do que a caixa de conteudo alocada para conte-lo e que, portanto, os elemen¬ 
tos individuals podem ter barras de rolagem (consulte o atributo CSS overflow na Se^ao 16.2.6). 
A area de conteudo e uma janela de visualiza^ao, assim como a janela do navegador, e quando o 
conteudo e maior do que a janela de visualiza^ao, precisamos levar em conta a posiqao da barra de 
rolagem do elemento. 

clientWidth e clientHeight sao como off setWidth e offsetHeight, exceto que nao incluem o tamanho 
da borda, mas apenas a area de conteudo e seu preenchimento. Alem disso, se o navegador adicionou 
barras de rolagem entre o preenchimento e a borda, clientWidth e clientHeight nao incluem a barra 
de rolagem em seus valores retornados. Note que clientWidth e clientHeight sempre retornam 0 
para elementos em linha, como <i>, <code> e <span>. 

clientWidth e clientHeight foram usadas no metodo getViewportSizeQ do Exemplo 15-9. Como 
um caso especial, quando essas propriedades sao consultadas no elemento-raiz de um documento 
(ou no elemento corpo no modo Quirks), elas retornam os mesmos valores que as propriedades 
innerWidth e innerHeight dajanela. 

As propriedades clientLeft e clientTop nao sao muito uteis: elas retornam a distancia horizontal 
e vertical entre a parte externa do preenchimento de um elemento e a parte externa de sua borda. 
Normalmente, esses valores sao apenas a largura das bordas esquerda e superior. No entanto, se um 
elemento tern barras de rolagem e se o navegador as coloca na borda esquerda ou superior (o que 
seria incomum), clientLeft e clientTop tambem incluem a largura da barra de rolagem. Para ele¬ 
mentos em linha, clientLeft e clientTop sao sempre 0. 

scrollWidth e scrollHeight correspondam ao tamanho da area de conteudo de um elemento, mais 
seu preenchimento, mais qualquer conteudo que exceda o tamanho da area de conteudo. Quando o 
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conteudo cabe dentro da area de conteudo sem transbordar {overflow), essas propriedades sao iguais 
a clientWidth e clientHeight. Mas quando ha overflow, elas incluem o conteudo em questao e valores 
de retorno maiores do que clientWidth e clientHeight. 

Por fim, scrollLeft e scrollTop fornecem as posi^oes da barra de rolagem de um elemento. As con- 
sultamos no elemento-raiz do documento no metodo getScrollOffsets( ) (Exemplo 15-8), mas elas 
tambem sao definidas em qualquer elemento. Note que scrollLeft e scrollTop sao propriedades 
gravaveis e e possivel configura-las para rolar o conteudo dentro de um elemento. (Os elementos 
HTML nao tern um metodo scrollToQ como o objeto Window.) 

Quando um documento contem elementos que podem ser rolados e possuam conteudo excedente, 
o metodo getElementPositionQ definido anteriormente nao funciona corretamente, pois nao leva 
em conta a posiQo da barra de rolagem. Aqui esta uma versao modificada que subtrai posiqoes da 
barra de rolagem dos deslocamentos acumulados e, ao fazer isso, converte a posiijao retornada de 
coordenadas do documento para coordenadas da janela de visualizaQo: 

function getElementPos(elt) { 
var x = 0, y = 0; 

II Laco para somar deslocamentos 
for(var e = elt; e != null; e = e.offsetParent) { 
x += e.offsetLeft; 
y += e.offsetTop; 

} 

// Itera novamente, por todos os elementos ascendentes para subtrair deslocamentos de 
// rolagem. 

// Isso subtrai tambem as barras de rolagem principais e converte para coords da 
// janela de visualizacao. 

for(var e=elt.parentNode; e != null && e.nodeType == l; e=e.parentNode) { 
x -= e.scrollLeft; 
y -= e.scrollTop; 

} 

return {x:x, y:y}; 

} 

Nos navegadores modernos esse metodo getElementPosQ retorna os mesmos valores de posiQo 
que getBoundingClientRectQ (mas e muito menos eficiente). Teoricamente, uma fun^ao como 
getElementPosQ poderia ser usada nos navegadores que nao suportam getBoundingClientRectQ. Na 
pratica, contudo, os navegadores que nao suportam getBoundingClientRectQ tern muitas incom- 
patibilidades de posicionamento de elementos e uma funijao simples como essa nao vai funcionar 
de modo confiavel. Bibliotecas praticas do lado do cliente, como a j Query, contem fun (joes para 
calcular a posiQo do elemento que melhoram esse algoritmo basico de calculo de posiQo com varias 
correijoes de erro especificas do navegador. Se precisar calcular a posiQo de um elemento e que seu 
codigo funcione em navegadores que nao suportam getBoundingClientRectQ, voce provavelmente 
deve usar uma biblioteca como a j Query. 

15.9 Formularios HTML 

O elemento HTML <form> e os varios elementos de entrada de formulario, como <input>, <select> 
e <button>, tern um lugar importante na programaQo no lado do cliente. Esses elementos HTML 
remontam aos primordios da Web e sao anteriores a propria JavaScript. Os formularios HTML sao 
o mecanismo existente por tras da primeira gera<jao de aplicativos Web, os quais nem mesmo exi- 
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giam JavaScript. A entrada do usuario e obtida em elementos de formulario; o envio do formulario 
remete essa entrada para o servidor; o servidor processa a entrada e gera uma nova pagina HTML 
(normalmente com novos elementos de formulario) para exibigao pelo cliente. 

Os elementos de formulario HTML ainda sao uma excelente maneira de obter entrada do usuario, 
mesmo quando os dados do formulario sao inteiramente processados por JavaScript do lado do clien¬ 
te e nunca sao enviados para o servidor. Com programas do lado do servidor, um formulario nao tern 
utilidade, a nao ser que possua um botao Submit (Enviar). Na programagao no lado do cliente, por 
outro lado, um botao Submit nunca e necessario (embora ainda possa ser util). Os programas do lado 
do servidor sao baseados em envios de formulario - eles processam dados em trechos do tamanho 
do formulario - e isso limita sua interatividade. Os programas do lado do cliente sao baseados em 
eventos - eles podem responder a eventos em elementos individuals do formulario - e isso os permite 
ser muito mais responsivos. Um programa do lado do cliente poderia validar a entrada do usuario en- 
quanto ele a digita, por exemplo. Ou entao, poderia responder a um clique em uma caixa de selegao, 
habilitando um conjunto de opgoes que so tern significado quando essa caixa e marcada. 

As subsegoes a seguir explicam como fazer esse tipo de coisas com formularios HTML. Os formu¬ 
larios sao compostos de elementos HTML, assim como qualquer outra parte de um documento 
HTML, e voce pode manipula-los com as tecnicas de DOM ja explicadas neste capftulo. Mas os 
elementos de formulario foram os primeiros a aceitarem scripts, nos primordios da programagao no 
lado do cliente, e tambem suportam algumas APIs que antecedem o DOM. 

Note que esta segao fala sobre script de formularios HTML e nao sobre HTML em si. Ela presume 
que voce ja conhece um pouco sobre os elementos HTML (<input>, <textarea>, <select>, etc.) 
utilizados para definir esses formularios. Contudo, a Tabela 15-1 e uma referenda rapida para os 
elementos de formulario mais comumente usados. Voce pode ler mais sobre as APIs de formulario e 
de elemento de formulario na Parte IV, sob as entradas Form, Input, Option, Select e TextArea. 


Tabela 15-1 Elementos de formulario HTML 


Elemento HTML 

Propriedade 
de tipo 

Rotina de tratamento 
de evento 

Descrigao e eventos 

<inputtype="button”> ou 
<button type="button"> 

"button" 

onchck 

Um botao de pressao 

<inputtype="checkbox"> 

"checkbox" 

onchange 

Um botao de alternancia sem comportamento de 
botao de opgao 

<inputtype="file”> 

"file" 

onchange 

Um campo de entrada para inserir o nome de um 
arquivo para carregar no servidor Web; a propriedade 
value esomente para leitura 

<inputtype="hidden"> 

"hidden" 

none 

Dados enviados com o formulario, mas invisiveis para 

<option> 

none 

none 

Um unico item dentro de um objeto Select; as rotinas 
de tratamento de evento estao no objeto Select e nao 
nos objetos Option individuals 

<inputtype="password"> 

"password" 

onchange 

Um campo de entrada para senha - os caracteres 
digitados nao sao visfveis 


(Continua) 
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Tabela15-1 Elementos de formulario HTML (Continuatfo) 


Elemento HTML 

Propriedade 

detipo 

Rotina de tratamento 

de evento 

Descrigao e eventos 

<inputtype="radio"> 

"radio" 

onchange 

Um botao de alternancia com comportamento de 
botao de opgao - apenas um selecionado por vez 

<inputtype="reset"> ou 
<button type="reset"> 

"reset" 

ondick 

Um botao de pressao que reinicia um formulario 

<select> 

"select-one" 

onchange 

Uma lista ou menu suspenso no qual um item pode 
ser selecionado (consulte tambem <option>) 

<select multiple> 

"select-multiple" 

onchange 

Uma lista na qual varios itens podem ser 
selecionados (consulte tambem <option>) 

<inputtype="submit"> ou 
<button type="submit"> 

"submit" 

ondick 

Um botao de pressao que envia um formulario 

<inputtype="text”> 

"text" 

onchange 

Um campo de entrada de texto de uma linha; o 
elemento padrao <input> do atributo type e 
omitido ou nao reconhecido 

<textarea> 

"textarea" 

onchange 

Um campo de entrada de texto de varias linhas 


15.9.1 Selecionando formularios e elementos de formulario 

Os formularios e os elementos que eles content podem ser selecionados em um documento usando- 
-se metodos padrao, como getElementById() e getElementsByTagName(): 

var fields = document.getElementById("address").getElementsByTagName("input"); 

Nos navegadores que suportam querySelectorAllQ, voce poderia selecionar todos os botoes de op- 
gao ou todos os elementos com o mesmo nome de um formulario com codigo como o seguinte: 

// Todos os botoes de opqao do formulario com identificacao "shipping" 
document.querySelectorAll('#shipping input[type="radio"]'); 

// Todos os botoes de opqao com o nome "method" no formulario, com identificaqao 
// "shipping" 

document.querySelectorAll('#shipping input[type="radio"][name="method"]'); 

Contudo, conforme descrito nas Segoes 14.7, 15.2.2 e 15.2.3, um elemento <form> com atributo 
name ou id pode ser selecionado de varias outras maneiras. Um <form> com atributo name="address" 
pode ser selecionado de qualquer uma destas maneiras: 

window.address // Fragil: nao use 

document.address // So funciona para formularios com atributo name 

document.forms.address // Acesso explicito a um formulario com nome ou identificagao 

document.formsfn] // Fragil: n e a posigao numerica do formulario 

A Segao 15.2.3 explicou que document.forms e um objeto HTMLCollection que permite selecionar 
elementos de formulario por ordem numerica, por id ou por name. Os proprios objetos de formula¬ 
rio atuam como HTMLCollections de elementos de formulario e podem ser indexados pelo nome 
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ou numero. Se um formulario de nome “address” tem um primeiro elemento de nome “street”, voce 
pode se referir a esse elemento de formulario usando qualquer uma destas expressoes: 
document. forms. address [o] 
document.forms.address.street 

document.address.street // somente para name="address" e nao id="address" 

Se quiser ser explicito a respeito da seleqao de um elemento de formulario, voce pode indexar a pro- 
priedade elements do objeto formulario: 

document.forms.address.elements[0] 
document.forms.address.elements.street 

O atributo id e a maneira geralmente preferida para nomear elementos especificos do documento. 
Entretanto, o atributo name tem um proposito especial para envio de formularios HTML e e muito 
mais usado com formularios do que com outros elementos. E comum para grupos de caixas de sele- 
9ao relacionadas e obrigatorio para grupos de caixas de sele^ao mutuamente exclusivos compartilhar 
um valor do atributo name. Lembre-se de que, quando voce indexa um HTMLCollection com um 
nome e mais de um elemento compartilha esse nome, o valor retornado e um objeto semelhante a 
um array que contem todos os elementos coincidentes. Considere o seguinte formulario que contem 
bo toes de op^ao para selecionar um metodo de despacho (shipping): 

<form name="shipping"> 

<fieldsetxlegend>Shipping Method</legend> 

clabelxinput type="radio" name="method" value="ist">First-class</label> 
clabelxinput type="radio" name="method" value="2day">2-day Air</label> 
clabelxinput type="radio" name="method" value="overnite">Overnight</label> 
</fieldset> 

</form> 

Com esse formulario, voce poderia se referir ao array de elementos botao de op^ao como segue: 
var methods = document.forms.shipping.elements.method; 

Note que os elementos <form> tem um atributo HTML e uma propriedade JavaScript correspon- 
dente chamada “method”; portanto, nesse caso, devemos usar a propriedade elements do formulario, 
em vez de acessar a propriedade method diretamente. Para determinar qual metodo de despacho o 
usuario selecionou, iteramos pelos elementos do formulario no array e verificamos a propriedade 
checked de cada um: 

var shipping_method; 

for(var i = 0; i < methods.length; i++) 

if (methodsji].checked) shippingjnethod = methodsji].value; 

Vamos ver mais sobre as propriedades de elementos de formulario, como checked e value, na proxi- 
ma se<jao. 


15.9.2 Propriedades de formulario e elemento 

O array elements [] descrito anteriormente e a propriedade mais interessante de um objeto Form. 
As propriedades restantes do objeto Form tem menos importancia. As propriedades action, enco¬ 
ding, method e target correspondem diretamente aos atributos action, encoding, method e target do 
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elemento <form>. Todas essas propriedades e atributos sao utilizados para controlar como os dados 
do formulario sao enviados para o servidor Web e onde os resultados sao exibidos. JavaScript do lado 
do cliente pode configurar o valor dessas propriedades, mas elas so sao uteis quando o formulario e 
realmente enviado para um programa do lado do servidor. 

Antes de JavaScript, um formulario era enviado com um botao de proposito especial Submit e os 
elementos de formulario tinham seus valores redefinidos com um botao de proposito especial Reset. 

O objeto Form de JavaScript suporta dois metodos, submitQ e resetQ, que tern o mesmo objetivo. 
Chamar o metodo submit() de um objeto Form envia o formulario e chamar reset() redefine os 
elementos do formulario. 

Todos (ou a maioria) os elementos de formulario tern as seguintes propriedades em comum. Alguns 
elementos tern outras propriedades de proposito especial que sao descritas posteriormente, quando 
varios tipos de elementos de formulario sao considerados individualmente: 

type 

Uma string somente para leitura que identifica o tipo do elemento de formulario. Para ele¬ 
mentos de formulario definidos por uma tag <input>, esse e simplesmente o valor do atributo 
type. Outros elementos de formulario (como <textarea> e <select>) definem uma proprie- 
dade type, de modo que podem ser facilmente identificados pelo mesmo teste que diferencia 
elementos <input>. A segunda coluna daTabela 15-1 lista o valor dessa propriedade para cada 
elemento de formulario. 


Uma referenda somente para leitura ao objeto Form no qual o elemento esta contido, ou null, 
se o elemento nao esta contido em um elemento <form>. 


name 

Uma string somente para leitura especificada pelo atributo HTML name, 
value 

Uma string de leitura/grava^ao que especifica o “valor” contido ou representado pelo elemento 
de formulario. Essa e a string remetida para o servidor Web quando o formulario e enviado 
e as vezes so tern interesse para programas JavaScript. Para elementos Text e Textarea, essa 
propriedade contem o texto digitado pelo usuario. Para elementos botao criados com uma 
tag <input> (mas nao aqueles criados com uma tag <button>), essa propriedade especifica o 
texto exibido dentro do botao. Contudo, para elementos “botao de afao” e “caixa de sele^ao”, 
a propriedade value nao e editada nem exibida para o usuario. E simplesmente uma string 
configurada pelo atributo HTML value. Ela se destina a ser usada para envio do formulario, 
mas tambem pode ser uma maneira util de associar dados extras a um elemento do formulario. 
Ainda neste capitulo, a propriedade value tambem e discutida nas se^oes sobre as diferentes 
categorias de elementos de formulario. 


15.9.3 Rotinas de tratamento de evento de formulario e elemento 

Cada elemento Form tern uma rotina de tratamento de evento onsubmit para detectar o envio de 
formulario e uma rotina de tratamento de evento onreset para detectar redefinifoes de formulario. 
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A rotina de tratamento onsubmit e chamada imediatamente antes que o formulario seja enviado; ela 
pode cancelar o envio retornando false. Isso oferece uma oportunidade para um programa Java¬ 
Script verificar se existem erros na entrada do usuario, a fim de evitar o envio de dados incompletos 
ou invalidos pela rede, para um programa do lado do servidor. Note que a rotina de tratamento on¬ 
submit e ativada somente por um clique genuino em um botao Submit. Chamar o metodo submitQ 
de um formulario nao ativa a rotina de tratamento onsubmit. 

A rotina de tratamento de evento onreset e semelhante a rotina de tratamento onsubmit. Ela e cha¬ 
mada imediatamente antes que o formulario seja redefinido e, retornando false, pode impedir que 
os elementos do formulario sejam redefinidos. Botoes Reset raramente sao necessarios em formula- 
rios, mas se houver um, talvez voce queira fazer o usuario confirmar a redefinRao: 

onreset="return confirm('Really erase ALL input and start over?')"> 

cbutton type="reset">Clear and Start Over</button> 

</form> 

Assim como a rotina de tratamento onsubmit, onreset e ativada somente por um botao Reset genuf- 
no. Chamar o metodo reset () de um formulario nao ativa onreset. 

Os elementos de formulario normalmente disparam um evento click ou change quando o usuario 
interage com eles, sendo que voce pode tratar desses eventos definindo uma rotina de tratamento 
de evento onclick ou onchange. A terceira coluna daTabela 15-1 especifica a principal rotina de tra¬ 
tamento de evento de cada elemento de formulario. Em geral, os elementos de formulario que sao 
botoes disparam um evento click quando ativados (mesmo quando essa ativaqao acontece por meio 
do teclado, em vez de um clique de mouse). Outros elementos de formulario disparam um evento 
change quando o usuario muda o valor representado pelo elemento. Isso acontece quando o usuario 
insere texto em um campo de texto ou seleciona uma op^ao em uma lista suspensa. Note que esse 
evento nao e disparado sempre que o usuario digita uma tecla em um campo de texto. Ele so e dis- 
parado quando o usuario altera o valor de um elemento e entao move o foco de entrada para algum 
outro elemento do formulario. Isto e, a chamada dessa rotina de tratamento de evento indica uma 
altera?ao concluida. Os botoes de a$ao e as caixas de seleqao sao botoes que tern estado e disparam 
eventos click e change; o evento change e o mais util dos dois. 

Os elementos de formulario tambem disparam um evento focus quando recebem o foco do teclado 
e um evento blur quando o perdem. 

Algo importante a saber a respeito das rotinas de tratamento de evento e que, dentro do codigo de 
uma delas, a palavra-chave this se refere ao elemento do documento que disparou o evento (vamos 
falar sobre isso novamente no Capftulo 17). Como os elementos dentro de um elemento <form> 
tern uma propriedade form que se refere ao formulario container, as rotinas de tratamento de evento 
desses elementos sempre podem se referir ao objeto Form como this.form. Indo um passo adiante, 
isso significa que uma rotina de tratamento de evento de um elemento de formulario pode se referir 
a um elemento de formulario irmao chamado x como this.form.x. 

15.9.4 Botoes de pressao 

Os botoes sao um dos elementos de formulario mais comumente usados, pois fornecem uma ma- 
neira visual clara de permitir que o usuario dispare alguma afao com script. Um elemento botao 
nao tern um comportamento padrao proprio e nao tern utilidade a nao ser que possua uma rotina 
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de tratamento de evento onclick. Os botoes deflnidos como elementos <input> exibem o texto puro 
do atributo value. Os botoes deflnidos como elementos <button> exibem o conteudo do elemento. 

Note que os hiperlinks fornecem a mesma rotina de tratamento de evento onclick dos botoes. Use 
um link quando a a<jao a ser disparada pela rotina de tratamento onclick puder ser conceitualizada 
como “seguir um link”; caso contrario, use um botao. 

Os elementos de envio e redefinifao sao exatamente como os elementos botao, mas tern a$oes pa- 
drao (enviar e redefinir um formulario) associadas. Se a rotina de tratamento de evento onclick 
retorna false, a a?ao padrao desses botoes nao e executada. A rotina de tratamento onclick de um 
elemento de envio pode ser usada para realizar valida?ao de formulario, mas e mais comum fazer isso 
com a rotina de tratamento onsubmit do proprio objeto Form. 

A Parte IV nao contem uma entrada Button. Consulte Input para ver os detalhes sobre todos os bo¬ 
toes de pressao do elemento formulario, incluindo aqueles criados com o elemento <button>. 


15.9.5 Botoes de alternancia 

Os elementos “botao de a^ao” e “caixa de sele^ao” sao “botoes de alternancia”, ou botoes que tern 
dois estados visualmente distintos: eles podem estar marcados ou desmarcados. O usuario pode mu- 
dar o estado de um botao de alternancia clicando nele. Os elementos botao de a^ao sao projetados 
para serem usados em grupos de elementos relacionados, todos os quais com o mesmo valor para o 
atributo HTML name. Os elementos botao de a^ao criados dessa maneira sao mutuamente exclu- 
sivos: quando um e marcado, o que estava marcado anteriormente se torna desmarcado. As caixas 
de seleqao tambem sao frequentemente utilizadas em grupos que compartilham um atributo name e, 
quando voce seleciona esses elementos usando o nome como uma propriedade do formulario, deve 
lembrar que obtem um objeto semelhante a um array, em vez de um unico elemento. 

Os elementos botao de a^ao e caixa de sele^ao definem ambos uma propriedade checked. Esse valor 
booleano de leitura/grava^ao especifica se o elemento esta atualmente marcado. A propriedade de- 
faultChecked e um booleano que tern o valor do atributo HTML checked; ela especifica se o elemen¬ 
to esta marcado quando a pagina e carregada pela primeira vez. 

Os elementos botao de a^ao e caixa de sele^ao nao exibem texto e normalmente sao mostrados com 
texto HTML adjacente (ou com um elemento <label> associado). Isso significa que configurar a 
propriedade value de um elemento caixa de sele^ao ou botao de a^ao nao altera a aparencia visual do 
elemento. E possivel configurar value, mas isso muda apenas a string enviada para o servidor Web 
quando o formulario e submetido. 

Quando o usuario clica em um botao de alternancia, o elemento botao de aqao ou caixa de seleQo 
ativa suas rotinas de tratamento onclick. Se o botao de alternancia muda de estado como resultado 
do clique, ele tambem ativa as rotinas de tratamento de evento onchange. (Note, entretanto, que os 
botoes de op^ao que mudam de estado quando o usuario clica em um botao de opQo diferente nao 
ativam uma rotina de tratamento onchange.) 

15.9.6 Campos de texto 

Os campos de entrada de texto provavelmente representam o elemento mais usado em formularios 
HTML e programas JavaScript. Eles permitem que o usuario insira uma string de texto curta, de 
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uma linha. A propriedade value representa o texto digitado pelo usuario. Voce pode configurar essa 
propriedade de forma a especiflcar explicitamente o texto que deve ser exibido no campo. 

Em HTML5, o atributo placeholder especifica um aviso a ser exibido dentro do campo, antes que 
o usuario digite alguma coisa: 

Arrival Date: <input type="text" name="arrival'' placeholder="yyyy-mm-dd"> 

A rotina de tratamento de evento onchange de um campo de texto e disparada quando o usuario 
digita novo texto ou edita texto existente e entao indica que terminou de editar retirando o foco de 
entrada do campo de texto. 

O elemento Textarea e como um elemento campo de entrada de texto, exceto que permite ao 
usuario inserir (e aos seus programas JavaScript exibir) texto de varias linhas. Os elementos Tex¬ 
tarea sao criados com uma tag <textarea>, usando uma sintaxe significativamente diferente da 
tag <input> que cria um campo de texto. (Consulte TextArea na Parte IV.) Contudo, os dois tipos 
de elementos se comportam de modo bastante parecido. Voce pode usar a propriedade value e a 
rotina de tratamento de evento onchange de um elemento Textarea exatamente como faz para um 
elemento Text. 

Um elemento <input type="password"> e um campo de entrada modificado que exibe asteriscos 
quando o usuario digita nele. Conforme o nome indica, isso e util para permitir que um usuario 
digite senhas sem se preocupar com o fato de outras pessoas lerem por cima de seus ombros. Note 
que o elemento Password protege a entrada do usuario contra curiosos, mas quando o formulario 
e enviado, essa entrada nao e criptografada (a nao ser que seja enviada por meio de uma conexao 
HTTPS segura) e pode ficar visfvel ao ser transmitida pela rede. 

Por fim, um elemento <input type="file"> permite ao usuario digitar o nome de um arquivo a ser 
carregado no servidor Web. Ele e um campo de texto combinado com um botao que abre uma caixa 
de dialogo de escolha de arquivo. Esse elemento de seleqao de arquivo tern uma rotina de tratamento 
de evento onchange, como um campo de entrada normal. Contudo, ao contrario de um campo de 
entrada, a propriedade value de um elemento de sele^ao de arquivo e somente para leitura. Isso evita 
que programas JavaScript mal-intencionados enganem o usuario, fazendo-o carregar um arquivo 
que nao deve ser compartilhado. 

Os varios elementos de entrada de texto definem rotinas de tratamento de evento onkeypress, 
onkeydown e onkeyup. Voce pode retornar false das rotinas de tratamento de evento onkeypress ou 
onkeydown para impedir que o toque de tecla do usuario seja gravado. Isso pode ser util, por exemplo, 
se voce quer forijar o usuario a inserir somente digitos em um campo de entrada de texto em parti¬ 
cular. Consulte o Exemplo 17-6 para ver uma demonstra^ao dessa tecnica. 


15.9.7 Elementos Select e Option 

O elemento Select representa um conjunto de op^oes (representadas por elementos Option) que 
o usuario pode selecionar. Os navegadores normalmente renderizam elementos Select em menus 
suspensos (ou drop-down), mas se voce especiflcar um atributo size com um valor maior do que 1, 
eles vao exibir as opfoes em uma lista (possivelmente com rolagem). O elemento Select pode operar 
de duas maneiras muito distintas e o valor da propriedade type depende de como e configurado. Se o 
elemento <select> tern o atributo multiple, o usuario pode selecionar varias op^oes e a propriedade 
type do objeto Select e “select-multiple”. Caso contrario, se o atributo multiple nao esta presente, 
apenas um item pode ser selecionado e a propriedade type e “select-one”. 
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De certa forma, um elemento select-multiple e como um conjunto de elementos caixa de sele^ao 
e um elemento select-one e como um conjunto de elementos botao de a$ao. Contudo, as op^oes 
exibidas por um elemento Select nao sao botoes de alternancia: em vez disso, sao definidas por ele¬ 
mentos <option>. Um elemento Select define uma propriedade options que e um objeto semelhante 
a um array contendo elementos Option. 

Quando o usuario seleciona ou anula a sele^ao de uma opfao, o elemento Select dispara sua roti- 
na de tratamento de evento onchange. Para elementos Select select-one, a propriedade de leitura/ 
grava^ao selectedlndex especifica qual das opcodes esta selecionada. Para elementos select-multi¬ 
ple, a propriedade selectedlndex unica nao e suficiente para representar o conjunto completo de 
op$oes selecionadas. Nesse caso, para determinar quais op$oes estao selecionadas, deve-se iterar 
pelos elementos do array options [] e verificar o valor da propriedade selected de cada objeto 
Option. 

Alem da propriedade selected, cada objeto Option tem uma propriedade text que especifica a 
string de texto puro que aparece no elemento Select para essa op?ao. Essa propriedade pode ser 
configurada para alterar o texto exibido para o usuario. A propriedade value tambem e uma string 
de leitura/gravafao que especifica o texto a ser remetido para o servidor Web quando o formu¬ 
lario e enviado. Mesmo que voce esteja escrevendo um programa puro do lado do cliente e seu 
formulario nunca seja enviado, a propriedade value (ou seu atributo HTML value corresponden- 
te) pode ser um lugar util para armazenar qualquer dado de que precise, caso o usuario selecione 
uma op?ao em especial. Note que os elementos Option nao tem rotinas de tratamento de evento 
relacionadas a formulario: em vez disso, use a rotina de tratamento onchange do elemento Select. 

Alem de configurar a propriedade text de objetos Option, voce pode alterar as op^oes exibidas em 
um elemento Select dinamicamente, usando recursos especiais da propriedade options, datada dos 
primordios dos scripts do lado do cliente. Voce pode truncar o array de elementos Option configu- 
rando options.length com o numero de op^oes desejadas e pode remover todos os objetos Option 
configurando options.length como 0. Um objeto Option individual pode ser removido do ele¬ 
mento Select configurando-se seu lugar no array options [] como null. Isso exclui o objeto Option 
e qualquer elemento mais alto no array options [] e movido automaticamente para baixo, a fim de 
preencher o lugar vazio. 


Para adicionar novas op^oes em um elemento Select, crie um objeto Option com a construtora 
Option () e anexe-o na propriedade options [] com codigo como o seguinte: 


// Cria um novo objeto Option 
var zaire = new Option("Zaire", 

false, 

false); 


//A propriedade text 
// A propriedade value 
//A propriedade defaultSelected 
// A propriedade selected 


// Exibe em um elemento Select anexando-o no array options: 

var countries = document.address.country; // Obtem o objeto Select 

countries.optionsjcountries.options.length] = zaire; 

Lembre-se de que essas APIs de proposito especial para o elemento Select sao muito antigas. Voce 
pode inserir e remover elementos de op?ao de forma mais clara com chamadas padrao para Docu¬ 
ment. createElementQ, Node.insertBeforeQ, Node.removeChildQ, etc. 
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15.10 Outros recursos de Document 

Este capftulo come^ou com a afirma^ao de que e um dos mais importantes do livro. Por necessidade, 
ele tambem e um dos mais longos. Esta ultima se^ao conclui o capftulo, abordando diversos outros 
recursos do objeto Document. 

15.10.1 Propriedadesde Document 

Este capftulo ja apresentou propriedades de Document, como body, documentElement e forms, que 
se referem a elementos especiais do documento. Os documentos tambem definem algumas outras 
propriedades interessantes: 

cookie 

Uma propriedade especial que permite aos programas JavaScript ler e gravar cookies HTTP. 
Essa propriedade e abordada no Capftulo 20. 

domain 

Uma propriedade que permite a servidores Web mutuamente confiaveis dentro do mesmo 
domfnio Internet abrandar colaborativamente as restri^oes de seguran^a da polftica da mesma 
origem em interarjoes entre suas paginas Web (consulte a Se^ao 13.6.2.1). 

lastModified 

Uma string contendo a data de modifica^ao do documento. 
location 

Esta propriedade se refere ao mesmo objeto Location que a propriedade location do objeto 
Window. 

referrer 

O URL do documento contendo o link, se houver, que levou o navegador ao documento 
atual. Essa propriedade tern o mesmo conteudo do cabe^alho HTTP Referer, mas e grafada 
com duplo r. 

title 

O texto entre as marca?6es <title> e </title> desse documento. 

URL 

O URL do documento como uma String somente de leitura e nao como um objeto Location. 
O valor dessa propriedade e igual ao valor inicial de location. href, mas nao e dinamico como 
o objeto Location. Se o usuario navegar para um novo identificador de fragmento dentro do 
documento, por exemplo, location.href vai mudar, mas document.URL, nao. 

referrer e uma das propriedades mais interessantes: ela contem o URL do documento a partir do 
qual o usuario se vinculou ao documento atual. Voce poderia usar essa propriedade com codigo 
como o seguinte: 

if (document.referrer.indexOf("http://www.google.com/search?") == 0) { 

var args = document.referrer.substring(ref.indexOf("?")+l).split("&"); 
for(var i = 0; i < args.length; i++) { 




396 Parte II JavaScript do lado do cliente 


if (args[i].substring(0,2) == "q=") { 

document.write("<p>Welcome Google User. "); 
document.write("You searched for: " + 

unescape(args[i].substring^)).replace(' + ', ' '); 

} 

} 

} 

O metodo document.write () usado no codigo anterior e o tema da proxima se<jao. 

15.10.2 0 metodo document.write() 

O metodo document.write () foi uma das primeiras APIs de script implementadas pelo navegador 
Web Netscape 2. Ele foi introduzido bem antes do DOM e era a unica maneira de exibir texto 
computado em um documento. Ela nao e mais necessaria em codigo novo, mas e provavel que voce 
a veja em codigo ja existente. 

document.write() concatena seus argumentos de string e insere a string resultante no documento, no 
local do elemento script que o chamou. Quando o script acaba de executar, o navegador analisa a 
safda gerada e a exibe. O codigo a seguir, por exemplo, usa write () para gerar informa^oes na saida 
dinamicamente em um documento HTML que de outro modo seria estatico: 

<script> 

document.write("<p>Document title: " + document.title); 
document.write("<br>URL: " + document.URL); 
document.write("<br>Referred by: " + document.referrer); 
document.write("<br>Modified on: " + document.lastModified); 
document.write("<br>Accessed on: " + new DateQ); 

</script> 

E importante entender que e possivel usar o metodo write () para gerar saida HTML no docu¬ 
mento corrente somente enquanto esse documento esta sendo analisado. Isto e, voce pode chamar 
document.writeQ dentro de codigo de nivel superior em elementos <script> somente porque esses 
scripts sao executados como parte do processo de analise do documento. Se voce colocar uma cha- 
mada de document.writeQ dentro de uma defini^ao de fun^ao e entao chamar essa fun<;ao a partir 
de uma rotina de tratamento de evento, ela nao vai fiincionar conforme o esperado - na verdade, 
ela vai apagar o documento atual e os scripts que ele contend (Voce vai ver por que em breve.) Por 
motivos semelhantes, voce nao deve usar document.writeQ em scripts que tenham os atributos de¬ 
fer ou async configurados. 

O Exemplo 13-3, no Capitulo 13, usou document.writeQ dessa maneira para gerar saida mais com- 
plicada. 

O metodo write () tambem pode ser usado para criar documentos inteiramente novos em outras ja- 
nelas ou quadros. (Contudo, ao trabalhar com varias janelas ou quadros, voce deve tomar o cuidado 
de nao violar a politica da mesma origem.) A primeira chamada para o metodo write () de outro do¬ 
cumento vai apagar todo o conteudo desse documento. write () pode ser chamado mais de uma vez 
para construir o novo conteudo do documento. O conteudo passado para write () pode ser colocado 
no buffer (e nao exibido) ate que voce termine a sequencia de gravaqdes, chamando o metodo do- 
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se() do objeto documento. Isso, basicamente, diz ao parser de HTML que atingiu o final do arquivo 
do documento e que deve parar de analisar e exibir o novo documento. 

E interessante notar que Document tambem suporta um metodo writeln( ) identico ao metodo wri- 
te() de todas as maneiras, exceto que anexa uma nova linha apos gerar a safda de seus argumentos. 
Isso pode ser util se voce esta gerando texto previamente formatado dentro de um elemento <pre>, 
por exemplo. 

O metodo document.write () nao e comumente usado em codigo moderno: a propriedade innerHTML 
e outras tecnicas de DOM oferecem um modo melhor de adicionar conteudo em um documento. 
Por outro lado, alguns algoritmos servem muito bem como API de E/S em estilo fluxo, como a 
fornecida pelo metodo write/). Se estiver escrevendo codigo que calcula e gera texto ao ser executa- 
do, talvez esteja interessado no Exemplo 15-10, que envolve metodos write/) e close/) simples na 
propriedade innerHTML de um elemento especificado. 

Exemplo 15-10 Uma API de fluxo para a propriedade innerHTML 

// Define uma API "de fluxo" simples para configurar o innerHTML de um elemento. 
function ElementStream/elt) { 

if (typeof elt === "string") elt = document.getElementByld/elt); 
this.elt = elt; 
this.buffer = 

} 

// Concatena todos os argumentos e anexa no buffer 
ElementStream.prototype.write = function/) { 

this.buffer += Array.prototype.join.call/arguments, ""); 

}; 

// Como write/), mas adiciona uma nova linha 
ElementStream.prototype.writeln = function/) { 

this.buffer += Array.prototype.join.call/arguments, "") + "\n"; 

}; 

// Configura o conteudo do elemento do buffer e esvazia o buffer. 

ElementStream.prototype.close = function/) { 
this.elt.innerHTML = this.buffer; 
this.buffer = ""; 

}; 


15.10.3 Consultando texto selecionado 

As vezes e util determinar o texto selecionado pelo usuario dentro de um documento. Isso pode ser 
feito com uma fun910 como a seguinte: 

function getSelectedText/) { 

if (window.getSelection) // A API HTML5 padrao 

return window.getSelection/).toString/); 
else if (document.selection) // Esta e a tecnica especifica do IE. 
return document.selection.createRange().text; 

} 
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O metodo window.getSelectionQ padrao retorna um objeto Selection que descreve a sele^ao atual 
como uma sequencia de um ou mais objetos Range. Selection e Range definem uma API bastante 
complexa que nao costuma ser usada e nao esta documentada neste livro. A caracterfstica mais im- 
portante e amplamente implementada (exceto no IE) do objeto Selection e que ele tern um metodo 
toString() que retorna o conteudo de texto puro da sele^ao. 

O IE define uma API diferente, tambem nao documentada neste livro. document.selection retorna 
um objeto representando a sele^ao. O metodo createRangeQ desse objeto retorna um objeto Tex- 
tRange especifico do IE e a propriedade text desse objeto contem o texto selecionado. 

Um codigo como o anterior pode ser especialmente util em bookmarklets (Se<jao 13.2.5.1) que 
operam no texto selecionado pesquisando uma palavra com um mecanismo de busca ou um site de 
referenda. O link HTML a seguir, por exemplo, pesquisa o texto atualmente selecionado na Wiki¬ 
pedia. Quando marcado, esse link e o URL JavaScript que ele contem se tornam um bookmarklet: 

<a href="javascript: var q; 

if (window.getSelection) q = window.getSelectionQ.toStringQ; 

else if (document.selection) q = document.selection.createRangeQ.text; 

void window.open('http://en.wikipedia.org/wiki/' + q);"> 

Look Up Selected Text In Wikipedia 


Ha uma incompatibilidade no codigo de consulta de sele^ao mostrado anteriormente: o metodo 
getSelection () do objeto Window nao retorna o texto selecionado se estiver dentro de um elemento 
de formulario <input> ou <textarea>: ele retorna apenas o texto selecionado do corpo do proprio 
documento. A propriedade document. selection do IE, por outro lado, retorna o texto selecionado de 
qualquer parte do documento. 

Para obter o texto selecionado de um campo de entrada de texto ou elemento <textarea>, use este 
codigo: 

elt.value.substring(elt.selectionStart, elt.selectionEnd); 

As propriedades selectionStart e selectionEnd nao sao suportadas no IE8 ou anteriores. 


15.10.4 Conteudo editavel 

Vimos que os elementos de formulario HTML incluem campos de texto e elementos textarea que 
permitem ao usuario inserir e editar texto puro. Seguindo o exemplo do IE, todos os navegadores 
Web atuais tambem suportam funcionalidade de edi^ao de HTML simples: talvez voce tenha visto 
isso sendo usado em paginas (como as paginas de comentario de blogs) que incorporam um editor 
de rich-text (formato rico de texto) com uma barra de ferramentas com botoes para configurar esti- 
los tipograficos (negrito, italico), justifica^ao e inserijao de imagens e links. 

Existem duas maneiras de habilitar essa funcionalidade de edRao. Configurar o atributo HTML 
contenteditable de qualquer tag ou configurar a propriedade JavaScript contenteditable no objeto 
Element correspondente para tornar possivel editar o conteudo desse elemento. Quando o usuario 
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clicar no conteudo dentro desse elemento, vai aparecer um cursor de inser^ao e os toques de tecla 
serao inseridos. Aqui esta um elemento HTML que cria uma regiao que pode ser editada: 

<div id="editor" contenteditable> 

Click to edit 
</div> 

Os navegadores podem suportar verifica^ao ortografica automatica de campos de formulario e ele- 
mentos contenteditable. Nos navegadores que suportam isso, a verifica^ao pode ser ativada ou de- 
sativada por padrao. Adicione o atributo spellcheck para ativar a verifica^ao explicitamente nos 
navegadores que a suportam. E use spellcheck=false para desabilitar a veriflca^ao explicitamente 
(quando, por exemplo, um <textarea> vai exibir codigo-fonte ou outro conteudo com identificado- 
res que nao aparecem em dicionarios). 

Tambem e possivel fazer com que um documento inteiro possa ser editado, configurando a proprie- 
dade designMode do objeto Document com a string “on”. (Configure-a como “off” a fim de reverter 
para um documento somente de leitura.) A propriedade designMode nao tern um atributo HTML 
correspondente. Pode-se fazer com que o documento dentro de um <iframe> seja editado, como 
segue (observe o uso da funijao onLoadQ do Exemplo 13-5): 

ciframe id="editor" src="about:blank"x/iframe> // iframe vazio 




onLoad(function() { 

var editor = document.getElementById("editor"); 
editor.contentDocument.designMode = "on"; 


// Quando o documento carrega, 
// obtem o documento de iframe 
// e ativa a edicao. 


}); 

</script> 


Todos os navegadores atuais suportam contenteditable e designMode. Contudo, eles sao menos com- 
pativeis quando se trata do comportamento de edicao. Todos os navegadores permitem inserir e 
excluir texto e mover o cursor usando o mouse e o teclado. Em todos os navegadores, a tecla Enter 
inicia uma nova linha, mas diferentes navegadores produzem marca?6es diferentes. Alguns iniciam 
um novo paragrafo e outros simplesmente inserem um elemento <br/>. 

Alguns navegadores permitem que atalhos de teclado, como Ctrl-B, convertam para negrito o texto 
atualmente selecionado. Em outros navegadores (como o Firefox), atalhos de processador de texto 
padrao, como Ctrl-B e Ctrl-I, sao fun^oes interligadas, relacionadas ao navegador, nao estando dis- 
pom'veis para o editor de texto. 

Os navegadores definem varios comandos de edicao de texto, a maioria dos quais nao tern atalhos 
de teclado. Para executar esses comandos, voce utiliza o metodo execCommandQ do objeto Docu¬ 
ment. (Note que esse e um metodo do objeto Document e nao do elemento no qual o atributo 
contenteditable e configurado. Se um documento contem mais de um elemento que pode ser edita¬ 
do, o comando se aplica ao que contem a seleqao ou o cursor de insenjao.) Os comandos executados 
por execCommandQ sao nomeados com strings como “bold”, “subscript”, “justifycenter” ou “inserti- 
mage”. O nome do comando e o primeiro argumento de execCommandQ. Alguns comandos exigem 
um argumento de valor - “createlink”, por exemplo, exige o URL do hiperlink. Teoricamente, se o 
segundo argumento de execCommandQ for true, o navegador vai solicitar ao usuario o valor exigido 
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automaticamente. Por portabilidade, contudo, voce mesmo deve avisar o usuario, passar false como 
segundo argumento e passar o valor como terceiro argumento. Aqui estao dois exemplos de fun^ao 
que fazem editjoes usando execCommand(): 

function bold() { document.execCommand("bold", false, null); } 
function link() { 

var url = prompt("Enter link destination"); 

if (url) document.execCommand("createlink", false, url); 

} 

Os comandos suportados por execCommand () normalmente sao disparados por botoes a partir de uma 
barra de ferramentas. Uma boa interface com o usuario vai desabilitar os botoes quando o comando 
que disparam nao estiver dispom'vel. Passe um nome de comando para document.queryCommandSuppor- 
ted() a fim de descobrir se ele e suportado pelo navegador. Chame document.queryCommandEnabled() 
para descobrir se o comando pode ser usado no momento. (Um comando que espera um intervalo 
de texto selecionado, por exemplo, poderia ser desabilitado quando nao houvesse sele^ao.) Alguns 
comandos, como “bold” e “italic”, tern um estado booleano e podem ser ativados ou desativados de- 
pendendo da sele^ao atual ou da posi^ao do cursor. Esses comandos normalmente sao representados 
com um botao de alternancia em uma barra de ferramentas. Use document.queryCommandState() para 
determinar o estado atual de tal comando. Por fim, alguns comandos, como “fontname”, tern um 
valor associado (um nome de familia de fonte). Consulte esse valor com document.queryCommand Va- 
lue(). Se a sele^ao atual incluir texto usando duas familias de fonte diferentes, o valor de “fontname” 
vai ser indeterminado. Use document.queryCommandlndetermQ para verificar esse caso. 

Diferentes navegadores implementam diferentes conjuntos de comandos de edi^ao. Alguns, como 
“bold”, “italic”, “createlink”, “undo” e “redo”, sao bem suportados . A versao draft de HTML5 da 
epoca em que este livro estava sendo escrito definia os comandos a seguir. Contudo, como eles nao 
sao suportados universalmente, nao estao documentados em detalhes aqui: 


bold 

insertLineBreak 

selectAll 

createLink 

insertOrderedList 

subscript 

delete 

insertUnorderedList 

superscript 

formatBlock 

insertParagraph 

undo 

forwardDelete 

insertText 

unlink 

insertlmage 

italic 

unselect 

insertHTML 

redo 



Caso precise de funcionalidade de editjao de rich-text para seu aplicativo Web, voce provavelmente 
vai querer adotar uma sohnjao pronta que trate das varias diferen^as entre os navegadores. Muitos 
desses componentes de editor podem ser encontrados online 7 . E interessante notar que a funciona¬ 
lidade de edi^ao incorporada nos navegadores e poderosa o bastante para permitir que um usuario 
insira pequenas quantidades de rich text, mas e simples demais para qualquer tipo de editjao de 
documento seria. Em especial, note que e provavel que a marca^ao HTML gerada por esses editores 
seja muito desorganizada. 


Consulte http://www.quirksmode.org/dom/execCommand.html para ver uma Iista de comandos interoperaveis. 

As estruturas YUI e Dojo incluem componentes de editor. Uma lista de outras escolhas pode ser encontrada no endere?o 
http://en. toikipedia. org/wiki/Online_rich-text_editor. 
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Uma vez que o usuario tenha editado o conteudo de um elemento com o atributo contentedita- 
ble configurado, voce pode usar a propriedade innerHTML para obter a marcarjao HTML do con¬ 
teudo editado. O que vai ser feito com esse rich text fica por sua conta. Voce poderia armazena-lo 
em um campo de formulario oculto e envia-lo para um servidor, enviando o formulario. Poderia 
usar as tecnicas descritas no Capftulo 18 para enviar o texto editado diretamente para um servi¬ 
dor. Ou entao poderia usar as tecnicas mostradas no Capftulo 20 para salvar as edifoes do usuario 
de forma local. 




Capi'tulo 16 

Escrevendo script de CSS 


Cascading Style Sheets (CSS - folhas de estilo em cascata) e um padrao para especificar a apresen- 
ta^ao visual de documentos HTML. CSS se destina a ser usada por designers graficos: ela permite 
que um designer especifique precisamente as fontes, cores, margens, recuo, bordas e ate a posi^ao de 
elementos do documento. Mas CSS tambem e interessante para programadores JavaScript do lado 
do cliente, pois e possivel fazer scripts com os estilos CSS. CSS em scripts possibilita uma variedade 
de efeitos visuais interessantes: e possivel criar transi^oes animadas onde o conteudo do documento 
“desliza” a partir da direita, por exemplo, ou criar uma lista de topicos que se expande e contrai, 
na qual o usuario pode controlar o volume de informafoes exibidas. Quando foram introduzidos, 
efeitos visuais em scripts como esses eram revolutionaries. As tecnicas de JavaScript e CSS que os 
produziam eram referidas de modo impreciso como Dynamic HTML ou DHTML, um termo que 
desde entao perdeu a popularidade. 

CSS e um padrao complexo que, quando este bvro estava sendo escrito, experimentava um desen- 
volvimento ativo. CSS e um tema muito amplo e uma abordagem completa esta bem alem dos 
objetivos deste bvro 1 . Contudo, para entender os scripts CSS, e necessario conhecer os fundamentos 
de CSS e os estilos em scripts mais comuns; portanto, este capitulo come^a com uma visao geral 
concisa sobre CSS, seguida de uma explica?ao dos principais estilos mais adaptados a scripts. Apos 
essas duas se^oes introdutorias, o capitulo passa a explicar como se faz scripts de CSS. A Seqtio 16.3 
expbca a tecnica mais comum e importante: alterar os estilos aplicados aos elementos individuals 
do documento usando o atributo HTML style. Embora o atributo style de um elemento possa ser 
usado para definir estilos, nao serve para consultar o estilo de um elemento. A Se^ao 16.4 explica 
como consultar o estilo computado de qualquer elemento. A Se^ao 16.5 expbca como modificar mui- 
tos estilos simultaneamente, alterando o atributo style de um elemento. Tambem e possivel, embora 
menos comum, escrever scripts de folhas de estilo diretamente, e a Se$ao 16.6 mostra como habihtar 
e desabilitar folhas de estilo, como alterar as regras das folhas de estilo existentes e como adicionar 
novas folhas de estilo. 


1 Masconsu 


rite o livro CSS: The Definitive Guide , de Eric Meyer (O’Reilly), por exemplo. 
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16.1 Visao geral de CSS 

Existem muitas variaveis na exibi^ao visual de um documentor HTML: fontes, cores, espa^amento, 
etc. O padrao CSS enumera essas variaveis e as chama de propriedades de estilo. CSS define pro- 
priedades que especificam fontes, cores, margens, bordas, imagens de fundo, alinhamento de texto, 
tamanho do elemento e posi^ao do elemento. Para definir a aparencia visual de elementos HTML, 
especificamos o valor das propriedades CSS. Para fazer isso, coloque dois-pontos e um valor apos o 
nome da propriedade: 
font-weight: bold 

Para descrever completamente a apresenta^ao visual de um elemento, em geral precisamos especi- 
ficar o valor de mais de uma propriedade. Quando varios pares nome:valor sao exigidos, eles sao 
separados por pontos e virgulas: 

margin-left: 10%; /* a margem esquerda tern 10% da largura da pagina */ 

text-indent: .5in; /* recua por 1/2 polegada */ 

font-size: 12 pt; /* tamanho da fonte de 12 pontos */ 

Como voce pode ver, CSS ignora comentarios entre /* e */. No entanto, nao aceita comentarios que 
come^am com / /. 

Existem duas maneiras de associar um conjunto de valores de propriedade CSS aos elementos 
HTML cuja apresenta^ao definem. A primeira e configurando o atributo style de um elemento 
HTML individual. Isso e chamado de estilo em linha: 

<p style="margin: 20px; border: solid red 2px;"> 

This paragraph has increased margins and is 
surrounded by a rectangular red border. 

</p> 

Contudo, normalmente e muito mais util separar os estilos CSS dos elementos HTML individuals 
e defini-los em uma folha de estilo. Uma folha de estilo associa conjuntos de propriedades de estilo 
a conjuntos de elementos HTML que sao descritos com seletores. Um seletor especifica ou “selecio- 
na” um ou mais elementos de um documento com base na identificafao, classe ou nome de tag do 
elemento ou em criterios mais especializados. Os seletores forarn apresentados na Se^ao 15.2.5, que 
tambem mostrou como usar querySelectorAllQ para obter o conjunto de elementos corresponden- 

O elemento basico de uma folha de estilos CSS e a regra de estilo, a qual consiste em um seletor 
seguido por um conjunto de propriedades CSS e seus valores, colocados entre chaves. Uma folha de 
estilo pode conter qualquer niimero de regras de estilo: 

p { /* o seletor "p" corresponde a todos os elementos <p> */ 

text-indent: .5in; /* recua a primeira linha por.5 polegadas */ 

} 

.warning { /* Qualquer elemento com class="warning" */ 

background-color: yellow; /* obtem um fundo amarelo */ 
border: solid black 5px; /* e uma borda preta grande */ 

} 
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Uma folha de estilos CSS pode ser associada a um documento HTML por meio de sua inclusao den- 
tro de marca^oes <style> e </style> no componente <head> de um documento. Assim como o elemen- 
to <script>, o elemento <style> analisa seu conteudo de forma especial e nao o trata como HTML: 

<headxtitle>Test Document</title> 

<style> 

body { margin-left: BOpx; margin-right: 15px; background-color: #ffffff } 
p { font-size: 24 px; } 

</style> 

</head> 

<bodyxp>Testingj testing</p> 

</html> 

Quando uma folha de estilo vai ser usada por mais de uma pagina em um site, e melhor armazena-la 
em seu proprio arquivo, sem qualquer marca^ao HTML envolvente. Esse arquivo CSS pode entao 
ser incluido na pagina HTML. No entanto, ao contrario do elemento <script>, o elemento <style> 
nao tern um atributo src. Para incluir uma folha de estilo em uma pagina HTML, use um elemento 
<link> no elemento <head> de um documento: 

<head> 

<title>Test Document</title> 

clink rel="stylesheet" href="mystyles.css" type="text/css"> 

Em poucas palavras, e assim que CSS funciona. Contudo, existem alguns outros pontos sobre CSS 
que vale a pena entender. As subse^oes a seguir os explicam. 


16.1.1 Acascata 

Lembre-se de que o C em CSS significa “cascata”. Esse termo indica que as regras de estilo aplicadas 
em determinado elemento de um documento podem ser provenientes de uma “cascata” de fontes 
diferentes: 

• A folha de estilo padrao do navegador Web 

• As folhas de estilo do documento 

• O atributo style de elementos HTML individuals 

Os estilos do atributo style anulam os estilos das folhas de estilo. E os estilos das folhas de estilo de 
um documento anulam os estilos padrao do navegador, evidentemente. A apresenta^ao visual de de¬ 
terminado elemento pode ser uma combina^ao de propriedades de estilo de todas as tres fontes. Um 
elemento pode ate corresponder a mais de um seletor dentro de uma folha de estilo, no caso em que 
as propriedades de estilo associadas a todos esses seletores sao aplicadas ao elemento. (Se diferentes 
seletores definem diferentes valores para a mesma propriedade de estilo, o valor associado ao seletor 
mais especifico anula o valor associado aos seletores menos especificos, mas os detalhes estao fora dos 
objetivos deste livro.) 

Para exibir qualquer elemento do documento, o navegador Web precisa combinar o atributo style 
desse elemento com os estilos de todos os seletores correspondentes nas folhas de estilo do docu- 
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memo. O resultado desse calculo e o conjunto real de propriedades de estilo e valores utilizados para 
exibir o elemento. Esse conjunto de valores e conhecido como estilo computado do elemento. 


16.1.2 Historia de CSS 

CSS e um padrao relativamente antigo. CSS1 foi adotado em dezembro de 1996 e define proprie¬ 
dades para especificar cores, fontes, margens, bordas e outros estilos basicos. Navegadores antigos, 
como Netscape 4 e Internet Explorer 4, contem bastante suporte a CSS1. A segunda edi^ao do pa¬ 
drao, CSS2, foi adotada em maio de 1998. Ela define varios recursos mais avan^ados, mais notada- 
mente o suporte para posicionamento absoluto de elementos. CSS2.1 esclarece e corrige CSS2, eli- 
minando recursos que os fornecedores de navegador nunca implementaram. Os navegadores atuais 
tern suporte basicamente completo a CSS2.1, embora as versoes do IE anteriores ao IE8 tenham 
omissoes notaveis. 

O trabalho em CSS continua. Para a versao 3, a especifica^ao CSS foi dividida em varios modulos 
especializados que estao passando pelo processo de padroniza^ao separadamente. A especifica$oes 
CSS e os documentos de trabalho podem ser encontrados no enderefo http://www.w3.org/Style/CSS/ 
current-work. 

16.1.3 Propriedades de atalho 

Certas propriedades de estilo em geral utilizadas em conjunto podem ser combinadas com proprie¬ 
dades de atalho especiais. Por exemplo, as propriedades font-family, font-size, font-style e fon- 
tweight podem ser configuradas todas de uma vez usando-se uma unica propriedade font com um 
valor composto: 

font: bold italic 24pt helvetica; 

Da mesma forma, as propriedades border, margin e padding sao atalhos para propriedades que es- 
pecificam bordas, margens e preenchimento (o espa^o entre a borda e o conteudo do elemento) 
de cada um dos lados individuals de um elemento. Por exemplo, em vez de usar a propriedade 
border, voce pode usar as propriedades border-left, border-right, border-top e border-bottom para 
especificar a borda de cada lado separadamente. Na verdade, cada uma dessas propriedades e um 
atalho. Em vez de especificar border-top, voce pode especificar border-topcolor, border-top-style 
e border-top-width. 

16.1.4 Propriedades nao padronizadas 

Quando os fornecedores de navegador implementam propriedades CSS nao padronizadas, eles pre- 
fixam os nomes das propriedades com uma string especffica. O Firefox usa moz-, o Chrome usa -we- 
bkit- e o IE usa -ms-. Os fornecedores de navegador fazem isso mesmo ao implementarem proprie¬ 
dades que estao destinadas a uma futura padroniza^ao. Um exemplo e a propriedade border-radius, 
que especifica cantos arredondados para elementos. Isso foi implementado de forma experimental 
no Firefox 3 e no Safari 4 usando prefixos. Quando o padrao amadureceu o suficiente, o Firefox 4 
e o Safari 5 removeram o prefixo e suportaram border-radius diretamente. (O Chrome e o Opera a 
suportam ha muito tempo, sem qualquer prefixo. O IE9 tambem a suporta sem prefixo, mas o IE8 
nao suportava, nem com prefixo.) 
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Ao trabalhar com propriedades CSS que tem nomes diferentes nos diferentes navegadores, talvez 
voce ache util definir uma classe para elas: 

.radiusio { 

border-radius: lOpx; /* para navegadores atuais */ 

-moz-border-radius: lOpx; /* para o Fire-fox 3.x */ 

-webkit-border-radius: lOpx; /* Para o Safari 3.2 64*/ 

} 

Com uma classe como essa definida, voce pode adicionar “radiuslO” no atributo class de qualquer 
elemento para que ele tenha uma borda com raio de 10 pixels. 


16.1.5 ExemplodeCSS 

O Exemplo 16-1 e um arquivo HTML que define e utiliza uma folha de estilo. Ele demonstra seletores 
de nome de tag, classe e baseados em identificagao, tendo tambem um exemplo de estilo em linha defi- 
nido com o atributo style. A Figura 16-1 mostra como esse exemplo e renderizado em um navegador. 
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Cascading Style Sheets Demo 


Warning 

This is a warning! Notice how it grabs 
your attention with its hold text, and 
bright colors. Also notice that the 
heading is centered and in blue italics. 


TI IIS PARAGRAPII IS CENTERED 
AND APPEARS IN UPPERCASE LETTERS. 

Here we explicitly use an inline style to override the uppercase letters. 


Figura 16-1 Uma paginaWebcom estilosCSS. 


Exemplo 16-1 Definindo e usando Cascading Style Sheets 
<head> 

<style type="text/css"> 

I* Especifica que os cabecalhos aparecem em texto azul e italico. */ 
hi, h2 { color: blue; font-style: italic } 
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* Oualquer elemento de class="WARNING" aparece em texto negritado grande com margens 

* grandes e fundo amarelo com uma borda vermelha grossa. 

*/ 

.WARNING { 

font-weight: bold; 
font-size: 150%; 

margin: 0 lin 0 lin; /* superior direita inferior esquerda */ 
background-color: yellow; 
border: solid red 8px; 

padding: lOpx; /* 10 pixels em todos os 4 lados */ 

} 


/* 

* Texto dentro de urn cabe^alho hi ou h2 dentro de um elemento com class="WARNING" 

* deve ser centralizado, alem de aparecer em italico azul. 

•WARNING hi, .WARNING h2 { text-align: center } 

/* 0 unico elemento com id=''special" aparece em letras maiusculas e centralizado. */ 
#special { 

text-align: center; 
text-transform: uppercase; 

} 

</style> 

</head> 

<body> 

<hi>Cascading Style Sheets Demo</hi> 

<div class="WARNING"> 

<h2>Warning</h2> 

This is a warning! 

Note how it grabs your attention with its bold text and bright colors. 

Also notice that the heading is centered and in blue italics. 

</div> 

<p id="special"> 

This paragraph is centered<br> 
and appears in uppercase letters.<br> 

<span style="text-transform: none"> 

Here we explicitly use an inline style to override the uppercase letters. 

</span> 

</p> 



16.2 Propriedades CSS importantes 

Para programadores JavaScript do lado do cliente, os recursos mais importantes de CSS sao as pro¬ 
priedades que especificam a visibilidade, o tamanho e a posi^ao precisa dos elementos individuals de 
um documento. Outras propriedades CSS permitem especificar a ordem de empilhamento, transpa¬ 
rency, regiao de corte, margens, preenchimento, bordas e cores. Para escrever scripts CSS, e impor- 
tante entender como essas propriedades de estilo funcionam. Elas estao resumidas naTabela 16-1 e 
documentadas com mais detalhes nas sefoes a seguir. 
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CSSmoderna 

Quando escrevi este capitulo, CSS estava em meio a uma revolugao, com os fornecedores de navegador imple- 
mentando novosestilos poderosos, como border-radius, text-shadow, box-shadow e column-count. 
Outro novo recurso revolucionario de CSS sao as fontes Web: a capacidade de baixar e usar fontes personaliza- 
das com uma regra CSS@font-face. (Consulte http://code.google.com/webfonts para ver uma selegao de 
fontes gratuitas para uso na Web e urn mecanismo facil para baixa-las dos servidores do Google.) 

Outro desenvolvimento revolucionario em CSS e CSS Transitions. Trata-se de uma versao preliminar de 
especificagao que pode transformar automaticamente qualquer alteragao com script feita em urn estilo 
CSS em uma transigao suavemente animada. (Quando for amplamente implementada, vai evitar a neces- 
sidade de codigo de animagao CSS como o que aparece na Segao 16.3.1.) CSS Transitions e implementada 
nos navegadores atuais, menos o IE, mas suas propriedades de estilo ainda sao prefixadas com strings 
especificas do fornecedor. CSS Animations e uma proposta relacionada que utiliza CSS Transitions como 
ponto de partida para definir sequences de animagao mais complexas. Atualmente, CSS Animations so 
e implementada pelos navegadores Webkit. Nem as transigoes nem as animagoes sao abordadas neste 
capitulo, mas sao tecnologias que voce, como desenvolvedor Web, deve conhecer. 

Outro projeto de CSS que os desenvolvedores Web devem conhecer e CSS Transforms, que permite aplicar 
transformagoes bidimensionais afins (rotagao, mudanga de escala, translagao ou qualquer combinagao 
expressa como uma matriz) arbitrarias em qualquer elemento.Todos os navegadores atuais (induindo o 
IE9 e posteriores) suportam esta nova funcionalidade, com prefixos do fornecedor. 0 Safari suporta ate 
uma extensao que permite transformagoes tridimensionais, mas nao esta daro se outros navegadores vao 
seguiro exemplo. 


Tabela 16-1 Propriedades de estilo CSS importantes 


Propriedade 

Descrigao 

position 

Especifica o tipo de posicionamento aplicado a um elemento 

top, left 

Especificam a posigao das margens superior e esquerda de um elemento 

bottom, right 

Especificam a posigao das margens inferior e direita de um elemento 

width, height 

Especificam o tamanho de um elemento 

z-index 

Especifica a "ordem de empilhamento"de um elemento em relagao a qualquer elemento sobreposto; 
define uma terceira dimensao de posicionamento de elemento 

display 

Especifica como (e se) um elemento e exibido 

visibility 

Especifica se um elemento e visivel 

clip 

Define uma"regiao de corte"para um elemento; somente partes do elemento dentro dessa regiao sao 
exibidas 

overflow 

Especifica o que fazer se um elemento for maior do que o espago designado para ele 

margin, border, padding 

Especificam o espagamento e as bordas de um elemento. 

background 

Especifica a cor ou imagem de fundo de um elemento. 

opacity 

Especifica o quanto um elemento e opaco (ou translucido). Essa e uma propriedade da CSS3 suportada 
por alguns navegadores. Existe uma alternativa que funciona para o IE. 
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16.2.1 Posicionando elementos com CSS 

A propriedade CSS position especifica o tipo de posicionamento aplicado a um elemento. Aqui 
estao os quatro valores possfveis para essa propriedade: 


Esse e o valor padrao e especifica que o elemento e posicionado de acordo com o fluxo normal 
do conteudo do documento (para a maioria dos idiomas ocidentais, da esquerda para a direita 
e de cima para baixo). Os elementos posicionados estaticamente nao podem ser posicionados 
com top, left e outras propriedades. Para usar tecnicas de posicionamento de CSS com um 
elemento do documento, voce deve primeiro configurar sua propriedade position com um dos 
outros tres valores. 



absolute 

Este valor permite especificar a posipio de um elemento em relapio ao elemento que o con- 
tem. Os elementos posicionados de forma absoluta sao posicionados independentemente de 
todos os outros elementos e nao fazem parte do fluxo de elementos posicionados estaticamen¬ 
te. Um elemento posicionado de forma absoluta e posicionado em relapio ao seu ascendente 
posicionado mais proximo ou ao proprio documento. 

fixed 

Este valor permite especificar a posipio de um elemento com relapio a janela do navegador. 
Elementos com posicionamento fixed sao sempre visiveis e nao rolam com o restante do do¬ 
cumento. Assim como os elementos posicionados de forma absoluta, os elementos de posipio 
fixa sao independentes de todos os outros e nao fazem parte do fluxo do documento. O posi¬ 
cionamento fixo e suportado na maioria dos navegadores modernos, mas nao esta disponivel 
no IE6. 


relative 

Quando a propriedade position e configurada como relative, um elemento e disposto de 
acordo com o fluxo normal e sua posipio e entao ajustada em relapio ao fluxo normal. O 
espapo alocado para o elemento no fluxo normal do documento permanece alocado para ele 
e os elementos que estao em um de seus lados nao se aproximam para preencher esse espap> e 
tambem nao sao “afastados” da nova posipio do elemento. 

Quando a propriedade position de um elemento tiver configurada com algo que nao seja static, 
voce pode especificar a posipio desse elemento com alguma combinapio das propriedades left, top, 
right e bottom. A tecnica de posicionamento mais comum usa as propriedades left e top para espe¬ 
cificar a distancia da margem esquerda do elemento conteiner (normalmente o proprio documento) 
ate a margem esquerda do elemento e a distancia da margem superior do conteiner ate a margem 
superior do elemento. Por exemplo, para colocar um elemento 100 pixels a partir da esquerda e 100 
pixels a partir da parte superior do documento, voce pode especificar estilos CSS em um atributo 
style como segue: 

<div style="position: absolute; left: lOOpx; top: 100px;"> 
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Se um elemento usa posicionamento absoluto, suas propriedades top e left sao interpretadas em 
rela^ao ao elemento ascendente mais proximo que tenha sua propriedade position configurada com 
algo que nao seja static. Se um elemento posicionado de forma absoluta nao tern qualquer ascen¬ 
dente posicionado, as propriedades top e left sao medidas em coordenadas do qualquer - sao des- 
locamentos a partir do canto superior esquerdo do documento. Se quiser posicionar um elemento 
de forma absoluta em rela^ao a um conteiner que faz parte do fluxo normal do documento, use 
position: relative para o conteiner e especifique uma posi^ao top e left igual a Opx. Isso faz o contei¬ 
ner ser posicionado dinamicamente, mas o deixa em seu lugar normal no fluxo do documento. Qual¬ 
quer filho posicionado de forma absoluta e entao posicionado em relaqao a posi^ao do conteiner. 

Embora seja mais comum especificar a posiQo do canto superior esquerdo de um elemento com 
left e top, right e bottom tambem podem ser usadas para especificar a posi^ao das margens inferior 
e direita de um elemento em rela^ao as margens inferior e direita do elemento conteiner. Por exem- 
plo, para posicionar um elemento de modo que seu canto inferior direito fique no canto inferior 
direito do documento (supondo que nao esteja aninhado dentro de outro elemento dinamico), use 
os seguintes estilos: 

position: absolute; right: Opx; bottom: Opx; 

Para posicionar um elemento de modo que sua margem superior fique a 10 pixels a partir da parte 
superior da janela e sua margem direita fique a 10 pixels a partir da direita da janela, e para que ele 
nao role com o documento, voce poderia usar os seguintes estilos: 

position: fixed; right: lOpx; top: lOpx; 

Alem da posi?ao de elementos, CSS permite especificar o tamanho. Em geral, isso e feito fornecen- 
do-se valores para as propriedades de estilo width e height. Por exemplo, o trecho HTML a seguir 
cria um elemento posicionado de forma absoluta sem conteudo algum. Suas propriedades width, 
height, e background-color o fazem aparecer como um pequeno quadrado azul: 

<div style="position: absolute; top: lOpx; left: lOpx; 

width: lOpx; height: lOpx; background-color: blue”> 

</div> 

Outra maneira de definir a largura de um elemento e especificar um valor para as propriedades left e 
right. Da mesma forma, e possfvel definir a altura de um elemento especificando top e bottom. Con- 
tudo, se voce especifica um valor para left, right e width, a propriedade width anula a propriedade 
right; se a altura de um elemento e limitada, height tern prioridade em rela?ao a bottom. 

Lembre-se de que nao e necessario especificar o tamanho de cada elemento dinamico. Alguns ele¬ 
mentos, como as imagens, tern um tamanho intrfnseco. Alem disso, para elementos dinamicos que 
contem texto ou outro conteudo em fluxo, muitas vezes e suficiente especificar a largura desejada do 
elemento e permitir que a altura seja determinada automaticamente pelo layout do seu conteudo. 

CSS exige que as propriedades de posi?ao e dimensao sejam especificadas com uma unidade. Nos 
exemplos anteriores, as propriedades de posi?ao e tamanho foram especificadas com o sufixo “px”, 
que significa pixels. Voce tambem pode usar polegadas (“in”), centimetres (“cm”), pontos (“pt”) e 
ernes (“eme”; a medida da altura da linha da fonte corrente). 
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Em vez de especificar posi^oes e tamanhos absolutos usando as unidades mostradas anteriormente, 
CSS tambem permite especificar a posi^ao e o tamanho de um elemento como uma porcentagem do 
tamanho do elemento conteiner. Por exemplo, o trecho HTML a seguir cria um elemento vazio com 
uma borda preta, com a metade da largura e metade da altura do elemento conteiner (ou da janela 
do navegador) e centralizado dentro desse elemento: 

<div style="position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; 
border: 2px solid black"> 


16.2.1.1 A terceira dimensao: z-index 

Vimos que as propriedades left, top, right e bottom podem especificar as coordenadas X e Y de 
um elemento dentro do piano bidimensional do elemento conteiner. A propriedade z-index define 
uma especie de terceira dimensao: ela permite especificar a ordem de empilhamento dos elementos 
e indicar quais de dois ou mais elementos sobrepostos e desenhado sobre os outros. A propriedade 
z-index e um inteiro. O valor padrao e zero, mas voce pode especificar valores positivos ou negativos. 
Quando dois ou mais elementos se sobrepoem, eles sao desenhados na ordem do menor z-index para 
o maior; o elemento com z-index mais alto aparece sobre todos os outros. Se elementos sobrepostos 
tern o mesmo z-index, eles sao desenhados na ordem em que aparecem no documento, de modo que 
o ultimo elemento sobreposto aparece em cima. 

Note que o empilhamento de z-index so se aplica a elementos irmaos (isto e, elementos que sao 
filhos do mesmo conteiner). Se dois elementos que nao sao irmaos se sobrepoem, a configura^ao 
de suas propriedades z-index individuals nao permite especificar qual deles flea em cima. Em vez 
disso, deve-se especificar a propriedade z-index dos dois conteineres irmaos dos dois elementos 
sobrepostos. 

Os elementos nao posicionados (isto e, elementos com posicionamento position:static padrao) 
sao sempre dispostos de uma maneira que impede sobreposifoes, de modo que a propriedade z- 
- index nao se aplica a eles. Contudo, eles tern um valor de z-index igual a zero, ou seja, elementos 
posicionados com z- index positivo aparecem no topo do fluxo normal do documento e os elementos 
posicionados com z-index negativo aparecem embaixo do fluxo normal do documento. 


16.2.1.2 Exemplo de posicionamento de CSS: texto sombreado 

A especifica^ao CSS3 inclui uma propriedade text-shadow para produzir efeitos de sombra projeta- 
da sob o texto. Ela e suportada por varios navegadores atuais, mas e possfvel usar propriedades de 
posicionamento de CSS para obter um efeito semelhante, desde que voce esteja disposto a repetir e 
estilizar novamente o texto para produzir uma sombra: 

<!-- A propriedade text-shadow produz sombras automaticamente --> 

<span style="text-shadow: Bpx Bpx lpx #888''>Shadowed</span> 

<!-- Aqui esta como podemos produzir um efeito semelhante com posicionamento. --> 
espan style="position:relative;"> 

Shadowed <!-- Este e o texto que projeta a sombra. --> 
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<span style="position:absolute; top:3px; left:3px; z-index:-l; color: #888"> 
hadowed <!-- Esta e a sombra --> 

</span> 

O texto a ser sombreado e incluido em um elemento <span> posicionado relativamente. Nao ha pro- 
priedades de posi^ao configuradas, de modo que o texto aparece em sua posifao normal no fluxo. A 
sombra esta em um elemento <span> posicionado de forma absoluta dentro (e portanto posicionado 
relativamente ao) do elemento <span> posicionado relativamente. A propriedade z-index garante que 
a sombra apare^a embaixo do texto que a produz. 

16.2.2 Bordas, margens e preenchimento 

CSS permite especificar bordas, margens e preenchimento em torno de qualquer elemento. A borda 
de um elemento e um retangulo (ou retangulo arredondado em CSS 3) desenhado em torno (ou 
parcialmente em torno) dele. As propriedades CSS permitem especificar o estilo, a cor e a espessura 
da borda: 

border: solid black lpx; /* a borda e desenhada com uma linha cheia, preta, de 1 pixel */ 
border: 3px dotted red; /* a borda e desenhada em pontos vermelhos de 3 pixels *1 

E possivel especificar a largura, o estilo e a cor da borda usando propriedades CSS individuals e 
tambem e possivel especificar a borda individualmente para cada um dos lados de um elemento. 
Para desenhar uma linha embaixo de um elemento, por exemplo, basta especificar sua propriedade 
border-bottom. E possivel ate especificar a largura, estilo ou a cor de um unico lado de um elemento 
com propriedades como border-top-width e border-left-color. 

Em CSS3 e possivel arredondar todos os cantos de uma borda com a propriedade border-radius e 
arredondar cantos individuals com nomes de propriedade mais explicitos. Por exemplo: 
border-top-right-radius: 50 px; 

As propriedades margin e padding especificam ambas espa^o em branco em torno de um elemento. 
A diferen^a importante e que margin especifica espa^o fora da borda, entre a borda e os elementos 
adjacentes, e padding especifica espa^o dentro da borda, entre a borda e o conteudo do elemento. 
Uma margem fornece espa^o visual entre um elemento (possivelmente com bordas) e seus vizinhos 
no fluxo normal do documento. O preenchimento mantem o conteudo do elemento visualmente 
separado de sua borda. Se um elemento nao tern bordas, o preenchimento em geral nao e necessario. 
Se um elemento e posicionado dinamicamente, ele nao faz parte do fluxo normal do documento e 
suas margens sao irrelevantes. 

A margem e o preenchimento de um elemento podem ser especificados com as propriedades margin 
e padding: 

margin: 5px; padding: 5px; 

Tambem e possivel especificar margens e preenchimentos individualmente para cada um dos lados 
de um elemento: 


margin-left: 25px; 
padding-bottom: 5px; 
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Ou entao, voce pode especificar valores de margem e preenchimento para todas as quatro bordas 
de um elemento com as propriedades margin e padding. Voce especifica primeiro os valores de cima 
e entao prossegue no sentido horario: superior, direita, inferior e esquerda. Por exemplo, o codigo 
a seguir mostra duas maneiras equivalentes de configurar diferentes valores de preenchimento para 
cada um dos quatro lados de um elemento: 
padding: lpx 2px Bpx 4px; 

/* A linha anterior e equivalente as linhas a seguir. */ 

padding-top: lpx; 

padding-right: 2px; 

padding-bottom: Bpx; 

padding-left: 4px; 

A propriedade margin funciona da mesma maneira. 


16.2.3 0 modelo de caixa de CSS e detalhes do posicionamento 

As propriedades de estilo margin, border e padding descritas provavelmente nao vao constar em scripts 
com muita frequencia. O motivo de serem mencionadas aqui e que margens, bordas e preenchi¬ 
mento fazem parte do modelo de caixa de CSS e e preciso entender esse modelo para realmente 
compreender as propriedades de posicionamento de CSS. 

A Figura 16-2 ilustra o modelo de caixa de CSS e explica visualmente o significado de top, left, 
width e height para elementos que tern bordas e preenchimento. 
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Figura 16-2 0 modelo de caixa de CSS: propriedades de bordas, preenchimento e posicionamento. 
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A Figura 16-2 mostra um elemento posicionado de forma absoluta aninhado em um elemento con¬ 
tainer posicionado. Tanto o conteiner como os elementos contidos tem bordas e preenchimento, e 
a figura ilustra as propriedades CSS que especificam o preenchimento e a largura da borda de cada 
lado do elemento conteiner. Observe que nenhuma propriedade de margem e mostrada: as margens 
nao sao relevantes para elementos posicionados de forma absoluta. 

A Figura 16-2 tambem contem outras informa^oes mais importantes. Primeiramente, width e height 
especificam apenas o tamanho da area de conteudo de um elemento - nao incluem qualquer espa^o 
adicional exigido para o preenchimento ou a borda (ou margens) do elemento. Para determinar o 
tamanho total na tela de um elemento com borda, voce deve adicionar o preenchimento esquerdo e 
direito e as larguras de borda esquerda e direita a largura do elemento e adicionar o preenchimento 
superior e inferior e as larguras de borda superior e inferior a altura dele. 

Segundo, as propriedades left e top especificam a distancia do interior da borda do conteiner ate o 
exterior da borda do elemento posicionado. Essas propriedades nao sao medidas a partir do canto 
superior esquerdo da area de conteudo do conteiner, mas do canto superior esquerdo do seu preen¬ 
chimento. Da mesma forma, as propriedades right e bottom sao medidas a partir do canto inferior 
direito do preenchimento. 

Aqui esta um exemplo que pode tornar isso mais claro. Suponha que voce criou um elemento con¬ 
teiner posicionado dinamicamente e que tem 10 pixels de preenchimento em torno de sua area de 
conteudo e uma borda de 5 pixels em torno do preenchimento. Agora, suponha que voce posicione 
um elemento filho dinamicamente dentro desse conteiner. Se configurar a propriedade left do filho 
como “0 px”, vai descobrir que ele esta posicionado com sua margem esquerda diretamente sobre a 
margem interna da borda do conteiner. Com essa configura?ao, o filho sobrepoe o preenchimento 
do conteiner, o qual supostamente deveria permanecer vazio (pois esse e o objetivo do preenchi¬ 
mento) . Se quiser posicionar o elemento filho no canto superior esquerdo da area de conteudo do 
conteiner, voce deve configurar as propriedades left e top como “lOpx”. 

16.2.3.1 0 modelo border-box e a propriedade box-sizing 

O modelo de caixa padrao de CSS especifica que as propriedades de estilo width e height forne- 
cem o tamanho da area de conteudo e nao incluem preenchimento e bordas. Poderiamos chamar 
esse modelo de caixa de “modelo content-box”. Existem exceqties no modelo content-box nas 
versoes antigas do IE e tambem nas versoes novas de CSS. Antes do IE6 - e quando o IE6, 7 ou 
8 exibem uma pagina no “modo Quirks” (quando a pagina nao tem um <!D0CTYPE> ou tem um 
doctype insuficientemente restrito) —, as propriedades width e height inclufam o preenchimento e 
as larguras de borda. 

O comportamento do IE e um erro, mas seu modelo de caixa nao padronizado em geral e muito 
util. Reconhecendo isso, CSS3 introduz uma propriedade box-sizing. O valor padrao e content-box, 
que especifica o modelo de caixa padrao descrito anteriormente. Se, em vez disso, voce especificar 
box-sizing:border-box, o navegador vai usar o modelo de caixa do IE para esse elemento e as pro¬ 
priedades width e height vao incluir borda e preenchimento. O modelo border-box e especialmente 
util quando se quer especificar o tamanho global de um elemento como uma porcentagem, mas 
tambem especificar o tamanho da borda e do preenchimento em pixels: 
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<div style="box-sizing:border-box; width: 50%; 

padding: lOpx; border: solid black 2px;"> 

A propriedade box-sizing e suportada por todos os navegadores atuais, mas ainda nao e im- 
plementada universalmente sem prefixo. No Chrome e no Safari, use -webkit-box-sizing. No 
Firefox, use -moz-box-sizing. No Opera e no IE8 e posteriores, voce pode usar box-sizing sem 
qualquer prefixo. 

Uma futura alternativa de CSS 3 ao modelo border-box e o uso de valores calculados para dimensoes 
de caixa: 

<div style="width: calc(50%-12px); padding: lOpx; border: solid black 2px;"> 

Valores CSS calculados com calc() sao suportados no IE9 e no Firefox 4 (como -moz-calc()). 

16.2.4 Exibigao e visibilidade de elementos 

Duas propriedades CSS afetam a visibilidade de um elemento do documento: visibility e 
display. A propriedade visibility e simples: quando e configurada com o valor hidden, o elemen¬ 
to nao e mostrado; quando e configurada com o valor visible, o elemento e mostrado. A pro¬ 
priedade display e mais geral e e utilizada para especificar o tipo de exibifao que um item recebe. 
Ela especifica se um elemento e um elemento de bloco, um elemento em linha, um item de lista, 
etc. No entanto, quando display e configurada como none, o elemento afetado nao e exibido ou 
mesmo tra^ado. 

A diferen^a entre as propriedades de estilo visibility e display esta relacionada ao efeito sobre ele¬ 
mentos que utilizam posicionamento estatico ou relativo. Para um elemento que aparece no fluxo 
normal do layout, configurar visibility como hidden torna o elemento invisivel mas reserva espa?o 
para ele no layout do documento. Tal elemento pode ser repetidamente ocultado e exibido sem al- 
terar o layout do documento. No entanto, se a propriedade display de um elemento e configurada 
como none, nenhum espa?o e alocado para ele no layout do documento; os elementos nos seus dois 
lados dele se aproximam como se ele nao estivesse la. A propriedade display e util, por exemplo, ao 
se criar listas de topicos que se expandem e contraem. 

visibility e display tern efeitos equivalentes quando usadas com elementos de posi^ao absoluta 
ou fixa, pois esses elementos nao fazem parte do layout do documento. Contudo, a propriedade 
visibility geralmente e preferida para ocultar e exibir elementos posicionados. 

Note que nao faz muito sentido usar visibility ou display para tornar um elemento invisivel, a 
nao ser que voce utilize JavaScript para configura-las dinamicamente e torne o elemento visivel em 
algum ponto! Vamos ver como se faz isso ainda neste capftulo. 

16.2.5 Cor, transparency e translucidez 

A cor do texto contido em um elemento do documento pode ser especificada com a proprieda¬ 
de CSS color. E a cor de fundo de qualquer elemento pode ser especificada com a propriedade 
background-color. Vimos anteriormente que a cor da borda de um elemento pode ser especificada 
com border-color ou com a propriedade de atalho border. 
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A discussao sobre bordas incluiu exemplos que especificavam cores de borda usando os nomes em 
ingles de cores comuns, como “red” e “black”. CSS suporta varios desses nomes de cor em ingles, 
mas a sintaxe mais geral para especificar cores em CSS e usar digitos hexadecimais para os compo- 
nentes vermelho, verde e azul de uma cor. Voce pode usar um ou dois digitos por componente. Por 
exemplo: 


#000000 

#fff 

#foo 

#404080 

#ccc 


/* branco *1 
/* vermelho vivo */ 

/* azul-escuro nao saturado */ 
/* cinza-claro */ 


CSS3 tambem define sintaxes para especificar cores no espa^o de cores RGBA (valores de vermelho, 
verde e azul, mais um valor alfa especificando a transparency da cor). RGBA e suportado por todos 
os navegadores modernos, exceto o IE, e espera-se que seja suportado no IE9. CSS3 tambem define 
suporte para especifica^oes de cor HSL (matiz-satura^ao-valor) e HSLA. Novamente, elas sao supor- 
tadas pelo Firefox, Safari e Chrome, mas nao pelo IE. 

CSS permite especificar a posi?ao, o tamanho, a cor de firndo e a cor da borda exatos dos elementos; 
isso proporciona a voce uma capacidade grafica rudimentar para desenhar retangulos e (quando a 
altura e a largura sao reduzidas) linhas horizontais e verticais. A ultima edRao deste livro incluiu um 
exemplo de grafico de barras usando elementos graficos de CSS, mas nesta edRao ele foi substituido 
pela abordagem prolongada do elemento <canvas>. (Consulte o Capitulo 21 para mais informafoes 
sobre script de elementos graficos do lado do cliente.) 

Alem da propriedade background-color, voce tambem pode especificar as imagens a serem usadas 
como firndo de um elemento. A propriedade background-image especifica a imagem a ser usada e 
as propriedades background-attachment, background-position e background-repeat especificam mais 
detalhes sobre como essa imagem e desenhada. A propriedade de atalho background permite especi¬ 
ficar essas propriedades juntas. Essas propriedades de imagem de firndo podem ser usadas para gerar 
efeitos visuais interessantes, mas estao fora dos objetivos deste livro. 

E importante entender que, se nao for especificada uma cor ou imagem de firndo para um elemento, 
o fundo desse elemento normalmente e transparente. Por exemplo, se voce posicionar um elemento 
<div> de forma absoluta sobre algum texto ja existente no fluxo normal do documento, esse texto, 
por padrao, vai aparecer atraves do elemento <div>. Se o elemento <div> contem seu proprio texto, 
as letras podem se sobrepor e se tornar uma confusao ilegivel. Contudo, nem todos os elementos 
sao transparentes por padrao. Os elementos de formulario nao ficam bem com um firndo transpa¬ 
rente, por exemplo, e elementos como <button> tern uma cor de fundo padrao. Esse padrao pode ser 
anulado com a propriedade background-color e, se quiser, voce pode ate configura-la explicitamente 
como “transparente”. 

A transparency que discutimos ate aqui e do tipo tudo ou nada: ou um elemento tern um fundo 
transparente ou um firndo opaco. Tambem e possivel especificar que um elemento (tanto seu fundo 
como seu conteudo de primeiro piano) seja translucido. (Consulte a Figura 16-3 para ver um exem¬ 
plo.) Isso e feito com a propriedade CSS3 opacity. O valor dessa propriedade e um niimero entre 
0 e 1, onde 1 significa 100% opaco (o padrao) e 0 significa 0% opaco (ou 100% transparente). A 
propriedade opacity e suportada por todos os navegadores atuais, exceto o IE. O IE fornece uma 
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alternativa de fiincionamento semelhante, por meio de sua propriedade filter. Para tornar um ele- 
mento 75% opaco, voce pode usar os seguintes estilos CSS: 

opacity: .75; /* estilo CSS3 padrao para transparency */ 

filter: alpha(opacity=75); /* transparency para IE; note que nao ha ponto decimal */ 

16.2.6 Visibilidade parcial: overflow e clip 

A propriedade visibility permite ocultar completamente um elemento do documento. As pro- 
priedades overflow e clip permitem exibir apenas parte de um elemento. A propriedade overflow 
define o que acontece quando o conteudo de um elemento ultrapassa o tamanho especificado (com 
as propriedades de estilo width e height, por exemplo) para o elemento. Os valores permitidos e seus 
significados para essa propriedade sao os seguintes: 

visible 

O conteudo pode transbordar e ser desenhado fora da caixa do elemento, se necessario. Esse 
e o padrao. 


hidden 

O conteudo que transborda e cortado e ocultado para que conteudo algum seja desenhado 
fora da regiao definida pelas propriedades de tamanho e posicionamento. 

scroll 

A caixa do elemento tern barras de rolagem horizontal e vertical permanentes. Se o conteudo 
ultrapassa o tamanho da caixa, as barras de rolagem permitem ao usuario rolar para ver o 
conteudo extra. Esse valor e respeitado somente quando o documento e exibido na tela do 
computador; quando o documento e impresso no papel, por exemplo, obviamente as barras 
de rolagem nao fazem sentido. 


auto 

As barras de rolagem sao exibidas somente quando o conteudo ultrapassa o tamanho do ele¬ 
mento, em vez de serem exibidas permanentemente. 

Enquanto a propriedade overflow permite especificar o que acontece quando o conteudo de um ele¬ 
mento e maior do que sua caixa, a propriedade clip permite especificar exatamente qual parte de um 
elemento deve ser exibida, havendo ou nao transbordamento do elemento. Essa propriedade e espe- 
cialmente util para efeitos em scripts nos quais um elemento e exibido ou revelado progressivamente. 

O valor da propriedade clip especifica a regiao de corte do elemento. Em CSS2, as regioes de corte sao 
retangulares, mas a sintaxe da propriedade clip deixa aberta a possibilidade para que versoes futuras do 
padrao suportem formatos de corte diferentes dos retangulos. A sintaxe da propriedade clip e: 
iect(superior diieita infeiioi esqueida) 

Os valores de superior, diieita, inferior e esquerda especificam os limites do retangulo de corte 
em rela^ao ao canto superior esquerdo da caixa do elemento. Por exemplo, para exibir apenas uma 
parte de100 x100 pixels de um elemento, voce pode dar a esse elemento o seguinte atributo style: 
style="clip: rect(0px lOOpx lOOpx Opx);” 
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Note que os quatro valores dentro dos parenteses sao valores de comprimento e devem incluir uma 
especifica^ao de unidade, como px para pixels. Nao sao permitidas porcentagens. Os valores podem 
ser negativos para indicar que a regiao de corte se estende alem da caixa especificada para o elemento. 
A palavra-chave auto tambem pode ser usada para qualquer um dos quatro valores, a fim de especi- 
ficar que a margem da regiao de corte e igual a margem correspondente da caixa do elemento. Por 
exemplo, e possivel exibir apenas os 100 pixels mais a esquerda de um elemento com o seguinte 
atributo style: 

style="clip: rect(auto lOOpx auto auto);" 

Note que nao existem virgulas entre os valores e que as margens da regiao de corte sao especificadas 
no sentido horario a partir da margem superior. Para desativar o corte, configure a propriedade clip 
como auto. 

16.2.7 Exemplo: janelas translucidas sobrepostas 

Esta sefao termina com um exemplo que demonstra muitas das propriedades CSS discutidas aqui. 
O Exemplo 16-2 utiliza CSS para criar o efeito visual de janelas rolantes, sobrepostas e translucidas 
dentro da janela do navegador. A Figura 16-3 mostra o resultado. 


Firefoxv j y http://localho...0/windows.html | <8> j 


J http://localhost:8000/w vje| | v 

jfftl v Feedback^ 

Test Window 

j 2 a 

3 

i _1_ 

6 Another Window 


7 

8 This is another window. Its 


g z-index puts it On top Of the 


0 other one. CSS styles make its 


-content area translucent, in 


browsers that support that. 



Figura16-3 Janelas criadas com CSS. 


O exemplo nao contem codigo JavaScript nem rotina de tratamento de evento, de modo que nao ha 
modo de interagir com as janelas (a nao ser rola-las), mas essa e uma demonstraqao util dos podero- 
sos efeitos que podem ser obtidos com CSS. 
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Exemplo 16-2 Exibindojanelascom CSS 
<!D0CTYPE html> 

cstyle type="text/css"> 

/** 

* Esta e uma folha de estilos CSS que define tres regras de estilo que usamos 

* no corpo do documento para criar um efeito visual de ''janela' 1 . 

* As regras usam propriedades de posicionamento para configurar o tamanho global da janela 

* e a posicao de seus componentes. Mudar o tamanho da janela 

* exige alteraqoes cuidadosas nas propriedades de posicionamento em todas as tres regras. 

div.window { /* Especifica o tamanho e a borda da janela */ 

position: absolute; /* A posicao e especificada em outro lugar */ 

width: BOOpx; height: 200px; /* Tamanho da janela, nao incluindo as bordas */ 

border: Bpx outset gray; /* Note o efeito de borda "outset” em 3D */ 


div.titlebar { /* Especifica posiqao, 
position: absolute; /* 

top: Opx; height: I8px; /* 

I* 

width: 290px; /* 

P 

background-color: #aaa; /* 

border-bottom: groove gray 2px; /* 
padding: 3px 5px 2px 5px; I* 

font: bold llpt sans-serif; I* 

} 


tamanho e estilo da barra de titulo */ 

* E um elemento posicionado */ 

* A barra de titulo tern I8px + preenchimento e 

* 290 + 5px de preenchimento a esquerda e a direita 

* = 300 */ 

* Cor da barra de titulo */ 

* A barra de titulo tern borda somente embaixo */ 

* Valores no sentido horario: superior, direita, 

* inferior, esquerda */ 

* Fonte do titulo */ 


div.content { /* Especifica tamanho, 
position: absolute; 
top: 25 px; 

height: l65px; 

width: 290px; 
padding: 5px; 
overflow: auto; 
background-color: #fff; 

} 


posiqao e rolagem do conteudo da janela */ 

/* E um elemento posicionado */ 

/* titulo de I8px + borda de 2px + preenchimento de 
/* 3px+2px */ 

/* total de 200px - 25px da barra de titulo - lOpx de 
/* preenchimento*/ 

/* largura de 300px - lOpx de preenchimento */ 

/* Permite espaco em todos os quatro lados */ 

/* Fornece barras de rolagem se precisarmos */ 

/* Fundo branco por padrao */ 


div.translucent { /* esta classe torna uma janela parcialmente transparente */ 
opacity: .75; /* Estilo padrao para transparencia */ 

filter: alpha(opacity=75); /* Transparencia para o IE */ 

} 

</style> 


<body> 

<!-- Aqui esta como definimos uma janela: um div "window" com uma barra de titulo e --> 
<!-- div content aninhada. Note como a posiqao e especificada com --> 

<!-- um atributo style que amplia os estilos da folha de estilo. --> 

<div class="window" style="left: lOpx; top: lOpx; z-index: 10;"> 

<div class="titlebar">Test Window</div> 
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<div class="content"> 

l<br>2<br>B<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br><!-- Muitas linhas para --> 
l<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br><!-- demonstrar a rolagem--> 

<!-- Aqui esta outra janela, com posicao, cor e espessura de fonte diferentes --> 

<div class="window" style="left: 75px; top: llOpx; z-index: 20;"> 

<div class="titlebar">Another Window</div> 

<div class="content translucent" 

style="background-color:#ccc; font-weight:bold;"> 

This is another window. Its <tt>z-index</tt> puts it on top of the other one. 

CSS styles make its content area translucent, in browsers that support that. 

</div> 

</div> 

A principal deficiencia desse exemplo e que a folha de estilo especifica um tamanho fixo para todas 
as janelas. Como as partes da barra de titulo e do conteudo da janela devem ser posicionadas pre- 
cisamente dentro da janela global, mudar o tamanho de uma janela exige alterar o valor de varias 
propriedades de posicionamento em todas as tres regras definidas pela folha de estilo. E dificil fazer 
isso em um documento HTML estatico, mas nao seria tao dificil se voce pudesse usar um script para 
configurar todas as propriedades necessarias. Esse assunto e explorado na proxima segao. 

16.3 Script de estilos em linha 

O modo mais simples de escrever script de CSS e alterar o atributo style de elementos individuals 
do documento. Assim como a maioria dos atributos HTML, style tambem e uma propriedade do 
objeto Element e pode ser manipulada em JavaScript. No entanto, a propriedade style e incomum: 
seu valor nao e uma string, mas um objeto CSSStyleDeclaration. As propriedades JavaScript des¬ 
se objeto estilo representam as propriedades CSS especificadas pelo atributo HTML style. Para 


Converges de atribuigao de nomes: propriedades CSS em JavaScript 

Muitas propriedades de estilo CSS, como font-size, content hifens em seus nomes. Em JavaScript, um 
hifen e interpretado como um sinal de subtragao, de modo que nao e possivel escrever uma expressao 

e.style.font-size = "24pt"; // Erro de sintaxe! 

Portanto, os nomes das propriedades do objeto CSSStyleDeclaration sao ligeiramente diferentes dos no¬ 
mes das propriedades CSS. Se um nome de propriedade CSS contem um ou mais hifens, o nome de pro¬ 
priedade CSSStyleDeclaration e formado removendo-se os hifens e colocando-se em maiuscula a letra 
imediatamente apos cada hffen. Assim, a propriedade CSS border-left-width e acessada por meio da 
propriedade JavaScript borderLeftWidth e a propriedade CSS font-family pode ser acessada com codi- 
gocomooseguinte: 

e.style.fontFamily = "sans-serif”; 

Alem disso, quando uma propriedade CSS, como a propriedade float, tern um nome que e uma palavra 
reservada em JavaScript, esse nome e prefixado com "css"para criar um nome CSSStyleDeclaration valido. 
Assim, para configurar ou consultar o valor da propriedade CSS float de um elemento, use a propriedade 
cssFloat do objeto CSSStyleDeclaration. 
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escrever o texto de um elemento e grande, em negrito e azul, por exemplo, voce pode usar o codigo 
a seguir para configurar as propriedades JavaScript correspondentes as propriedades de estilo font- 
-size font-weightecolor: 

e.style.fontSize = "24pt"; 
e.style.fontWeight = "bold"; 
e.style.color = "blue"; 

Quando trabalhar com as propriedades de estilo do objeto CSSStyleDeclaration, lembre-se de que 
todos os valores devem ser especificados como strings. Em uma folha de estilo ou no atributo style, 
voce pode escrever: 

position: absolute; font-family: sans-serif; background-color: #ffffff; 

Para fazer o mesmo com JavaScript em um elemento e, todos os valores precisam ser colocados entre 
aspas: 

e.style.position = "absolute"; 
e.style.fontFamily = "sans-serif"; 
e.style.backgroundColor = "#ffffff"; 

Note que os pontos e virgulas ficam fora das strings. Eles sao apenas pontos e virgulas normais de 
JavaScript; os pontos e virgulas utilizados em folhas de estilos CSS nao sao exigidos como parte dos 
valores de string definidos com JavaScript. 

Alem disso, lembre-se de que todas as propriedades de posicionamento exigem unidades. Assim, nao 
e correto configurar a propriedade left como segue: 

e.style.left = BOO; // Incorreto: esse e um numero, nao uma string 
e.style.left = "300"; // Incorreto: estao faltando as unidades 

As unidades sao obrigatorias ao se configurar propriedades de estilo em JavaScript, assim como 
acontece ao se configurar propriedades de estilo em folhas de estilo. O modo correto de configurar 
o valor da propriedade left de um elemento e como 300 pixels e: 
e.style.left = "300px"; 

Se quiser configurar a propriedade left com um valor calculado, anexe as unidades no final do 
calculo: 

e.style.left = (xO + leftjnargin + left_border + left_padding) + "px"; 

Observe que o resultado numerico do calculo vai ser convertido em uma string como um efeito 
colateral da anexapio da string de unidades. 

Lembre-se de que algumas propriedades CSS, como margin, sao atalhos para outras propriedades, 
como margin-top, margin-right, margin-bottom e margin-left. O objeto CSSStyleDeclaration tern 
propriedades que correspondem a essas propriedades de atalho. Por exemplo, voce poderia configu¬ 
rar a propriedade margin como segue: 

e.style.margin = topMargin + "px " + rightMargin + "px " + 
bottomMargin + "px " + leftMargin + "px"; 

Com certeza, e mais facil configurar as quatro propriedades de margem individualmente: 

e.style.marginTop = topMargin + "px”; 
e. style. marginRight = rightMargin + "px"; 
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e.style.marginBottom = bottomMargin + "px"; 
e.style.marginLeft = leftMargin + "px"; 

O atributo style de um elemento HTML e seu estilo em linha e anula qualquer cspecificapio de es- 
tilo de uma folha de estilo. Os estilos em linha geralmente sao uteis para configurar valores de estilo 
e foi isso que todos os exemplos anteriores fizeram. As propriedades de um objeto CSSStyleDecla- 
ration que representa estilos em linha podem ser lidas, mas elas so retornam valores significativos se 
tiverem sido configuradas anteriormente por seu codigo JavaScript ou se o elemento HTML com 
que voce esta trabalhando tiver um atributo style em linha que configure as propriedades desejadas. 
Por exemplo, seu documento pode conter uma folha de estilo que configure a margem esquerda de 
todos os paragrafos como 30 pixels, mas se voce ler a propriedade marginLeft de um de seus elemen- 
tos paragrafo, vai obter a string vazia, a nao ser que esse paragrafo tenha um atributo style que anule 
a configurafao da folha de estilo. 

Ler o estilo em linha de um elemento e especialmente dificil para propriedades de estilo que exigem 
unidades e para propriedades de atalho: seu codigo precisa incluir recursos de analise de CSS com- 
plicados para realmente utilizar esses valores. Em geral, o estilo em linha de um elemento so serve 
para configurar estilos. Se voce precisa consultar o estilo de um elemento, use o estilo computado, 
que esta discutido na Secjao 16.4. 

As vezes, voce pode achar mais facil configurar ou consultar o estilo em linha de um elemento como 
um unico valor de string, em vez de como um objeto CSSStyleDeclaration. Para fazer isso, pode 
usar os metodos getAttribute() e setAttribute() de Element ou a propriedade cssText do objeto 
CSSStyleDeclaration: 

// Configure o atributo style de e como a string s com uma destas linhas: 
e.setAttributeC'style", s); 
e.style.cssText = s; 

// Consulte a string style em linha do elemento e com uma destas: 
s = e.getAttribute("style"); 
s = e.style.cssText; 

16.3.1 Animates com CSS 

Um dos usos mais comuns dos scripts de CSS e na produ^ao de efeitos visuais animados. Isso pode 
ser obtido usando-se setTimeout() ou setlnterval() (consulte a Sepio 14.1) para chamar repetida- 
mente uma funpio que altera o estilo em linha de um elemento. O Exemplo 16-3 demonstra isso 
com duas funfoes: shakeQ e fadeOutQ. shakeQ move rapidamente ou “chacoalha” um elemento de 
um lado para outro. Ela poderia ser usada para chamar a atenpio do usuario caso ele insira dados in- 
validos, por exemplo. fade0ut( ) diminui a opacidade de um elemento no decorrer de um perfodo de 
tempo especificado (500 milissegundos, por padrao), fazendo-o desaparecer gradualmente ate sumir. 

Exemplo 16-3 Animagoes com CSS 

// Converte o elemento e para posicionamento relativo e o "chacoalha" para a esquerda e 
// para a direita. 

// 0 primeiro argumento pode ser um objeto elemento ou a identificaqao de um elemento. 

// Se uma funqao for passada como segundo argumento, ela sera chamada 
// com e como argumento quando a animacao terminar. 

// 0 3 s argumento especifica quanto e vai ser chacoalhado. 0 padrao e 5 pixels. 

// 0 4 2 argumento especifica por quanto tempo se vai chacoalhar. 0 padrao e 500 ms. 
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function shake(e, oncomplete, distance, time) { 

// Manipula argumentos 

if (typeof e === "string") e = document.getElementByld(e); 
if (itime) time = 500; 
if (idistance) distance = 5; 

var originalStyle = e.style.cssText; // Salva o estilo original de e 

e.style.position = "relative"; // Torna e posicionado relativamente 

var start = (new DateQ).getTime(); // Note o tempo de inicio da animaqao 

animate(); // Comeca a animacao 

// Esta funcao verifica o tempo decorrido e atualiza a posiqao de e. 

// Se a animacao esta terminada, restaura e ao seu estado original. 

// Caso contrario, atualiza a posiqao de e e agenda a si mesma para executar novamente. 
function animateQ { 

var now = (new DateQ).getTimeQ; // Obtem a hora atual 

var elapsed = now-start; // Por quanto tempo desde que comecamos 

var fraction = elapsed/time; // Que fraqao do tempo total? 


} 


if (fraction < l) { // Se a animacao ainda nao esta terminada 

// Calcula a posiqao x de e como uma funcao da fraqao 
// da conclusao da animaqao. Usamos uma funqao senoidal e multiplicamos 
// a fracao da conclusao por 4pi, de modo que chacoalhe para tras e 
// para frente duas vezes. 

var x = distance * Math.sin(fraction*4*Math.PI); 
e.style.left = x + "px"; 


// Tenta executar novamente em 25ms ou no final do tempo total. 
// Temos como objetivo uma animacao suave de 40 quadros/segundo. 
setTimeout(animate, Math.min(25, time-elapsed)); 


} 

else { 

e.style.cssText = originalStyle 
if (oncomplete) oncomplete(e); 


// Caso contrario, a animacao esta 
// terminada 

// Restaura o estilo original 
// Ativa callback na conclusao 


// Faz e desaparecer gradualmente, desde totalmente opaco ate totalmente transparente, no 
// decorrer de time milissegundos. 

// Supoe que e e totalmente opaco quando esta funqao e chamada. 

// oncomplete e uma funcao opcional que vai ser chamada com e como 
// argumento quando a animacao terminar. Se time for omitido, usa 500ms. 

// Esta funqao nao funciona no IE, mas poderia ser modificada para animar 
// a propriedade filter nao padronizada do IE, alem de opacity, 
function fadeOut(e, oncomplete, time) { 

if (typeof e === "string") e = document.getElementByld(e); 
if (!time) time = 500 ; 


// Usamos Math.sqrt como uma "funqao de abrandamento" simples para tornar a animacao 
// sutilmente nao linear: ela faz desaparecer gradualmente de forma rapida no inicio 
// e depois se torna urn pouco mais lenta. 
var ease = Math.sqrt; 


start = (new DateQ).getTimeQ; 


Note o tempo de inicio da animaqao 
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} 


animateQ; // E comeca a animar 

function animateQ { 

var elapsed = (new Date()).getTime()-start; // tempo decorrido 

var fraction = elapsed/time; // Como uma fracao do total 

if (fraction < l) { // Se a animacao ainda nao terminou 

var opacity = l - ease(fraction); // Calcula a opacidade do elemento 

e.style.opacity = String(opacity); // A configura em e 

setTimeout(animate, // Agenda outro quadro 

Math.min(25, time-elapsed)); 

} 

else { // Caso contrario, terminamos 

e.style.opacity = "0"; // Torna e totalmente transparente 

if (oncomplete) oncomplete(e); // Ativa callback na conclusao 


} 

} 


Tanto shakeQ como fadeOutQ aceitam uma funpio de callback optional como segundo argumento. 
Se for especificado, essa funpio vai ser chamada quando a animacao terminar. O elemento que foi 
animado e passado como argumento para o callback. O trecho HTML a seguir cria um botao que, 
quando clicado, chacoalha de um lado para outro e depois desaparece: 

<button onclick="shake(this, fadeOut);">Shake and Fade</button> 


Note que as fun^oes de exemplo shakeQ e fadeOutQ sao muito parecidas entre si e ambas podem ser- 
vir como modelos para animates similares de outras propriedades CSS. Entretanto, as bibliotecas 
do lado do cliente, como a jQuery, normalmente suportam efeitos visuais predefinidos; portanto, 
talvez voce nunca precise escrever uma fun pro de animacao como shakeQ, a nao ser que queira criar 
um efeito visual especialmente complexo. Uma biblioteca de efeitos antiga e digna de nota e a Scrip- 
taculous, que foi projetada para uso com a estrutura Prototype. Visite http://script.aculo.us/ e http:// 
scripty2.com/ para saber mais. 

O modulo CSS3 Transitions define uma maneira de especificar efeitos animados em folhas de estilo, 
eliminando a necessidade de qualquer script. Em vez de definir uma funpio como fadeOutQ, por 
exemplo, voce poderia usar CSS, como segue: 

.fadeable { transition: opacity .5s ease-in } 

Isso especifica que toda vez que a opacidade de um elemento “fadeable” tiver mudado, essa mudanpi 
sera animada (do valor corrente para o novo valor) durante um periodo de meio segundo, usando 
uma funpio de abrandamento nao linear. CSS Transitions ainda nao e um padrao, mas esta imple- 
mentada ha algum tempo no Safari e no Chrome, usando a propriedade -webkit-transition. Quan¬ 
do este livro estava sendo escrito, o Firefox 4 tinha adicionado suporte usando -moz-transition. 


16.4 Consultando estilos computados 

A propriedade style de um elemento e o estilo em linha desse elemento. Ela anula todas as folhas de 
estilo eeo lugar perfeito para configurar propriedades CSS para mudar a aparencia visual de um ele¬ 
mento. Contudo, geralmente nao serve para consultar os estilos realmente aplicados a um elemento. 
Para isso, voce quer o estilo computado. O estilo computado de um elemento e o conjunto de valores 
de propriedade que o navegador demora (ou computa) do estilo em linha, mais todas as regras de es- 
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tilo aplicaveis de todas as folhas de estilo vinculadas: e o conjunto de propriedades realmente usadas 
para exibir o elemento. Assim como os estilos em linha, os estilos computados sao representados por 
um objeto CSSStyleDeclaration. Ao contrario dos estilos em linha, contudo, os estilos computados 
sao somente de leitura. Nao e possivel configurar esses estilos, mas o objeto CSSStyleDeclaration 
computado de um elemento permite determinar exatamente quais valores de propriedade de estilo 
o navegador utilizou ao renderizar esse elemento. 

Obtenha o estilo computado de um elemento com o metodo getComputedStyle() do objeto Win¬ 
dow. O primeiro argumento desse metodo e o elemento cujo estilo computado e desejado. O se- 
gundo argumento e obrigatorio e normalmente e null ou a string vazia, mas tambem pode ser uma 
string que nomeia um pseudoelemento CSS, como “:before”, “:after”, “:first-line” ou “:first-letter”: 

var title = document.getElementById("sectionititle"); 
var titlestyles = window.getComputedStyle(element, null); 

O valor de retorno de getComputedStyle() e um objeto CSSStyleDeclaration que representa todos os 
estilos aplicados ao elemento (ou pseudoelemento) especificado. Existem varias diferengas impor- 
tantes entre um objeto CSSStyleDeclaration que representa estilos em linha e um que representa 
estilos computados: 

• As propriedades de estilo computadas sao somente de leitura. 

• As propriedades de estilo computadas sao absolutas: unidades relativas, como porcentagens 
e pontos, sao convertidas em valores absolutos. Qualquer propriedade que especifique um 
tamanho (como um tamanho de margem ou de fonte) vai ter um valor medido em pixels. 
Esse valor vai ser uma string com o sufixo “px”, de modo que voce ainda precisara analisa-lo, 
mas nao precisara analisar ou converter unidades. As propriedades cujos valores sao cores serao 
retornadas no formato “rgb(#,#,#)” ou “rgba(#,#,#,#)”. 

• As propriedades de atalho nao sao computadas, mas apenas as propriedades fundamentals 
em que sao baseadas. Nao consulte a propriedade margin, por exemplo, mas use marginLeft, 
marginTop etc. 

• A propriedade cssText do estilo calculado e indefinida. 

Os estilos computados e os estilos em linha podem ser usados em conjunto. O Exemplo 16-4 defi¬ 
ne as fun (joes scale () e scaleColor(). Uma consulta e analisa o tamanho do texto calculado de um 
elemento especffica; a outra consulta e analisa a cor de fundo computada de um elemento. As duas 
fun (joes, entao, mudam a escala do valor resultante e configuram o valor em escala como um estilo 
em linha do elemento. (Essas funijoes nao funcionam no IE8 e anteriores: conforme vamos discutir 
a seguir, essas versoes do IE nao suportam getComputedStyleQ.) 

Exemplo 16-4 Consultando estilos computados e configurando estilos em linha 

// Muda a escala do tamanho do texto do elemento e pelo fator especificado 
function scale(e, factor) { 

// Usa o estilo computado para consultar o tamanho atual do texto 
var size = parseInt(window.getComputedStyle(e,"").fontSize); 

// E usa o estilo em linha para aumentar esse tamanho 
e.style.fontSize = factor*size + "px"; 

} 




426 Parte II JavaScript do lado do cliente 


// Altera a cor de fundo do elemento e pela quantidade especificada. 

// Fatores > l clareiam a cor e fatores < l a escurecem. 
function scaleColor(e, factor) { 

var color = window.getComputedStyle(e, "").backgroundColor; // Consulta 

var components = color.match(/[\d\.]+/g); // Analisa r,g,b, e componentes de a 

for(var i = 0; i < 3; i++) { // Itera por r, g e b 

var x = Number(components[i]) * factor; // Muda a escala de cada um 

x = Math.round(Math.min(Math.max(x, 0), 255)); // Arredonda e define limites 
components[i] = String(x); 

} 

if (components.length == 3) // Uma cor rgb() 

e.style.backgroundColor = "rgb(" + components.join() + ")"; 
else // Uma cor rgba() 

e. style.backgroundColor = "rgba(" + components.join() + ")"; 

} 

Os estilos computados podem ser complicados e consulta-los nem sempre fornece a informa^ao 
esperada. Considere a propriedade font-family: ela aceita uma lista separada por vfrgulas de fami- 
lias de fonte desejaveis para portabilidade entre plataformas. Quando voce consulta a propriedade 
fontFamily de um estilo computado, esta simplesmente obtendo o valor do estilo de font-family 
mais especffico aplicado ao elemento. Isso pode retornar um valor como “arial,helvetica,sans-serif”, 
que nao informa o tipo de letra que esta realmente em uso. Da mesma forma, se um elemento nao 
esta posicionado de forma absoluta, tentar consultar sua posi^ao e tamanho por meio das proprieda- 
des top e left de seu estilo computado frequentemente retorna o valor “auto”. Esse e um valor CSS 
perfeitamente valido, mas provavelmente nao e o que voce estava buscando. 

getComputedStyle( ) nao e implementado pelo IE8 e anteriores, mas espera-se que seja no IE9. No IE, 
todo elemento HTML tern uma propriedade currentStyle cujo valor e um objeto CSSStyleDecla- 
ration. A propriedade currentStyle do IE combina estilos em linha com folhas de estilo, mas nao e 
um verdadeiro estilo computado, pois os valores relativos nao sao convertidos em valores absolutos. 
Consultar as propriedades do estilo atual do IE pode retornar tamanhos com unidades relativas, 
como “%” ou “em”, ou cores com nomes imprecisos, como “red”. 

Embora CSS possa ser usada para especificar precisamente a posi^ao e o tamanho de elementos do 
documento, consultar o estilo computado de um elemento nao e a maneira escolhida para deter- 
minar o tamanho e a posi^ao do elemento. Consulte a Se^ao 15.8.2 para ver uma alternativa mais 
simples e portavel. 

16.5 Escrevendo scripts de classes CSS 

Uma alternativa ao script de estilos CSS individuals por meio da propriedade em linha style e es- 
crever o script do valor do atributo HTML class. Alterar o atributo class de um elemento altera o 
conjunto de seletores de folha de estilo aplicados ao elemento e pode fazer com que varias proprieda¬ 
des CSS mudem ao mesmo tempo. Suponha, por exemplo, que voce queira uma maneira de chamar 
a atenijao do usuario para paragrafos individuals (ou outros elementos) de um documento. Voce 
poderia come^ar definindo estilos que chamem a aten^ao para os elementos que tenham o nome de 
classe “attention”: 



Capftulo 16 Escrevendo script de CSS 427 


•attention { /* Estilos para chamar a atencao do usuario */ 

background-color: yellow; /* Cor de fundo amarelo de destaque */ 
font-weight: bold; /* Texto em negrito */ 

border: solid black 2px; /* Caixa preta */ 

} 

O identificador class e uma palavra reservada em JavaScript; portanto, o atributo HTML class esta 
dispomvel para codigo JavaScript usando-se o nome className. Aqui esta o codigo que configura e 
apaga a propriedade className de um elemento para adicionar e remover a classe “attention” para 
esse elemento: 

function grabAttention(e) { e.className = "attention"; } 
function releaseAttention(e) { e.className = } 

Os elementos HTML podem ser membros de mais de uma classe CSS e o atributo class contem 
uma lista de nomes de classe separados por espa<;os. A propriedade className tern um nome equi- 
vocado: classNames teria sido uma escolha muito melhor. As funijoes anteriores supoem que a pro¬ 
priedade className vai especificar zero ou um nome de classe e nao funcionam quando mais de uma 
classe esta em uso. Se um elemento ja tern uma classe atribuida, chamar a funfao grabAttention() 
para esse elemento vai anular a classe existente. 

HTML5 resolve esse problema definindo uma propriedade classList para cada elemento. O valor 
dessa propriedade e conhecido como DOMTokenList: um objeto semelhante a um array somente 
de leitura (Se^ao 7.11) cujos elementos contem os nomes de classe individuals do elemento. Contu- 
do, mais importantes do que seus elementos de array sao os metodos definidos por DOMTokenList. 
add() e remove() adicionam e removem nome de classe individuals do atributo class do elemento. 
toggle () adiciona um nomes de classes se ainda nao estiver presente e, caso contrario, o remove. Por 
fim, o metodo containsQ testa se o atributo class contem um nome de classe especificado. 

Assim como outros tipos de cole^ao DOM, um DOMTokenList e uma representa^ao “dinamica” 
do conjunto de classes do elemento e nao um instantaneo estatico das classes no momento em que 
a propriedade classList e consultada. Se voce obtem um DOMTokenList da propriedade classList 
de um elemento e depois altera a propriedade className desse elemento, essas altera^oes fleam ime- 
diatamente visiveis por meio da lista de sfmbolos. Da mesma forma, as altera^oes feitas por meio da 
lista de sfmbolos fleam imediatamente visiveis por meio da propriedade className. 

Quando este livro estava sendo escrito, a propriedade classList nao era suportada por todos os 
navegadores. No entanto, e facil aproximar-se dessa importante fimcionalidade com codigo como o 
do Exemplo 16-5. Usar codigo como esse, que permite ao atributo class de um elemento ser tratado 
como um conjunto de nomes de classe, torna muito mais faceis diversas tarefas de script de CSS. 

Exemplo 16-5 dassList(): trata className como um conjunto de classes CSS 

/* 

* Retorna a propriedade classList de e, caso haja uma. 

* Caso contrario, retorna um objeto que Simula a API DOMTokenList para e. 

* 0 objeto retornado tern metodos containsQ, add(), removeQ, toggleQ e toStringQ 

* para testar e alterar o conjunto de classes do elemento e. 

* Se a propriedade classList e suportada de forma nativa, o objeto retornado e 

* semelhante a um array e tern comprimento e propriedades de indice de array. 0 DOMTokenList 

* simulado nao e semelhante a um array, mas tern um metodo toArrayQ que retorna 
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* um instantaneo semelhante a um array com 

function classList(e) { 

if (e.classList) return e.classList; 
else return new CSSClassList(e); 

} 


os nomes de classe do elemento. 

// Retorna e.classList, se existir 
// Caso contrario, tenta simular 


// CSSClassList e uma classe de JavaScript que Simula DOMTokenList 
function CSSClassList(e) { this.e = e; } 


// Retorna true se e.className contem a classe c; caso contrario, false 
CSSClassList.prototype.contains = function(c) { 

// Verifica se c e um nome de classe valido 

if (c.length === 0 || c.indexOf(" ") != -l) 

throw new Error(”Invalid class name: "' + c + .); 

// Verifica primeiro os casos comuns 
var classes = this.e.className; 

(!classes) return false; // e nao tern uma classe 

if (classes === c) return true; // e tern uma classe que coincide exatamente 

// Caso contrario, usa uma RegExp para procurar c como palavra 

// \b em uma expressao regular exige uma correspondence em um limite de palavra. 

return classes.search("\\b" + c + "\\b") != -1; 


// Adiciona c em e.className se ainda nao 
CSSClassList.prototype.add = function(c) { 
if (this.contains(c)) return; 
var classes = this.e.className; 
if (classes && classes[classes.length-i] 

this.e.className += c; 

}; 


estiver presente 

// Nao faz nada se ja estiver presente 
!= " '') 

// Adiciona um espaco, se precisarmos de um 
// Adiciona c em className 


// Remove todas as ocorrencias de c de e.className 
CSSClassList.prototype.remove = function(c) { 

// Certifica-se de que c seja um nome de classe valido 
if (c.length === 0 || c.indexOf(" '') != -l) 

throw new Error(”Invalid class name: "' + c + .); 

// Remove todas as ocorrencias de c como palavra, mais qualquer espaco a direita 
var pattern = new RegExpf'Wb" + c + "\\b\\s*", "g"); 
this.e.className = this.e.className.replace(pattern, ""); 


// Adiciona c em e.className, caso ainda nao esteja presente, e retorna true. 

// Caso contrario, remove todas as ocorrencias de c de e.className e retorna false. 
CSSClassList.prototype.toggle = function(c) { 

if (this.contains(c)) { // Se e.className contem c 

this.remove(c); // entao o remove, 

return false; 

} 

else { // Caso contrario: 

this.add(c); // o adiciona. 
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// Retorna e.className em si 

CSSClassList.prototype.toString = functionQ { return this.e.className; }; 


// Retorno dos nomes em e.className 
CSSClassList.prototype.toArray = functionQ { 

return this.e.className.match(/\b\w+\b/g) || []; 

H 

16.6 Escrevendo scripts de folhas de estilo 



Ate aqui, vimos como configurar e consultar os estilos CSS e classes de elementos individuals. Tam- 
bem e possivel escrever scripts das proprias folhas de estilos CSS. Isso nao e feito normalmente, mas 
em algumas ocasioes pode ser util e esta serjao esbo^a a tecnica. 


Ao se escrever o script de folhas de estilo, existem dois tipos de objetos com que talvez voce precise 
trabalhar. O primeiro tipo sao os objetos Element que representam elementos <style> e <link> que 
contem ou fazem referenda as suas folhas de estilo. Esses sao elementos normais do documento e, 
se voce fornecer a eles atributos id, podera seleciona-los com document.getElementByldQ. O segundo 
tipo e um objeto CSSStyleSheet que representa a folha de estilo em si. A propriedade document, 
stylesheets e um objeto semelhante a um array somente de leitura, contendo objetos CSSStyleSheet 
que representam as folhas de estilo associadas ao documento. Se voce configurar o atributo title do 
elemento <style> ou <link> que define ou faz referenda a folha de estilo, esse titulo vai estar dispo- 
nivel como a propriedade title do objeto CSSStyleSheet correspondente. 


As subse^oes a seguir explicam o que se pode fazer com esses elementos estilo e link e com objetos 
folha de estilo. 


16.6.1 Habilitando e desabilitando folhas de estilo 

A tecnica de script de folha de estilo mais simples tambem e a mais portavel e robusta. Elementos 
<style>, elementos <link> e objetos CSSStyleSheet definem todos uma propriedade disabled que 
pode ser consultada e configurada em JavaScript. Conforme seu nome implica, se a propriedade 
disabled (desabilitada) e true, entao a folha de estilo esta desabilitada e e ignorada pelo navegador. 

A fun^ao disableStylesheetQ a seguir demonstra isso. Se for passado um numero, ela o trata como 
um indice para o array document. stylesheets. Se for passada uma string, ela a trata como um seletor 
CSS, a passa para document.querySelectorAHQ (consulte a Sepio 15.2.5) e, entao, configura a pro¬ 
priedade disabled de todos os elementos retornados: 

function disableStylesheet(ss) { 
if (typeof ss === "number") 

document.styleSheetsfss].disabled = true; 
else { 

var sheets = document.querySelectorAll(ss); 
for(var i = 0; i < sheets.length; i++) 
sheetsji].disabled = true; 

} 

} 
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16.6.2 Consultancy, inserindo e exduindo regras de folha de estilo 

Alem de desabilitar e habilitar folhas de estilo, o objeto CSSStyleSheet tambem define uma API para 
consultar, inserir e excluir as regras de estilo de uma folha de estilo. O IE8 e anteriores implementam 
uma API ligeiramente diferente da API padrao implementada pelos outros navegadores. 

Manipular diretamente as folhas de estilo nao costuma ser algo util. Em vez de editar ou adicionar 
novas regras em uma folha de estilo, em geral e melhor deixar suas folhas de estilo estaticas e escrever 
o script da propriedade className de seus elementos. Por outro lado, se voce quer permitir ao usuario 
controle completo sobre os estilos utilizados em suas paginas, talvez precise manipular uma folha de 
estilo dinamicamente. 

Os elementos do array document. stylesheets [ ] sao objetos CSSStyleSheet. Um objeto CSSStyleShe¬ 
et tern um array cssRules [] que contem as regras da folha de estilo: 

var firstRule = document.styleSheetsjO].cssRules[o]; 

O IE usa o nome de propriedade rules, em vez de cssRules. 

Os elementos dos arrays cssRules [] ou rules [] sao objetos CSSRule. Na API padrao, um objeto 
CSSRule pode representar qualquer tipo de regra CSS, inclusive regras com arroba, como as diretivas 
©import e @page. No IE, contudo, o array rules [] contem apenas as regras de estilo reais da folha de 
estilo. 

Os objetos CSSRule tern duas propriedades que podem ser usadas de modo portavel. (Na API 
padrao, uma regra que nao e uma regra de estilo nao vai ter essas propriedades definidas e voce 
provavelmente quer evita-las ao percorrer a folha de estilo.) selectorText e o seletor CSS da regra e 
style se refere a um objeto CSSStyleDeclaration que pode ser gravado e descreve os estilos associa- 
dos a esse seletor. Lembre-se de que CSSStyleDeclaration e o mesmo tipo usado para representar 
estilos em linha e computados. Esse objeto CSSStyleDeclaration pode ser usado para consultar os 
valores de estilo ou para configurar novos estilos para a regra. Frequentemente, ao percorrer uma 
folha de estilo, voce esta interessado no texto da regra e nao em uma representa?ao analisada dela. 
Nesse caso, use a propriedade cssText do objeto CSSStyleDeclaration para obter a representa<jao 
textual das regras. 

Alem de consultar e alterar as regras existentes de uma folha de estilo, tambem e possivel adicionar 
e remover regras. A interface da API padrao define os metodos insertRuleQ e deleteRuleQ para 
adicionar e remover regras: 

document.styleSheetsjo].insertRule("Hl { text-weight: bold; }", 0); 

O IE nao suporta insertRuleQ e deleteRuleQ, mas define as fun (joes equivalentes addRuleQ e remo- 
veRuleQ. A unica diferenija real (fora os nomes diferentes) e que addRuleQ espera o texto do seletor 
e o texto dos estilos como dois argumentos separados. 
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O codigo a seguir itera pelas regras de uma folha de estilo, demonstrando a API por fazer algumas 
alteratifies ambfguas na folha de estilo: 

var ss = document.styleSheets[o]; // Obtem a primeira folha de estilo 

var rules = ss.cssRules?ss.cssRules:ss.rules; // Obtem as regras da folha de estilo 

for(var i = 0; i < rules.length; i++) { // Itera por essas regras 

var rule = rules[i]; 

if (irule.selectorText) continue; // Pula ^import e outras regras que nao sao de estilo 

var selector = rule.selectorText; // 0 seletor 

var ruleText = rule.style.cssText; // Os estilos, em forma de texto 

// Se a regra se aplica a elementos hi, a aplica em elementos h2 tambem 
// Note que isso so funciona se o seletor e literalmente "hi" 
if (selector == "hi") { 

if (ss.insertRule) ss.insertRule("h2 {" + ruleText + rules.length); 

else if (ss.addRule) ss.addRule("h2", ruleText, rules.length); 

} 

// Se a regra configura a propriedade text-decoration, a exclui. 
if (rule.style.textDecoration) { 

if (ss.deleteRule) ss.deleteRule(i); 
else if (ss.removeRule) ss.removeRule(i); 

i--; // Ajusta o indice do laco, pois a regra i+1 anterior agora e a regra i 

} 

} 

16.6.3 Criando novasfolhas de estilo 

Por fim, e possfvel criar folhas de estilo inteiramente novas e adiciona-las em seu documento. Na 
maioria dos navegadores isso e feito com tecnicas DOM padrao: basta criar um novo elemento 
<style>, inseri-lo no cabeqalho do documento e entao usar sua propriedade innerHTML para configu- 
rar o conteudo da folha de estilo. Entretanto, no IE8 e anteriores, um novo objeto CSSStyleSheet 
e criado com o metodo nao padronizado document.createStyleSheetQ e o texto da folha de estilo e 
especificado usando-se a propriedade cssText. O Exemplo 16-6 demonstra isso. 

Exemplo 16-6 Criando uma nova folha de estilo 

// Adiciona uma folha de estilo no documento e a preenche com os estilos especificados. 

// 0 argumento styles pode ser uma string ou um objeto. Se for uma string, ela 
// e tratada como o texto da folha de estilo. Se for um objeto, entao cada 
// propriedade define uma regra de estilo a ser adicionada na folha de estilo. Os nomes 
// de propriedade sao seletores e seus valores sao os estilos correspondentes 
function addStyles(styles) { 

// Primeiramente, cria uma nova folha de estilo 
var styleElt, stylesheet; 

if (document.createStyleSheet) {// Se a API do IE estiver definida, a utiliza 
styleSheet = document. createStyleSheetQ; 

} 

else { 

var head = document.getElementsByTagName("head")[0] 

styleElt = document.createElement("style"); // Novo elemento <style> 

head.appendChild(styleElt); // 0 insere em <head> 
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// Agora a nova folha de estilo deve ser a ultima 

styleSheet = document.stylesheets[document.stylesheets.length-i] 


// Agora insere os estilos nela 
if (typeof styles === "string") { 

// 0 argumento e o texto da folha de estilo 
if (styleElt) styleElt.innerHTML = styles; 
else styleSheet.cssText = styles; // A API do IE 

} 

else { 

// 0 argumento e urn objeto de regras individuals para inserir 

for(selector in styles) { 

if (styleSheet.insertRule) { 

var rule = selector + " {" + styles[selector] + "}"; 
styleSheet.insertRule(rule, i++); 

} 

else { 

styleSheet.addRule(selector ) styles[selector], i++); 

} 

} 

} 

} 
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Tratando eventos 


Os programas JavaScript do lado do cliente usam um modelo de programa<jao dirigido por eventos 
assincronos (apresentado na Se^ao 13.3.2). Nesse estilo de programajao, o navegador Web gera um 
evento onde acontece algo interessante no documento, no navegador ou em algum elemento ou ob- 
jeto associado a ele. Por exemplo, o navegador Web gera um evento quando termina de carregar um 
documento, quando o usuario coloca o cursor do mouse sobre um hiperlink ou quando pressiona 
uma tecla no teclado. Se um aplicativo JavaScript se interessa por um tipo de evento em especial, 
pode registrar uma ou mais fun (joes para serem chamadas quando ocorrerem eventos desse tipo. 
Note que isso nao e exclusividade da programajao para Web: todos os aplicativos com interfaces 
graficas com o usuario sao projetados dessa maneira - nao fazem nada ate que algo aconteja (isto e, 
esperam que eventos ocorram) e, entao, respondem. 

Note que a palavra evento em si nao e um termo tecnico que exige definijao. Os eventos sao sim- 
plesmente ocorrencias a respeito das quais seu programa vai ser notificado pelo navegador Web. 
Os eventos nao sao objetos de JavaScript e nao tern qualquer manifestaijao no codigo-fonte de seu 
programa. Existem, evidentemente, diversos objetos relacionados a eventos que aparecem em seu 
codigo-fonte - esses exigent explicajao tecnica. Portanto, vamos iniciar este capitulo com algumas 
definijoes importantes. 

O tipo de evento e uma string que especifica o evento ocorrido. O tipo “mousemove”, por exemplo, 
significa que o usuario moveu o mouse. O tipo “keydown” significa que uma tecla foi pressionada 
no teclado. E o tipo “load” significa que um documento (ou algum outro recurso) acabou de ser car- 
regado da rede. Como o tipo de um evento e apenas uma string, as vezes ele e chamado de nome do 
evento e, de fato, usamos esse nome para identificar o tipo de evento especifico sobre o qual estamos 
falando. Os navegadores Web modernos suportam muitos tipos de evento. A Setjao 17.1 apresenta 
uma visao geral. 

O alvo do evento e o objeto no qual o evento ocorreu ou ao qual o evento esta associado. Quando 
falamos de um evento devemos especificar tanto o tipo como o alvo. Um evento load em um objeto 
Window, por exemplo, ou um evento click em um objeto Element <button>. Os objetos Window, 
Document e Element sao os alvos de evento mais comuns nos aplicativos JavaScript do lado do 
cliente, mas alguns eventos sao disparados em outros tipos de objetos. No Capitulo 18, vamos ver 
um evento readystatechange, que e disparado em um objeto XMLHttpRequest, por exemplo. 
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Uma rotina de tratamento de evento ou ouvinte de evento e uma funqao que manipula ou responde 
a um evento . Os aplicativos registram suas fun (joes de tratamento de evento no navegador Web, 
especificando um tipo e um alvo de evento. Quando ocorre um evento do tipo especificado no 
alvo especificado, o navegador chama a rotina de tratamento. Quando as rotinas de tratamento 
de evento sao chamadas para um objeto, as vezes dizemos que o navegador “ativou”, “disparou” 
ou “despachou” o evento. Ha varias maneiras de registrar rotinas de tratamento de evento e os 
detalhes do registro e da chamada de rotinas de tratamento estao explicados na Seqao 17.2 e na 
Seqao 17.3. 

Um objeto evento e um objeto associado a um evento em especial e contem detalhes sobre esse even¬ 
to. Os objetos evento sao passados como argumento para a funjao de tratamento de evento (exceto 
no IE8 e anteriores, onde as vezes so estao disponfveis por meio da variavel global event). Todos os 
objetos evento tern uma propriedade type que especifica o tipo de evento e uma propriedade target 
que especifica o alvo do evento. (No IE8 e anteriores, use srcElement em vez de target.) Cada tipo 
de evento define um conjunto de propriedades para seu objeto evento associado. O objeto asso¬ 
ciado a um evento de mouse contem as coordenadas do cursor do mouse, por exemplo, e o objeto 
associado a um evento de teclado contem detalhes sobre a tecla que foi pressionada e sobre as teclas 
modificadoras que foram mantidas pressionadas. Muitos tipos de evento definem apenas algumas 
propriedades padrao - como type e target - e nao transmitem muitas outras informaqoes uteis. Para 
esses eventos e a simples ocorrencia deles que importa e nao os detalhes do evento. Este capitulo nao 
tern uma seqao especifica abordando o objeto Event. Em vez disso, explica as propriedades do objeto 
evento ao descrever tipos de evento especificos. Voce pode ler mais sobre o objeto evento sob o nome 
Event na seqao de referenda". 

Propagagao de evento e o processo por meio do qual o navegador decide em quais objetos disparam 
rotinas de tratamento de evento. Para eventos especificos de um objeto (como o evento load no 
objeto Window), nao e exigida propagaqao alguma. Entretanto, quando certos tipos de eventos 
ocorrem nos elementos do documento, eles se propagam ou “borbulham” para cima na arvore do 
documento. Se o usuario coloca o mouse sobre um hiperlink, o evento mousemove e primeiramente 
ativado no elemento <a> que define esse link. Em seguida, e ativado nos elementos conteineres: tal- 
vez um elemento <p>, um elemento <div> e o proprio objeto Document. As vezes e mais conveniente 
registrar uma unica rotina de tratamento de evento em um objeto Document ou em outro elemento 
conteiner, do que registrar rotinas de tratamento em cada elemento individual em que voce esteja 
interessado. Uma rotina de tratamento de evento pode interromper a propagajao de um evento para 
que nao continue a borbulhar e nao dispare rotinas de tratamento nos elementos conteineres. As ro¬ 
tinas de tratamento fazem isso chamando um metodo ou configurando uma propriedade do objeto 
evento. A propagaqao de eventos e abordada em detalhes na Seqao 17.3.6. 


Algumas fontes, incluindo a especificajao HTML5, fazem uma distinpio tecnica entre rotinas de tratamento e ouvintes, 
com base no modo como sao registradas. Neste livro, tratamos os dois termos como sinonimos. 

Os padroes definem uma hierarquia de interfaces de objeto evento para diferentes tipos de eventos. A interface Event 
descreve eventos “puros”, sem detalhes extras. A subinterface MouseEvent descreve os campos adicionais disponiveis nos 
objetos evento passados com eventos de mouse e a subinterface KeyEvent descreve os campos que podem ser usados com 
eventos de teclado, por exemplo. Neste livro, a se^ao de referenda condensa todas essas interfaces de evento comuns em uma 
unica pagina de referenda Event. 
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Em outra forma de propaga^ao de eventos, conhecida como captura de eventos, rotinas de trata- 
mento especialmente registradas nos elementos conteineres tern a oportunidade de interceptar (ou 
“capturar”) eventos antes que sejam enviados para seu destino. A captura de eventos nao e suportada 
pelo IE8 e anteriores; portanto, nao e muito usada. Contudo, a capacidade de capturar ou “pegar” 
eventos de mouse e necessaria ao se processar eventos de arrasto de mouse e vamos ver como fazemos 
isso, no Exemplo 17-2. 

Alguns eventos tern agoespadrdo associadas. Quando ocorre um evento click em um hiperlink, por 
exemplo, a a^ao padrao e o navegador seguir o link e carregar uma nova pagina. As rotinas de trata- 
mento de evento podem impedir essa a^ao padrao, retornando um valor apropriado, chamando um 
metodo do objeto evento ou configurando uma propriedade desse objeto. As vezes, isso se chama 
“cancelar” o evento, o que e abordado na SeQo 17.3.7. 

Com esses termos definidos, podemos agora passar a estudar os eventos e o tratamento de even¬ 
tos em detalhes. A seq;ao a seguir e uma visao geral dos muitos tipos de evento suportados pelos 
navegadores Web. Ela nao aborda tipo algum de evento em detalhes, mas permite que voce saiba 
quais tipos de eventos estao disponfveis para uso em seus aplicativos Web. Essa se?ao contem 
referencias cruzadas para outras partes deste livro que demonstram alguns dos eventos em a?ao. 

Apos a se^ao introdutoria sobre tipos de evento, as duas se^oes seguintes explicam como registrar 
rotinas de tratamento de evento e como o navegador chama essas rotinas. Por causa da evolu^ao 
historica do modelo de evento de JavaScript e por causa da falta de suporte aos padroes do IE antes 
do IE9, esses dois assuntos sao mais complicados do que se poderia esperar. 

O capitulo termina com uma serie de exemplos que demonstram como trabalhar com tipos de even¬ 
tos especfficos. Essas se^oes especificas de tipo de evento abordam: 

• Eventos de carga e disponibilidade de documento 

• Eventos de mouse 

• Eventos de roda do mouse 

• Eventos arrastar e soltar 

• Eventos de tecla 

• Eventos de entrada de texto 

17.1 Tipos de eventos 

Nos primordios da Web, os programadores do lado do cliente tinham apenas um pequeno conjun- 
to de eventos: “load”, “click”, “mouseover” e assemelhados. Esses tipos de evento legados sao bem 
suportados por todos os navegadores e sao o tema da Se$ao 17.1.1. A medida que a plataforma 
Web cresceu e incluiu APIs mais poderosas, o conjunto de eventos ficou maior. Nenhum padrao 
define um conjunto de eventos completo e, quando este livro estava sendo escrito, o numero de 
eventos suportados pelos navegadores estava aumentando rapidamente. Esses novos eventos vem 
de tres fontes: 
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• A especificaijao Level 3 Events do DOM, que apos um longo perfodo de inatividade esta sendo 
ativamente desenvolvida sob os auspfcios do W3C. Os eventos DOM sao abordados na Seqao 
17.1.2. 

• Muitas APIs novas na especificagao HTML5 (e especificanoes subsidiarias relacionadas) de- 
finem novos eventos para coisas como gerenciamento de historico, arrastar e soltar, troca de 
mensagens entre documentos e reproduqao de audio e video. A Segao 17.1.3 fornece uma 
visao geral desses eventos. 

• O advento de dispositivos moveis baseados em toque e habilitados para JavaScript, como o 
iPhone, exigiu a definigao de novos tipos de evento de toque e gesto. Consulte a Segao 17.1.4 
para ver alguns exemplos especificos da Apple. 

Note que muitos desses novos tipos de evento ainda nao sao amplamente implementados e sao 
definidos por padroes que ainda estao em fase de projeto. As subsegoes a seguir fornecem uma visao 
geral dos eventos, mas nao documentam cada um em detalhes. O restante deste capitulo aborda o 
modelo de tratamento de eventos de forma abrangente e contem muitos exemplos de trabalho com 
eventos que sao bem suportados. Se voce entender como trabalha com eventos de modo geral, vai 
conseguir manipular novos tipos de evento facilmente, quando novas APIs da Web forem definidas 
e implementadas. 


Categorias com o evento 

Os eventos podem ser agrupados em algumas categorias gerais e saber quais sao elas o ajudara a enten¬ 
der e organizar a longa lista de eventos a seguir: 

Eventos de entrada dependentes de dispositivo 

Sao os eventos diretamente ligados a um dispositivo de entrada espedfico, como o mouse ou o 
teclado. Eles induem tipos de evento legados, como "mousedown", "mousemove", "mouseup", 
"keydown", "keypress" e"keyup", alem de novos eventos de toque especificos, como"touchmove" 
e"gesturechange". 

Eventos de entrada independentes de dispositivo 

Sao os eventos de entrada que nao estao diretamente ligados a um dispositivo de entrada espedfico. 
0 evento click, por exemplo, indica que um link ou botao (ou outro elemento do documento) foi 
ativado. Isso e feito frequentemente por meio de um clique de mouse, mas tambem poderia ser feito 
pelo teclado ou (em dispositivos sensiveis ao toque) pelo gesto. 0 evento textinput (que ainda nao 
esta amplamente implementado) e uma alternativa independente de dispositivo ao evento keypress 
e suporta entrada de teclado, assim como alternativas como recortar e colar e reconhecimento de 
manuscrito. 

Eventos de interface com o usudrio 

Os eventos de interface com o usuario sao de nivel mais alto, frequentemente em elementos de for¬ 
mulario HTML que definem uma interface com o usuario para um aplicativo Web. Eles induem o 
evento focus (quando um campo de entrada de texto recebe o foco do teclado), o evento change, 
quando o usuario altera o valor exibido por um elemento do formulario, e o evento submit, quando o 
usuario dica em um botao Submit em um formulario. 
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Eventos de mudanqa de estado 

Alguns eventos nao sao disparados diretamente pela atividade do usuario, mas por atividade da rede 
ou do navegador, e indicam algum tipo de cido de vida ou mudanga relacionada a estado. 0 evento 
load, disparado no objeto Window quando o documento esta totalmente carregado, provavelmente 
e o mais usado desses eventos. 0 evento DOMContentLoaded (discutido na Segao 13.3.4) e outro 
desse tipo. 0 mecanismo de gerenciamento de historico de HTML5 (Segao 22.2) dispara o evento 
popstate em resposta ao botao Back do navegador. A API de aplicativo Web off-line de HTML5 (Segao 
20.4) inclui eventos online e off-line. 0 Capitulo 18 mostra como usar urn evento readystatechange 
para ser notificado quando dados solicitados de urn servidor estao prontos. Da mesma forma, a nova 
API para ler arquivos locais selecionados pelo usuario (Segao 22.6.5) utiliza eventos comoloadstart", 
"progress" e'loadend" para notificagao assincrona de andamento de E/S. 

Eventos especificos da API 

Varias APIs para a Web definidas por HTML5 e especificagoes relacionadas induem seus proprio ti- 
pos de evento. A API para arrastar e soltar (Segao 17.7) define eventos como "dragstart", "dragenter", 
"dragover"e"drop". Os aplicativos que querem definir origens de arrasto ou destinos de soltura per- 
sonalizados devem manipular alguns desses eventos. Os elementos <video> e <audio> de HTML5 
(Segao 21.2) definem uma longa lista de tipos de evento associados, como "waiting", "playing", "se¬ 
eking", "volumechange", etc. Esses eventos normalmente so tern interesse para aplicativos Web que 
querem definir controles personalizados para reprodugao de video ou audio. 

Rotinas de tratamento de cronometros e erro 

As rotinas de tratamento de cronometros e erro (ambas descritas no Capitulo 14) fazem parte do 
modelo de programagao assincrona de JavaScript do lado do cliente e sao semelhantes aos eventos. 
Embora as rotinas de tratamento de cronometros e erro nao sejam discutidas neste capitulo, e util 
considera-las como relacionadas ao tratamento de eventos, e talvez voce ache interessante reler a 
Segao 14.1 e a Segao 14.6 no contexto deste capitulo. 


17.1.1 Tipos de evento legados 

Os eventos que serao mais utilizados em seus aplicativos Web geralmente sao os que ja existem ha 
mais tempo e sao universalmente suportados: eventos para lidar com mouse, teclado, formularios 
HTML e o objeto Window. As segoes a seguir explicam muitos detalhes importantes sobre esses 
tipos de eventos. 

17.1.1.1 Eventos de formulario 

Os formularios e hiperlinks foram os primeiros elementos de uma pagina Web a aceitar scripts, re- 
montando aos primordios da Web e de JavaScript. Isso significa que os eventos de formulario sao um 
dos mais estaveis e bem suportados entre todos os tipos de evento. Os elementos <form> disparam 
eventos submit quando o formulario e enviado, e eventos reset quando o formulario e redefinido. 
Elementos de formulario do tipo botao (inclusive botoes de opgao e caixas de selegao) disparam 
eventos click quando o usuario interage com eles. Os elementos de formulario que mantem al¬ 
gum tipo de estado geralmente disparam eventos change quando o usuario muda o estado deles, 
inserindo texto, selecionando um item ou marcando uma caixa. Para campos de entrada de texto, 
um evento change so e disparado depois que o usuario terminou de interagir com um elemento do 
formulario e pressionou a tecla Tab ou deu um clique para mover o foco para outro elemento. Os 
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elementos de formulario respondem as mudan^as de foco do teclado disparando eventos focus e 
blur, quando recebem e perdem o foco. 

Esses eventos relacionados a formularios sao abordados com mais detalhes na Se^ao 15.9.3. Contu- 
do, sao necessarios mais alguns comen tarios. 

Os eventos submit e reset tern a^oes padrao que podem ser canceladas por rotinas de tratamento de 
evento, e alguns eventos click tambem tern. Os eventos focus e blur nao borbulham, mas todos os 
outros eventos de formulario, sim. O IE define eventos focusin e focusout que borbulham, como 
uma alternativa util a focus e blur. A biblioteca j Query (consulte o Capitulo 19) Simula eventos fo¬ 
cusin e focusout para navegadores que nao os suportam, e a especifica^ao Level 3 Events do DOM 
tambem os esta padronizando. 

Por fim, note que outros navegadores (que nao o IE) disparam um evento de entrada em <textarea> 
e outros elementos de formulario para entrada de texto, quando o usuario insere texto (por meio 
do teclado ou pela opera?ao de recortar e colar) no elemento. Ao contrario do evento change, esses 
eventos de entrada sao disparados para cada inserijao. Infelizmente, o objeto evento de um evento 
de entrada nao especifica qual texto foi inserido. (O novo evento textinput, descrito posteriormente, 
sera uma alternativa util a esse evento.) 

17.1.1.2 Eventos dejanela 

Os eventos de janela representam ocorrencias relacionadas a propria janela do navegador, em vez de 
a qualquer conteudo especifico do documento exibido dentro da janela. (No entanto, para alguns 
desses eventos, um evento de mesmo nome pode ser ativado em elementos do documento.) 

O evento load e o mais importante deles: ele e disparado quando um documento e todos os seus 
recursos externos (como imagens) sao totalmente carregados e exibidos para o usuario. O evento 
load foi discutido no Capitulo 13. DOMContentLoaded e readystatechange sao alternativas ao 
evento load: eles sao disparados mais cedo, quando o documento e seus elementos estao prontos 
para manipulaQo, mas antes que os recursos externos estejam totalmente carregados. A Se^ao 17.4 
tern exemplos desses eventos relacionados ao carregamento de documentos. 

O evento unload e o oposto de load: ele e disparado quando o usuario esta saindo de um documen¬ 
to. Uma rotina de tratamento de evento unload poderia ser usada para salvar o estado do usuario, 
mas nao pode ser usada para cancelar a navega?ao. O evento beforeunload e semelhante a unload, 
mas oferece a oportunidade de pedir para que o usuario confirme se realmente deseja sair de sua 
pagina Web. Se uma rotina de tratamento para beforeunload retornar uma string, essa string vai ser 
exibida para o usuario em um dialogo de confirmaQo, antes que a nova pagina seja carregada - e o 
usuario tera a oportunidade de cancelar a navega^ao e continuar em sua pagina. 

A propriedade onerror do objeto Window e parecida com uma rotina de tratamento de evento, sen- 
do disparada em resposta a erros de JavaScript. Contudo, nao e uma verdadeira rotina de tratamento 
de evento, pois e chamada com argumentos diferentes. Consulte a Se^ao 14.6 para ver os detalhes. 

Elementos individuals do documento, como os elementos <img>, tambem podem registrar rotinas 
de tratamento para eventos load e error. Eles sao disparados quando um recurso externo (a imagem, 
por exemplo) esta totalmente carregado ou quando ocorre um erro que impede seu carregamento. 
Alguns navegadores tambem suportam (e HTML5 padroniza) um evento abort, o qual e disparado 
quando uma imagem (ou outro recurso da rede) deixa de ser carregada porque o usuario interrom- 
peu o processo de carregamento. 
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Os eventos focus e blur, descritos anteriormente para elementos de formulario, tambem sao usados 
como eventos Window: eles sao disparados em uma janela quando essa janela do navegador recebe 
ou perde o foco de teclado do sistema operacional. 

Por fim, os eventos resize e scroll sao disparados em um objeto Window quando o usuario redimen- 
siona ou rola a janela do navegador. Os eventos scroll tambem podem ser disparados em qualquer 
elemento do documento que possa rolar, como aqueles com a propriedade overflow de CSS (Se^ao 
16.2.6) configurada. O objeto evento passado para as rotinas de tratamento de evento resize e scroll 
e apenas um objeto Event normal e nao tern propriedades que especifiquem quanto redimensiona- 
mento ou rolagem ocorreu - voce pode determinar o tamanho da nova janela e a posi^ao da barra de 
rolagem usando as tecnicas mostradas na Se^ao 15.8. 


17.1.1.3 Eventos de mouse 

Os eventos de mouse sao gerados quando o usuario move o mouse ou da um clique em um do¬ 
cumento. Esses eventos sao disparados no elemento mais profundamente aninhado sobre o qual 
o cursor do mouse esta, mas borbulham para cima no documento. O objeto evento passado para 
rotinas de tratamento de evento de mouse define propriedades que descrevem a posi?ao e o esta- 
do do botao do mouse e tambem especificam se qualquer tecla modificadora estava pressionada 
quando o evento ocorreu. As propriedades clientX e clientY especificam a posi?ao do mouse em 
coordenadas da janela. As propriedades button e which especificam qual botao do mouse (se hou- 
ve) foi pressionado. (Contudo, consulte a pagina de referenda de Event, pois essas propriedades 
sao diffceis de usar de forma portavel.) As propriedades altKey, ctrlKey, metaKey e shiftKey sao 
conflguradas como true quando as teclas modiflcadoras correspondentes do teclado estao pres- 
sionadas. E para eventos click, a propriedade detail especifica se e um clique simples, duplo ou 
triplo. 

O evento mousemove e disparado sempre que o usuario move ou arrasta o mouse. Esses even¬ 
tos ocorrem frequentemente, de modo que as rotinas de tratamento de mousemove nao devem 
disparar tarefas que utilizam muito poder de computa^ao. Os eventos mousedown e mouseup 
sao disparados quando o usuario pressiona e solta um botao do mouse. Registrando uma rotina 
de tratamento de mousedown que registre uma rotina de tratamento de mousemove, voce pode 
detectar e responder a arrastos do mouse. Fazer isso corretamente envolve a capacidade de cap- 
turar eventos de mouse para que se continue a receber eventos mousemove mesmo quando o 
mouse tiver sido retirado do elemento em que come^ou. A Se$ao 17.5 content um exemplo de 
tratamento de arrastos. 

Apos uma sequencia de eventos mousedown e mouseup, o navegador tambem dispara um evento 
click. O evento click foi descrito como um evento de formulario independente de dispositivo, 
mas na verdade e disparado em qualquer elemento do documento e nao apenas em elementos de 
formulario, sendo passado um objeto evento com todos os campos extras relacionados ao mouse 
descritos antes. Se o usuario clicar um botao do mouse duas vezes sucessivamente (dentro de um 
periodo de tempo suficientemente curto), o segundo evento click sera seguido por um evento 
dblclick. Os navegadores em geral exibem um menu de contexto quando o botao direito do 
mouse e clicado. Eles costumam disparar um evento contextmenu antes de exibir o menu e, se 
voce cancelar o evento, pode impedir a exibifao do menu. Essa tambem e uma maneira facil de 
ser notificado de cliques do botao direito do mouse. 




440 Parte II JavaScript do lado do cliente 


Quando o usuario move o mouse sobre um novo elemento, o navegador dispara um evento 
mouseover nesse elemento. Quando o mouse sai de um elemento, o navegador dispara um evento 
mouseout nesse elemento. Para esses eventos, o objeto evento vai ter uma propriedade relate- 
dTarget que especifica o outro elemento envolvido na transiqao. (Consulte a pagina de referenda 
de Event para ver a equivalente do IE para a propriedade relatedTarget.) Os eventos mouseover 
e mouseout borbulham como todos os eventos de mouse descritos aqui. Muitas vezes isso e in- 
conveniente, pois quando uma rotina de tratamento de mouseout e disparada, e precise verificar 
se o mouse realmente saiu do elemento em que voce esta interessado ou se apenas mudou de um 
filho do elemento para outro. Por isso, o IE suporta versoes desses eventos que nao borbulham, 
conhecidas como mouseenter e mouseleave. A jQuery Simula o suporte para esses eventos em 
navegadores que nao sao o IE (consulte o Capftulo 19) e a especificaqao Level 3 Events do DOM 
os padroniza. 

Quando o usuario gira a roda do mouse, os navegadores disparam um evento mousewheel (ou, 
no Firefox, um evento DOMMouseScroll). O objeto evento passado com esses eventos contem 
propriedades que especificam o quanto e em qual direqao a roda girou. A especificaqao Level 3 
Events do DOM esta padronizando um evento wheel multidimensional mais geral que, se for 
implementado, vai substituir mousewheel e DOMMouseScroll. ASeqao 17.6 contem um exem- 
plo de evento mousewheel. 

17.1.1.4 Eventos detedado 

Quando o navegador Web tern foco de teclado, gera eventos sempre que o usuario pressiona ou solta 
uma tecla no teclado. Entretanto, os atalhos de teclado que tern significado para o sistema operacio- 
nal ou para o proprio navegador sao frequentemente “consumidos” pelo sistema operational ou pelo 
navegador e podem nao ser visfveis para as rotinas de tratamento de evento de JavaScript. Os eventos 
de teclado sao disparados no elemento do documento que tern o foco de teclado e borbulham para 
cima no documento e na janela. Se nenhum elemento tern o foco, os eventos sao disparados dire- 
tamente no documento. As rotinas de tratamento de evento de teclado recebem um objeto evento 
com um campo keyCode que especifica a tecla pressionada ou solta. Alem de keyCode, o objeto evento 
de eventos de tecla tambem tern altKey, ctrlKey, metaKey e shiftKey, que descrevem o estado das 
teclas modificadoras do teclado. 

Os eventos de teclado keydown e keyup sao de baixo nivel: eles sao disparados quando uma tecla 
(mesmo uma tecla modificadora) e pressionada ou solta. Quando um evento keydown gera um 
caractere imprimrvel, um evento keypress adicional e disparado apos keydown, mas antes de keyup. 
(No caso de uma tecla mantida pressionada ate que ele se repita, pode haver muitos eventos keypress 
antes do evento keyup.) keypress e um evento de texto de nivel mais alto e seu objeto evento especi¬ 
fica o caractere gerado e nao a tecla pressionada. 

Os eventos keydown, keyup e keypress sao suportados por todos os navegadores, mas existem alguns 
problemas de interoperabilidade, pois os valores da propriedade keyCode do objeto evento nunca 
foram padronizados. A especificaqao Level 3 Events do DOM, descrita a seguir, tenta tratar desses 
problemas de interoperabilidade, mas ainda nao foi implementada. A Seqao 17.9 contem um exem- 
Plode tratamento de eventos keydown e a Seqao 17.8 contem um exemplo de processamento de 
eventos keypress. 
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17.1.2 Eventos DOM 

A especificaqao Level 3 Events do DOM esteve sendo desenvolvida pelo W3C por quase uma 
decada. Quando este livro estava sendo escrito, estava passando por uma revisao significativa para 
estar de acordo com a realidade dos navegadores modernos e finalmente atingir o estagio de “do- 
cumento de trabalho final” da padronizaqao. Ela padroniza muitos dos eventos legados descritos 
anteriormente e acrescenta alguns novos, descritos aqui. Esses novos tipos de evento ainda nao sao 
muito suportados, mas espera-se que os fornecedores de navegador os implementem quando o 
padrao for flnalizado. 

Conforme mencionado, a especificaqao Level 3 Events do DOM padroniza os eventos focusin e fo- 
cusout como alternativas que borbulham aos eventos focus e blur, padronizando tambem os eventos 
mouseenter e mouseleave como alternativas que nao borbulham aos eventos mouseover e mouseout. 
Essa versao do padrao tambem desaprova varios tipos de evento definidos pelo Level 2, mas que 
nunca foram amplamente implementados. Os navegadores ainda podem gerar eventos como DO- 
MActivate, DOMFocusIn e DOMNodelnserted, mas eles nao sao mais obrigatorios e nao estao 
documentados neste livro 3 . 

A novidade na especificaqao Level 3 Events do DOM e o suporte padronizado para rodas de mouse 
bidimensionais por meio do evento wheel e um suporte melhor para eventos de entrada de texto, 
com um evento textinput e um novo objeto KeyboardEvent, que e passado como argumento para 
rotinas de tratamento de eventos keydown, keyup e keypress. 

Uma rotina de tratamento para um evento wheel recebe um objeto evento com todas as proprie- 
dades de evento de mouse normais e tambem propriedades deltaX, deltaY e deltaZ que informam 
a rotaqao em torno de tres eixos diferentes da roda do rr louse. (A maioria das rodas de mouse e 
unidimensional ou bidimensional e nao utiliza deltaZ.) Consulte a Seqao 17.6 para saber mais sobre 
eventos mousewheel. 

A especificaqao Level 3 Events do DOM define o evento keypress, descrito anteriormente, mas o 
desaprova em favor de um novo evento chamado textinput. Em vez de um valor de keyCode nume- 
rico diffcil de usar, o objeto evento passado para uma rotina de tratamento de evento textinput tern 
uma propriedade data que especifica a string de texto que foi inserida. O evento textinput nao e 
especifico do teclado: ele e disparado quando ocorre entrada de texto, seja via teclado, operaQo de 
recortar e colar, arrastar e soltar e assim por diante. A especificaqao define uma propriedade input - 
Method no objeto evento e um conjunto de constantes representando diferentes tipos de entrada de 
texto (teclado, operaqao de colar ou soltar, reconhecimento de manuscrito ou voz, etc.). Quando 
este livro estava sendo escrito, o Safari e o Chrome suportavam uma versao desse evento usando o 
nome generico mista textinput. Seu objeto evento inclui a propriedade data, mas nao a propriedade 
inputMethod. A Seqao 17.8 content um exemplo que utiliza esse evento textinput. 

Esse novo padrao DOM tambem simplifica os eventos keydown, keyup e keypress, adicionando 
novas propriedades key e char no objeto evento. Essas duas propriedades sao strings. Para eventos de 
tecla que geram caracteres imprimiveis, key e char serao iguais ao texto gerado. Para teclas de con- 
trole, a propriedade key sera uma string como “Enter”, “Delete” ou “Left”, identificando a tecla. A 
propriedade char sera null ou, para teclas de controle - como Tab, que tern um codigo de caractere 


3 O unico evento em uso comum contendo “DOM” em seu nome e DOMContentLoaded. Esse evento foi introduzido 
pelo Mozilla e nunca fez parte do padrao Events do DOM. 
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a string gerada pela tecla. Quando este livro estava sendo escrito, navegador algum suportava essas 
propriedades key e char, mas o Exemplo 17-8 usara a propriedade key se e quando for implementada. 


17.1.3 Eventos HTML5 

A HTML5 e padroes relacionados definem varias APIs novas para aplicativos Web (consulte o Ca- 
pftulo 22). Muitas dessas APIs definem eventos. Esta se^ao lista e descreve de forma sucinta esses 
eventos HTML5 e de aplicativo Web. Alguns deles estao prontos para serem usados agora e sao 
explicados com mais detalhes em outra parte do livro. Outros ainda nao sao amplamente implemen- 
tados e nao sao documentados em detalhes. 

Um dos recursos de HTML muito anunciados e a inclusao de elementos <audio> e <video> para 
reprodu^ao de som e video. Esses elementos tern uma longa lista de eventos disparados para enviar 
notifica^oes sobre eventos de rede, status do buffer de dados e estado da reproduqao: 


canplay 

loadeddata 

playing 

stalled 

canplaythrough 

loadedmetadata 

progress 

suspend 

durationchange 

loadstart 

ratechange 

timeupdate 

emptied 

pause 

seeked 

volumechange 

ended 

play 

seeking 

waiting 


Esses eventos de midia recebem um objeto evento normal sem propriedades especiais. Contudo, a 
propriedade target identifica o elemento <audio> ou <video> e esse elemento tern muitas proprieda¬ 
des e metodos relevantes. Consulte a Secjao 21.2 para ver mais detalhes sobre esses elementos, suas 
propriedades e seus eventos. 

A API de arrastar e soltar de HTML5 permite que os aplicativos JavaScript participem em operates 
de arrastar e soltar baseadas no sistema operational, transferindo dados entre aplicativos Web e apli¬ 
cativos nativos. A API define os sete tipos de evento a seguir: 

dragstart drag dragend 

dragenter dragover dragleave 

drop 

Esses eventos de arrastar e soltar sao disparados com um objeto evento como aqueles enviados com 
eventos de mouse. Uma propriedade adicional, dataTransfer, contem um objeto DataTransfer que 
contem informa0es sobre os dados que estao sendo transferidos e os formatos nos quais estao dispo- 
niveis. A API de arrastar e soltar de HTML5 esta explicada e demonstrada na Se^ao 17.7. 

HTML5 define um mecanismo de gerenciamento de historico (Se?ao 22.2) que permite aos 
aplicativos Web interagir com os botoes Back e Forward do navegador. Esse mecanismo envolve 
eventos chamados hashchange e popstate. Sao eventos de notifica^ao de ciclo de vida, como load 
e unload, e sao disparados no objeto Window, em vez de em qualquer elemento individual do 
documento. 

HTML5 define muitos recursos novos para formularios HTML. Alem de padronizar o evento de 
entrada de formulario, descrito anteriormente, HTML5 tambem define um mecanismo de vali- 
da^ao de formulario, o qual inclui um evento invalid, disparado nos elementos de formulario cuja 
valida?ao falhou. 
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Contudo, os fornecedores de navegador, fora o Opera, tem demorado para implementar os novos 
recursos e eventos de formulario de HTML5, e este livro nao os aborda. 

HTML5 inclui suporte para aplicativos Web off-line (consulte a Se^ao 20.4) que podem ser insta- 
lados de forma local em uma cache de aplicativos, para que possam ser executados mesmo quando 
o navegador estiver off-line (como acontece quando um dispositivo movel esta fora do alcance da 
rede). Os dois eventos mais importantes associados a isso sao off-line e online: eles sao disparados no 
objeto Window quando o navegador perde ou obtem uma conexao de rede. Varios eventos adicio- 
nais sao definidos para fornecer notifica^ao de andamento de download de aplicativo e atualiza^oes 
da cache de aplicativo: 

cached checking downloading error 

noupdate obsolete progress updateready 

Varias APIs novas de aplicativo Web utilizam um evento message para comunica?ao assfncrona. 
A API Cross-Document Messaging (Se^ao 22.3) permite que scripts em um documento de um 
servidor troquem mensagens com scripts em um documento de outro servidor. Isso contorna as 
limita^oes da polftica da mesma origem (Sefao 13.6.2) de maneira segura. Cada mensagem enviada 
dispara um evento message no objeto Window do documento receptor. O objeto evento passado 
para a rotina de tratamento inclui uma propriedade data com o conteudo da mensagem, assim como 
diretivas source e origin identificando o remetente. O evento message e usado de maneiras similares 
para comunica^ao com Web Workers (Sefao 22.4) e para comunica^ao em rede via Server-Sent 
Events (Se^ao 18.3) e WebSockets (Se^ao 22.9). 

HTML5 e padroes relacionados definem alguns eventos que sao disparados em objetos que nao sao 
janelas, documentos e elementos do documento. A versao 2 da especificafao XMLHttpRequest, as¬ 
sim como a especificacjao File API, define uma serie de eventos que monitoram o andamento de E/S 
assfncrona. Elas disparam eventos em um objeto XMLHttpRequest ou FileReader. Cada opera^ao 
de leitura comeqa com um evento loadstart, seguido de eventos progress e um evento loadend. Alem 
disso, cada operaqao termina com um evento load, error ou abort imediatamente antes do evento 
loadend final. Consulte a Secjao 18.1.4 e a Se^ao 22.6.5 para ver os detalhes. 

Por fim, HTML5 e padroes relacionados definem alguns tipos diversos de evento. A API Web Sto¬ 
rage (Se^ao 20.1) define um evento storage (no objeto Window) que fornece notificapio sobre al- 
tera^oes em dados armazenados. HTML5 tambem padroniza os eventos beforeprint e afterprint, 
originalmente introduzidos pela Microsoft no IE. Conforme seus nomes implicam, esses eventos 
sao disparados em um objeto Window imediatamente antes e imediatamente depois que seu docu¬ 
mento e impresso e oferecem uma oportunidade para adicionar ou remover conteudo, como a data 
e a hora em que o documento foi impresso. (Esses eventos nao devem ser usados para alterar a apre- 
senta?ao de um documento para impressao, pois ja existem tipos de mfdia CSS para esse proposito.) 

17.1.4 Eventos touchscreen e mobile 

A ampla ado?ao de dispositivos moveis poderosos, especialmente aqueles com telas sensfveis 
ao toque, tem exigido a criapio de novas categorias de eventos. Em muitos casos, os eventos 
touchscreen sao mapeados nos tipos de evento tradicionais, como click e scroll. Mas nem toda 
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interaqao com uma interface com o usuario com tela sensivel ao toque Simula um mouse e nem 
todos os toques podem ser tratados como eventos de mouse. Esta seqao explica de forma sucinta 
os eventos de gesto e toque gerados pelo Safari ao ser executado em dispositivos iPhone e iPad da 
Apple e tambem aborda o evento orientationchange gerado quando o usuario gira o dispositivo. 
Quando este livro estava sendo escrito nao havia padroes para esses eventos, mas o W3C tinha 
comeqado a trabalhar em uma “Especificaqao de Eventos de Toque” que utilizava o evento de 
toque da Apple como ponto de partida. Esses eventos nao estao documentados na seqao de refe¬ 
renda deste livro, mas e possivel encontrar mais informaqoes no Apple Developer Center {http:// 
developer, apple, com/). 

O Safari gera eventos de gesto para gestos de mudanqa de escala e rotaqao feitos com dois dedos. O 
evento gesturestart e disparado quando o gesto comeqa e gestureend e disparado quando ele termina. 
Entre esses dois eventos ha uma sequencia de eventos gesturechange que monitoram o progresso do 
gesto. O objeto evento enviado com esses eventos tern propriedades numericas scale e rotation. A 
propriedade scale e a relaqao entre a distancia atual entre os dois dedos e a distancia inicial entre 
eles. Um gesto de “empurrar para fechar” tern um valor de scale menor do que 1.0 e um gesto de 
“empurrar para abrir” tern um valor de scale maior do que 1.0. A propriedade rotation e o angulo 
de rotaqao do dedo desde o irn'cio do evento. Ela e informada em graus, com valores positivos indi- 
cando rotaqao no sentido horario. 

Os eventos de gesto sao de alto nfvel e notificam sobre um gesto que ja foi interpretado. Se qui- 
ser implementar seus proprios gestos personalizados, voce pode receber eventos de toque de baixo 
nivel. Quando um dedo toca a tela, um evento touchstart e disparado. Quando o dedo se move, 
e disparado um evento touchmove. E quando o dedo e levantado da tela, e disparado um evento 
touchend. Ao contrario dos eventos de mouse, os eventos de toque nao informam diretamente as 
coordenadas do toque. Em vez disso, o objeto enviado com um evento de toque tern uma proprieda¬ 
de changedTouches. Essa propriedade e um objeto semelhante a um array cujos elementos descrevem 
cada um a posiqao de um toque. 

O evento orientationchanged e disparado no objeto Window por dispositivos que permitem ao 
usuario girar a tela do modo retrato para o modo paisagem. O objeto passado com um evento 
orientationchanged nao e util em si. Contudo, no Safari movel, a propriedade orientation do objeto 
Window fornece a orientaqao atual como um dos numeros 0, 90, 180 ou -90. 

17.2 Registrando rotinas de tratamento de evento 

Existem duas maneiras basicas de registrar rotinas de tratamento de evento. A primeira, dos 
primordios da Web, e configurar uma propriedade no objeto ou elemento do documento alvo 
do evento. A segunda tecnica, mais recente e mais geral, e passar a rotina de tratamento para um 
metodo ou elemento do objeto. Para complicar as coisas, existem duas versoes de cada tecnica. 
Voce pode configurar uma propriedade de tratamento de evento em codigo JavaScript ou, para 
elementos do documento, pode configurar o atributo correspondente diretamente em HTML. 
Para registro de rotina de tratamento por meio de chamada de metodo, existe um metodo pa- 
drao, chamado addEventListenerQ, que e suportado por todos os navegadores, exceto o IE8 e 
anteriores, e um metodo diferente, chamado attachEventQ, para todas as versoes do IE anteriores 
ao IE9. 
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17.2.1 Configurando propriedades de tratamento de evento 

O modo mais simples de registrar uma rotina de tratamento de evento e configurar uma propriedade 
do alvo do evento na funcao de tratamento de evento desejada. Por conven^ao, as propriedades de 
rotina de tratamento de evento tern nomes que consistem na palavra “on” seguida por um nome de 
evento: onclick, onchange, onload, onmouseover, etc. Note que esses nomes de propriedade diferen- 
ciam letras maiusculas e minusculas e sao escritos com todas as letras minusculas, mesmo quando o 
tipo de evento (como “readystatechange”) consiste em varias palavras. Aqui estao dois exemplos de 
registro de rotina de tratamento de evento: 

// Configura a propriedade onload do objeto Window em uma funcao. 

// A funcao e a rotina de tratamento de evento: ela e chamada quando o documento e 
// carregado. 

window.onload = functionQ { 

// Pesquisa um elemento <form> 

var elt = document.getElementById("shipping_address"); 

// Registra uma funqao de tratamento de evento que vai ser chamada 
// imediatamente antes do envio do formulario. 
elt.onsubmit = functionQ { return validate(this); } 

} 

Essa tecnica de registro de rotina de tratamento de evento funciona em todos os navegadores para 
todos os tipos de evento normalmente usados. Em geral, todas as APIs Web amplamente implemen- 
tadas que definem eventos permitem o registro de rotinas de tratamento por meio da configura^ao 
de propriedades. 

A desvantagem das propriedades de rotina de tratamento de evento e que sao projetadas com a 
suposi^ao de que os alvos de evento vao ter no maximo uma rotina de tratamento para cada tipo 
de evento. Se estiver escrevendo codigo de biblioteca para uso em documentos arbitrarios, e melhor 
registrar rotinas de tratamento de evento usando uma tecnica (como addEventListenerQ) que nao 
modifique ou sobrescreva qualquer rotina de tratamento registrada anteriormente. 

17.2.2 Configurando atributos de rotina de tratamento de evento 

As propriedades de rotina de tratamento de evento de um elemento do documento tambem podem 
ser configuradas como atributos na marca^ao HTML correspondente. Se isso e feito, o valor do atri- 
buto deve ser uma string de codigo JavaScript. Esse codigo deve ser o corpo da funcao de tratamento 
de evento e nao uma declara?ao de funcao completa. Isto e, seu codigo de tratamento de evento 
HTML nao deve ser circundado por chaves e prefixado com a palavra-chave function. Por exemplo: 
cbutton onclick="alert(’Thank you’);">Click Here</button> 

Se um atributo de rotina de tratamento de evento HTML content varias instru^oes JavaScript, voce 
deve lembrar-se de separar essas instructes com pontos e virgulas ou decompor o valor do atributo 
em varias linhas. 

Alguns tipos de evento sao direcionados ao navegador como um todo, em vez de a qualquer ele¬ 
mento em especial do documento. Em JavaScript, as rotinas de tratamento para esses eventos sao 
registradas no objeto Window. Em HTML, as colocamos na marca^ao <body>, mas o navegador as 
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registra no objeto Window. A seguir esta a lista completa dessas rotinas de tratamento de evento, 
conforme definidas pela versao preliminar da especifica^ao HTML5: 
onafterprint onfocus ononline onresize 

onbeforeprint onhashchange onpagehide onstorage 

onbeforeunload onload onpageshow onundo 

onblur onmessage onpopstate onunload 

onerror onoffline onredo 

Quando se especifica uma string de codigo JavaScript como valor de um atributo de rotina de trata¬ 
mento de evento HTML, o navegador converte a string em uma funpio com a seguinte aparencia: 
function(event) { 
with(document) { 

with(this.form || {}) { 
with(this) { 

/* seu codigo aqui */ 

} 

} 


} 


} 


Se o navegador suporta ES5, a funpio e definida no modo nao restrito (consulte a Sepio 5.7.3). 
Vamos ver mais sobre o argumento event e as instrupies with quando considerarmos a chamada de 
rotina de tratamento de evento, na Sepio 17.3. 

Um estilo comum em programapio no lado do cliente envolve manter o conteudo HTML separado 
do comportamento JavaScript. Os programadores que seguem essa disciplina se abstem de (ou pelo 
menos evitam) atributos de rotina de tratamento de evento HTML, pois misturam JavaScript e 
HTML diretamente. 


17.2.3 addEventListener() 

No modelo de evento padrao suportado por todos os navegadores, menos o IE8 e anteriores, qual- 
quer objeto que possa ser um alvo de evento - isso inclui os objetos Window e Document e todos os 
objetos Element do documento - define um metodo chamado addEventListenerQ que pode ser usa- 
do para registrar uma rotina de tratamento de evento para esse alvo. addEventListenerQ recebe tres 
argumentos. O primeiro e o tipo de evento para o qual a rotina de tratamento esta sendo registrada. 
O tipo de evento (ou nome) e uma string e nao deve incluir o prefixo “on”, utilizado ao se configurar 
propriedades de tratamento de evento. O segundo argumento de addEventListenerQ e a funpio que 
deve ser chamada quando o tipo de evento especificado ocorrer. O ultimo argumento de addEven¬ 
tListenerQ e um valor booleano. Normalmente, voce vai passar false para esse argumento. Se, em 
vez disso, voce passar true, sua funpio sera registrada como uma rotina de tratamento de evento 
de captura e sera chamada em uma fase diferente do envio do evento. Vamos abordar a captura de 
eventos na Sepio 17.3.6. Deveria ser possivel omitir o terceiro argumento, em vez de passar false, 
sendo que a especificapio eventualmente pode mudar para permitir isso, mas quando este livro esta- 
va sendo escrito, omitir esse argumento dava erro em alguns navegadores. 

O codigo a seguir registra duas rotinas de tratamento para o evento click em um elemento <button>. 
Note as diferenpis entre as duas tecnicas utilizadas: 

<button id="mybutton">Click me</button> 
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var b = document.getElementById("mybutton"); 

b.onclick = functionQ { alert ("Thanks for clicking me!"); }; 

b.addEventListener("click", functionQ { alert("Thanks again!"); }, false); 

</script> 

Chamar addEventListenerQ com “click” como primeiro argumento nao afeta o valor da proprieda- 
de onclick. No codigo anterior, um clique no botao vai gerar duas caixas de dialogo alertQ. Mais 
importante, voce pode chamar addEventListenerQ varias vezes para registrar mais de uma fun^ao 
de tratamento para o mesmo tipo de evento no mesmo objeto. Quando ocorre um evento em um 
objeto, todas as rotinas de tratamento registradas para esse tipo de evento sao chamadas, na ordem 
em que foram registradas. Chamar addEventListenerQ mais de uma vez no mesmo objeto com os 
mesmos argumentos nao tern efeito algum - a funpio de tratamento e registrada somente uma vez e 
a chamada repetida nao altera a ordem em que as rotinas de tratamento sao chamadas. 

addEventListenerQ e correlacionada a um metodo removeEventListenerQ que espera os mesmos tres 
argumentos, mas remove uma funQo de tratamento de evento de um objeto, em vez de adiciona-la. 
Frequentemente e util registrar uma rotina de tratamento de evento temporariamente e entao remove-la 
logo depois. Por exemplo, ao receber um evento mousedown, voce poderia registrar rotinas de tratamen¬ 
to de evento de captura temporarias para eventos mousemove e mouseup, para ver se o usuario arrasta o 
mouse. Entao, voce anularia o registro dessas rotinas de tratamento quando o evento mouseup chegasse. 
Nessa situapio, o codigo de remo^ao da rotina de tratamento de evento poderia ser como segue: 

document.removeEventListener("mousemove", handleMouseMove, true); 
document.removeEventListener("mouseup", handleMouseUp, true); 

17.2.4 attachEvent() 

O Internet Explorer, antes do IE9, nao suporta addEventListenerQ e removeEventListenerQ. No IE5 
e posteriores, ele define metodos attachEventQ e detachEventQ similares. 

Os metodos attachEventQ e detachEventQ funcionam como addEventListenerQ e removeEventLis¬ 
tenerQ, com as seguintes exce$oes: 

• Como o modelo de evento do IE nao suporta captura de eventos, attachEventQ e detachE¬ 
ventQ esperam somente dois argumentos: o tipo de evento e afim^ao de tratamento. 

• O primeiro argumento dos metodos do IE e um nome de propriedade de tratamento de even¬ 
to, com o prefixo “on”, em vez do tipo de evento nao prefixado. Por exemplo, passe “onclick” 
para attachEventQ onde voce passaria “click” para addEventListenerQ. 

• attachEventQ permite que a mesma fun^ao de tratamento de evento seja registrada mais de 
uma vez. Quando ocorrer um evento do tipo especificado, a furnjao registrada sera chamada 
tantas vezes quanto foi registrada. 

E comum ver codigo de registro de rotina de tratamento de evento que utiliza addEventListenerQ 
em navegadores que a suportam e, caso contrario, utiliza attachEventQ: 
var b = document.getElementById("mybutton"); 
var handler = functionQ { alert("Thanks!"); }; 
if (b.addEventListener) 

b.addEventListener("click", handler, false); 
else if (b.attachEvent) 

b.attachEvent("onclick", handler); 
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17.3 Chamada de rotina de tratamento de evento 

Quando voce tiver registrado uma rotina de tratamento de evento, o navegador Web vai chama-la 
automaticamente quando ocorrer o tipo de evento determinado no objeto especificado. Esta se<jao 
descreve as chamadas de rotina de tratamento de evento em detalhes, explicando os argumentos da 
rotina de tratamento, o contexto da chamada (o valor de this), o escopo da chamada e o significado 
do valor de retorno de uma rotina de tratamento de evento. Infelizmente, para o IE8 e anteriores, 
alguns desses detalhes sao diferentes dos outros navegadores. 

Alem de descrever como as rotinas de tratamento individuals sao chamadas, esta se<jao tambem 
explica como os eventos se propagam : como um unico evento pode disparar a chamada de varias 
rotinas de tratamento no alvo do evento original e tambem nos elementos conteineres do docu- 
mento. 

17.3.1 Argumento de rotina de tratamento de evento 

As rotinas de tratamento de evento normalmente (existe uma exce^ao, descrita a seguir) sao cha¬ 
madas com um objeto evento como linico argumento. As propriedades do objeto evento fornecem 
detalhes sobre o evento. A propriedade type, por exemplo, especifica o tipo do evento ocorrido. A 
SeQo 17.1 mencionou varias outras propriedades do objeto evento para diversos tipos de evento. 

No IE8 e anteriores, as rotinas de tratamento de evento registradas pela configurafao de uma pro¬ 
priedade nao obtem um objeto evento ao serem chamadas. Em vez disso, o objeto evento e dispo- 
nibilizado por meio da variavel global window.event. Por portabilidade, voce pode escrever rotinas 
de tratamento de evento como a seguinte, para que utilizem window.event se argumento algum for 
fornecido: 

function handler(event) { 

event = event | | window.event; 

// 0 codigo da rotina de tratamento fica aqui 

} 

As rotinas de tratamento de evento registradas com attachEvent() recebem um objeto evento, mas 
tambem podem utilizar window.event. 

Lembre-se, da Secjao 17.2.2, que, quando voce registra uma rotina de tratamento de evento confi- 
gurando um atributo HTML, o navegador converte sua string de codigo JavaScript em uma funijao. 
Os navegadores - menos o IE - constroem uma fun^ao com um unico argumento chamado event. 
O IE constroi uma fun^ao que nao espera argumentos. Se voce usa o identificador event em uma 
funpio assim, esta se referindo a window.event. Em um ou outro caso, as rotinas de tratamento de 
evento HTML podem se referir ao objeto evento como event. 

17.3.2 Contexto de rotina de tratamento de evento 

Quando uma rotina de tratamento de evento e registrada pela configuraQo de uma propriedade, e 
como se voce estivesse definindo um novo metodo no elemento do documento: 
e.onclick = functionQ { /* codigo da rotina de tratamento */ }; 
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Portanto, nao e de surpreender que as rotinas de tratamento de evento sejam chamadas (com uma ex- 
ce^ao relacionada ao IE, descrita a seguir) como metodos do objeto no qual sao definidas. Isto e, dentro 
do corpo de uma rotina de tratamento de evento, a palavra-chave this se refere ao alvo do evento. 


As rotinas de tratamento sao chamadas com o alvo como valor de this, mesmo quando registradas 
com addEventListenerQ. Infelizmente, contudo, isso nao vale para attachEvent(): as rotinas de trata¬ 
mento registradas com attachEvent() sao chamadas como fun^oes e o valor de this e o objeto global 
(Window). E possivel contornar isso com codigo como o seguinte: 

/* 

* Registra a funcao de tratamento especificada para tratar de eventos do tipo 

* especificado no alvo especificado. Carante que a rotina de tratamento seja sempre 

* chamada como um metodo do alvo. 



function addEvent(target, type, handler) { 
if (target.addEventListener) 

target.addEventListener(type, handler, false); 

else 

target.attachEvent("on" + type, 

function(event) { 

// Chama a rotina de tratamento como um metodo do alvo, 
// passando o objeto evento 
return handler.call(target, event); 


Note que as rotinas de tratamento de evento registradas com o uso desse metodo nao podem ser 
removidas, pois a funcao empacotadora passada para attachEventQ nao e mantida em lugar algum 
para ser passada a detachEvent(). 


17.3.3 Escopo de rotina de tratamento de evento 

Assim como todas as funijoes de JavaScript, as rotinas de tratamento de evento tern escopo lexico. 
Elas sao executadas no escopo em que sao definidas, nao no escopo no qual sao chamadas, e podem 
acessar qualquer variavel local desse escopo. (Isso esta demonstrado na funcao addEventQ anterior, 
por exemplo.) 

No entanto, as rotinas de tratamento de evento registradas como atributos HTML sao um caso es¬ 
pecial. Elas sao convertidas em funijoes de nivel superior que tern acesso as variaveis globais, mas nao 
as variaveis locais. Porem, por motivos historicos, elas sao executadas com um encadeamento de es¬ 
copo modificado. As rotinas de tratamento de evento definidas por atributos HTML podem usar as 
propriedades do objeto de alvo, do objeto conteiner <form> (se houver um) e do objeto Document, 
como se fossem variaveis locais. A Se^ao 17.2.2 mostra como uma funcao de tratamento de evento 
e criada a partir de um atributo de rotina de tratamento de evento HTML e o codigo ali e parecido 
com esse encadeamento de escopo modificado, usando instrufoes with. 

Os atributos HTML nao sao lugares naturais para a inclusao de longas strings de codigo e esse 
encadeamento de escopo modificado possibilita atalhos uteis. Voce pode usar tagName, em vez de 
this.tagName. Pode usar getElementByld, em vez de document.getElementByld. E, para elementos do 
documento que estao dentro de um <form>, pode se referir a qualquer outro elemento do formulario 
pela identifica^ao, usando zipcode, por exemplo, em vez de this.form.zipcode. 
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Por outro lado, o encadeamento de escopo modificado das rotinas de tratamento de evento HTML 
e uma fonte de armadilhas, pois as propriedades de cada um dos objetos do encadeamento escon- 
dem as propriedades de mesmo nome no objeto global. O objeto Document define um metodo 
openQ (raramente usado), por exemplo, de modo que uma rotina de tratamento de evento HTML 
que queira chamar o metodo openQ do objeto Window deve escrever window.open explicitamente, 
em vez de open. Ha um problema semelhante (porem mais pernicioso) nos formularios, pois os no- 
mes e identifica^oes dos seus elementos definem propriedades no elemento conteiner do formulario 
(consulte a Seqao 15.9.1). Assim, se um formulario content um elemento com a identifica^ao “loca¬ 
tion”, por exemplo, todas as rotinas de tratamento de evento HTML dentro desse formulario devem 
usar window. location, em vez de location, caso queiram se referir ao objeto Location da janela. 

17.3.4 Valor de retorno de rotina de tratamento 

O valor de retorno de uma rotina de tratamento de evento registrada pela configurafao de uma pro- 
priedade de objeto ou de um atributo HTML as vezes tern significado. Em geral, o valor de retorno 
false diz ao navegador que nao deve executar a atjao padrao associada ao evento. A rotina de trata¬ 
mento onclick de um botao Submit em um formulario, por exemplo, pode retornar false para evitar 
que o navegador envie o formulario. (Isso e util se a entrada do usuario nao passa na validatjao no 
lado do cliente.) Da mesma forma, uma rotina de tratamento onkeypress em um campo de entrada 
pode filtrar entrada de teclado retornando false, caso o usuario digite um caractere inadequado. (O 
Exemplo 17-6 filtra entrada de teclado dessa maneira.) 

O valor de retorno da rotina de tratamento onbeforeunload do objeto Window tambem tern signifi¬ 
cado. Esse evento e disparado quando o navegador esta prestes a navegar para uma nova pagina. Se 
essa rotina de tratamento de evento retornar uma string, ela vai ser exibida em uma caixa de dialogo 
modal que pede para que o usuario confirme se deseja sair da pagina. 

E importante entender que esses valores de retorno so tern significado para rotinas de tratamento 
registradas como propriedades. Vamos ver a seguir que as rotinas de tratamento de evento registradas 
com addEventListenerQ ou attachEventQ devem, em vez disso, chamar o metodo preventDefaultQ 
ou configurar a propriedade returnValue do objeto evento. 

17.3.5 Ordemdechamada 

Um elemento do documento ou outro objeto pode ter mais de uma rotina de tratamento de evento 
registrada para um tipo de evento em especial. Quando ocorre um evento apropriado, o navegador 
deve chamar todas as rotinas de tratamento, seguindo estas regras de ordem de chamada: 

• As rotinas de tratamento registradas pela configuraQo de uma propriedade do objeto ou atri¬ 
buto HTML, se houver, sao sempre chamadas primeiro. 

• As rotinas de tratamento registradas com addEventListenerQ sao chamadas na ordem em que 
foram registradas . 


O padrao Level 2 do DOM deixa a ordem de chamada indefinida, mas todos os navegadores atuais chamam as rotinas de 
tratamento na ordem do registro e a versao draft atual Level 3 do DOM padroniza esse comportamento. 




Capi'tulo 17 Tratando eventos 451 


• As rotinas de tratamento registradas com attachEventQ podem ser chamadas em qualquer 
ordem e seu codigo nao deve depender de chamada sequencial. 

17.3.6 Propaga^ao de eventos 

Quando o alvo de um evento e o objeto Window ou algum outro objeto independente (como XM- 
LHttpRequest), o navegador responde a um evento simplesmente chamando as rotinas de tratamen¬ 
to apropriadas nesse objeto. Contudo, quando o alvo do evento e um objeto Document ou Element 
do documento, a situa^ao e mais complicada. 

Apos as rotinas de tratamento de evento registradas no elemento alvo serem chamadas, a maioria 
dos eventos “borbulha” para cima na arvore DOM. As rotinas de tratamento de evento do pai do 
alvo sao chamadas. Entao, sao chamadas as rotinas de tratamento registradas no avo do alvo. Isso 
continua ate o objeto Document e, entao, ate o objeto Window. A borbulha de eventos oferece uma 
alternativa ao registro de rotinas de tratamento em muitos elementos individuals do documento: 
em vez disso, voce pode registrar uma unica rotina de tratamento em um elemento ascendente 
comum e tratar dos eventos la. Voce poderia registrar uma rotina de tratamento “change” em um 
elemento <form>, por exemplo, em vez de registrar uma rotina de tratamento “change” para cada 
elemento do formulario. 

A maioria dos eventos que ocorrem em elementos do documento borbulha. As exce^oes notaveis sao 
os eventos focus, blur e scroll. O evento load nos elementos do documento borbulha, mas para de 
borbulhar no objeto Document e nao se propaga para o objeto Window. O evento load do objeto 
Window e disparado somente quando o documento inteiro esta carregado. 

A borbulha de eventos e a terceira “fase” da propaga^ao de eventos. A chamada das rotinas de tra¬ 
tamento de evento do objeto alvo em si e a segunda fase. A primeira fase, que ocorre mesmo antes 
que as rotinas de tratamento do alvo sejam chamadas, e denominada fase “de captura”. Lembre-se 
de que addEventListener() recebe um valor booleano como terceiro argumento. Se esse argumento e 
true, a rotina de tratamento de evento e registrada como rotina de captura para a chamada, durante 
essa primeira fase da propaga?ao de eventos. A borbulha de eventos e suportada universalmente: ela 
funciona em todos os navegadores, incluindo o IE, e para todas as rotinas de captura, independente 
de como sejam registradas (a menos que sejam registradas como rotinas de tratamento de evento). 
A captura de eventos, em compara?ao, so funciona com rotinas de tratamento de evento registradas 
com addEventListenerQ quando o terceiro argumento e true. Isso significa que a captura de eventos 
nao esta disponivel no IE antes do IE9 - e, quando este livro estava sendo escrito, nao era uma tec- 
nica usada normalmente. 

A fase de captura da propaga^ao de eventos e como a fase de borbulha ao contrario. As rotinas de 
captura do objeto Window sao chamadas primeiro, em seguida as rotinas de captura do objeto Do¬ 
cument, depois do objeto corpo e assim por diante, descendo a arvore DOM, ate serem chamadas 
as rotinas de captura de evento do pai do alvo do evento. As rotinas de captura de evento registradas 
no alvo do evento em si nao sao chamadas. 

A captura de eventos oferece uma oportunidade de examinar os eventos antes que sejam enviados 
para seus destinos. Uma rotina de tratamento de evento de captura pode ser usada para depura^ao 
ou pode ser usada junto com a tecnica de cancelamento de evento, descrita a seguir, para filtrar 
eventos a fim de que as rotinas de tratamento de evento de destino nunca sejam chamadas. Um uso 
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comum da captura de evento e no tratamento de arrastos do mouse, onde os eventos de movimento 
do mouse precisam ser tratados pelo objeto que esta sendo arrastado e nao os elementos do docu- 
mento sobre os quais e arrastado. Consulte o Exemplo 17-2 para ter uma ideia. 

17.3.7 Cancelamento de evento 

A Setjao 17.3.4 explicou que o valor de retorno das rotinas de tratamento de evento registradas como 
propriedades pode ser usado para cancelar a a<jao padrao do navegador para o evento. Nos navega- 
dores que suportam addEventListenerQ, tambem e possrvel cancelar a a^ao padrao de um evento 
chamando o metodo preventDefaultQ do objeto evento. No IE antes do IE9, no entanto, voce faz 
o mesmo configurando como false a propriedade returnValue do objeto evento. O codigo a seguir 
mostra uma rotina de tratamento de evento fictfcia que utiliza todas as tres tecnicas de cancelamento: 
function cancelHandler(event) { 

var event = event || window.event; // Para IE 

/* Faz algo para tratar do evento aqui */ 

// Agora cancela a acao padrao associada ao evento 

if (event.preventDefault) event.preventDefaultQ; // Tecnica padrao 

if (event.returnValue) event.returnValue = false; // IE 

return false; // Para rotinas de tratamento registradas como propriedades do objeto 

} 

A versao draft do modulo Events do DOM atual define uma propriedade do objeto Event chamada 
defaultPrevented. Ela ainda nao e amplamente suportada, mas a intenijao e que essa propriedade em 
geral seja false, mas se torne true se preventDefaultQ for chamado 5 . 

Cancelar a a?ao padrao associada a um evento e apenas um tipo de cancelamento de evento. 
Tambem podemos cancelar a propaga^ao de eventos. Nos navegadores que suportam addEventLis¬ 
tenerQ, o objeto evento tem um metodo stopPropagationQ que pode ser chamado para impedir 
a continua^ao da propaga?ao do evento. Se existem outras rotinas de tratamento definidas no 
mesmo objeto, o restante dessas rotinas de tratamento ainda sera chamado, mas rotina alguma 
de tratamento de evento em qualquer outro objeto sera chamada apos a chamada de stopPropa¬ 
gationQ. O metodo stopPropagationQ pode ser chamado a qualquer momento durante a propa- 
ga$ao de eventos. Ele funciona durante a fase de captura, no proprio alvo do evento, e durante a 
fase de borbulha. 

Antes do IE9, o IE nao suporta o metodo stopPropagationQ. Em vez disso, o objeto evento do IE 
tem uma propriedade chamada cancelBubble. Configure essa propriedade como true para impedir 
qualquer outra propagaqao. (O IE8 e anteriores nao suportam a fase de captura da propaga^ao de 
eventos, de modo que a borbulha e o unico tipo de propagaqao a ser cancelado.) 

A versao draff atual da especificafao Events do DOM define outro metodo no objeto Event, chama¬ 
do stopImmediatePropagationQ. Assim como stopPropagationQ, esse metodo impede a propagafao 
do evento para qualquer outro objeto. Mas tambem impede a chamada de qualquer outra rotina de 
tratamento de evento registrada no mesmo objeto. Quando este livro estava sendo escrito, alguns 


5 O objeto i 


i da jQuery (consulte o Capltulo 19) 


letodo defaultPi 


: de uma propriedade. 
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navegadores suportavam stopImmediatePropagation() e outros nao. Algumas bibliotecas utilitarias, 
como jQuery e YUI, definem stopImmediatePropagation() de forma independente de plataforma. 

17.4 Eventos de carga de documento 

Agora que ja abordamos os fundamentos do tratamento de eventos de JavaScript, vamos comegar a 
ver com mais detalhes as categorias especfficas de eventos. Iniciamos, nesta segao, com os eventos de 
carga de documentos. 

A maioria dos aplicativos Web precisa de notificagao do navegador Web para saber quando o do¬ 
cumento foi carregado e esta pronto para ser manipulado. O evento load no objeto Window tern 
esse objetivo e foi discutido em detalhes no Capi'tulo 13, que incluiu uma fungao utilitaria on Load () 
no Exemplo 13-5. O evento load nao e disparado ate que um documento e todas as suas imagens 
estejam totalmente carregados. Contudo, e seguro comegar a executar seus scripts depois que o 
documento esta totalmente analisado, mas antes que as imagens sejam baixadas. O tempo de inicia- 
lizagao de seus aplicativos Web pode ser melhorado se voce disparar seus scripts em eventos que nao 
sejam “load”. 

O evento DOMContentLoaded e disparado quando o documento foi carregado e analisado e qual- 
quer script adiado tenha sido executado. Imagens e scripts async ainda podem estar sendo carrega¬ 
dos, mas o documento esta pronto para ser manipulado. (Os scripts adiados e async estao explicados 
na Segao 13.3.1.) Esse evento foi introduzido pelo Firefox e adotado por todos os outros fornecedo- 
res de navegador, inclusive a Microsoft, no IE9. Apesar do “DOM” em seu nome, ele nao faz parte 
do padrao de eventos Level 3 do DOM, mas e padronizado por HTML5. 

Conforme descrito na Segao 13.3.4, a propriedade document. readyState muda quando o documento 
e carregado. No IE, cada mudanga no estado e acompanhada por um evento readystatechange no 
objeto Document, sendo que e possfvel usar esse evento para determinar quando o IE atinge o esta¬ 
do “completo”. HTML5 padroniza o evento readystatechange, mas o dispara imediatamente antes 
do evento load, de modo que nao esta clara a vantagem obtida por receber “readystatechange” em 
vez de “load”. 

O Exemplo 17-1 define uma fungao whenReady() muito parecida com a fungao onLoadQ do Exemplo 
13-5. As fun (joes passadas para whenReadyQ serao chamadas (como metodos do objeto Document) 
quando o documento estiver pronto para ser manipulado. Ao contrario da fungao on Load () anterior, 
whenReadyQ recebe eventos DOMContentLoaded e readystatechange, e utiliza eventos load somente 
como ajuda para navegadores mais antigos que nao suportam os eventos anteriores. Alguns dos 
exemplos a seguir (neste capi'tulo e nos subsequentes) usam essa fungao whenReadyQ. 

Exemplo 17-1 Chamando fungoes quando o documento esta pronto 

* Passa uma funcao para whenReadyQ e ela sera chamada (como um metodo do 

* documento) quando o documento for analisado e estiver pronto para manipulagao. As 

* funcoes registradas sao disparadas pelo primeiro evento 

* DOMContentLoaded, readystatechange ou load que ocorrer. Ouando o documento estiver 

* pronto e todas as funcoes tiverem sido chamadas, qualquer fungao passada para 

* whenReadyQ sera chamada imediatamente. 
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var whenReady = (functionQ {// Esta funqao retorna a funqao whenReady() 

var funcs = []; // As funqoes a serem executadas quando recebermos urn evento 

var ready = false; // Troca para true quando a rotina de tratamento e disparada 

// A rotina de tratamento de evento e chamada quando o documento esta pronto 
function handler(e) { 

// Se ja executamos uma vez, apenas retorna 
if (ready) return; 

// Se foi urn evento readystatechange onde o estado mudou para 

// algo que nao seja "complete", entao ainda nao estamos prontos 

if (e.type === "readystatechange" && document.readyState !== "complete") 

// Executa todas as funcoes registradas. 

// Note que pesquisamos funcs.length a cada vez, no caso de a chamada 
// de uma dessas funqoes fazer com que mais funcoes sejam registradas. 
for(var i = 0; i < funcs.length; i++) 
funcs[i].call(document); 

// Agora configura o flag ready como true e esquece as funqoes 
ready = true; 
funcs = null; 


// Registra a rotina de tratamento de qualquer evento que possamos receber 
if (document.addEventListener) { 

document. addEvent Listener ("DOMContent Loaded", handler, false); 
document.addEventListener("readystatechange", handler, false); 
window.addEventListener("load", handler, false); 

} 

else if (document.attachEvent) { 

document.attachEvent("onreadystatechange", handler); 
window.attachEvent("onload", handler); 


// Retorna a funcao whenReady 
return function whenReady(f) { 

if (ready) f.call(document);// Se ja esta pronto, apenas a executa 
else funcs.push(f); // Caso contrario, a enfileira para depois. 

} 

}()); 


17.5 Eventos de mouse 

Existem muitos eventos relacionados ao mouse. A Tabela 17-1 lista todos eles. Todos os eventos de 
mouse borbulham, exceto “mouseenter” e “mouseleave”. Os eventos click em links e botoes Submit 
tern a^oes padrao que podem ser evitadas. Voce pode cancelar um evento context menu para impe- 
dir a exibi?ao de um menu de contexto, mas alguns navegadores tern op?6es de configura?ao que 
tornam os menus de contexto nao cancelaveis. 
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Tabela 17-1 Eventos de mouse 

Tipo Descrigao 

dick Um evento de m'vel mais alto disparado quando o usuario pressiona e solta um botao do mouse ou"ativa"um elemento de 

algum modo. 

contextmenu Um evento cancelavel disparado quando um menu de contexto esta para ser exibido. Os navegadores atuais exibem menus 
de contexto em cliques do botao direito do mouse, de modo que esse evento tambem pode ser usado como o evento click, 
dbldick Disparado quando o usuario da um clique duplo com o mouse 

mousedown Disparado quando o usuario pressiona um botao do mouse 
mouseup Disparado quando o usuario solta um botao do mouse 

mousemove Disparado quando o usuario move o mouse. 

mouseover Disparado quando o mouse entra em um elemento. relatedTarget (ou -fromElement no IE); especifica de qual 

elemento o mouse esta vindo. 

mouseout Disparado quando o mouse sai de um elemento. relatedTarget (ou toElement no IE); especifica para qual 
elemento o mouse esta indo. 

mouseenter Como"mouseover" mas nao borbulha. Introduzido pelo IE e padronizado em HTML5, mas ainda nao amplamente 
implementado. 

mouseleave Como "mouseout", mas nao borbulha. Introduzido pelo IE e padronizado em HTML5, mas ainda nao amplamente 
implementado. 


O objeto passado para as rotinas de tratamento de evento de mouse tem propriedades clientX e 
clientY que especiftcam as coordenadas do cursor do mouse em relagao a janela conteiner. Para 
converter essa posigao em coordenadas do documento, some os deslocamentos de rolagem da janela 
(consulte o Exemplo 15-8). 

As propriedades altKey, ctrlKey, metaKey e shiftKey especiftcam se varias teclas modificadoras do 
teclado estavam pressionadas quando o evento ocorreu: isso permite distinguir um clique normal de 
um clique com a tecla Shift pressionada, por exemplo. 

A propriedade button especifica qual botao do mouse, se houve, estava pressionado quando o evento 
ocorreu. Entretanto, diferentes navegadores atribuem diferentes valores para essa propriedade, de 
modo que e dififcil usar isso de forma portavel. Consulte a pagina de referenda de Event para ver os 
detalhes. Alguns navegadores so disparam eventos click para cliques com o botao esquerdo. Se preci- 
sar detectar cliques de outros botoes, voce deve usar mousedown e mouseup. O evento contextmenu 
normalmente sinaliza um clique do botao direito, mas, conforme mencionado, pode ser impossivel 
impedir a aparigao de um menu de contexto quando esse evento ocorre. 

O objeto evento de eventos de mouse tem algumas outras propriedades especificas para mouse, mas nao 
sao tao utilizadas quanto essas. Consulte a pagina de referenda de Event para ver uma lista. 

O Exemplo 17-2 mostra uma fungao JavaScript, drag( ), que, quando chamada a partir de uma ro- 
tina de tratamento de evento mousedown, permite que um elemento do documento posicionado de 
forma absoluta seja arrastado pelo usuario. drag() funciona com os modelos de evento do DOM 
e do IE. 
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drag() recebe dois argumentos. O primeiro e o elemento que sera arrastado. Pode ser o elemento no 
qual o evento mousedown ocorreu ou um elemento conteiner (por exemplo, voce poderia permitir 
que o usuario arrastasse sobre um elemento parecido com uma barra de tftulo para mover o elemen¬ 
to conteiner semelhante a uma janela). Em um ou outro caso, contudo, deve ser um elemento do 
documento posicionado de forma absoluta usando o atributo CSS position. O segundo argumento 
e o objeto evento de mousedown que causou o disparo. Aqui esta um exemplo simples que utiliza 
drag(). Ele define um elemento <img> que o usuario pode arrastar se a tecla Shift estiver pressionada: 
<img src="draggable.gif" 

style=”position:absolute; left:100px; top:100px;" 
onmousedown="if (event.shiftKey) drag(this, event);"> 

A fun^ao drag () convene a posi?ao do evento mousedown para coordenadas do documento a fim de 
calcular a distancia entre o cursor do mouse e o canto superior esquerdo do elemento que esta sendo 
movido. Elausa getScrollOffsets() do Exemplo 15-8 para ajudar na conversao de coordenadas. Em 
seguida, drag() registra retinas de tratamento para os eventos mousemove e mouseup que vem apos 
o evento mousedown. A retina de tratamento de mousemove e responsavel por mover o elemento 
do documento e a retina de tratamento de mouseup e responsavel por anular o registro em si e a 
retina de tratamento de mousemove. 

E importante notar que as retinas de tratamento de mousemove e mouseup sao registradas como 
retinas de captura de evento. Isso porque o usuario pode mover o mouse mais rapido do que o ele¬ 
mento do documento pode acompanhar e, se isso acontece, alguns dos eventos mousemove ocorrem 
fora do elemento alvo original. Sem captura, esses eventos nao serao enviados para as retinas de tra- 
tamento corretas. O modelo de evento do IE nao suporta captura como o modelo de evento padrao, 
mas tern um metodo de proposito especial setCaptureQ para capturar eventos de mouse em casos 
como este. O codigo de exemplo mostra como ele funciona. 

Por fim, note que as fun^oes moveHandlerQ e upHandlerQ sao definidas dentro de drag(). Como sao 
definidas nesse escopo aninhado, podem usar os argumentos e as variaveis locais de drag(), o que 
simplifica consideravelmente a implementa^ao. 

Exemplo 17-2 Arrastando elementos do documento 

/** 

* Drag.js: arrasta elementos HTML posicionados de forma absoluta. 

* Este modulo define uma unica fun^ao drag() projetada para ser chamada 

* a partir de uma rotina de tratamento de evento onmousedown. Os eventos mousemove 

* subsequentes vao mover o elemento especificado. Um evento mouseup termina o arrasto. 

* Esta implementa^ao funciona com os modelos de evento padrao e do IE. 

* Ela exige a fun^ao getScrollOffsetsf) de outra parte deste livro. 

* Argumentos: 

* elementToDrag: o elemento que recebeu o evento mousedown ou 

* algum elemento conteiner. Deve estar posicionado de forma absoluta. Seus 

* valores de style.left e style.top vao mudar com base no arrasto 

* do usuario. 

* evento: o objeto Event do evento mousedown. 



Capi'tulo 17 Tratando eventos 457 


function drag(elementToDrag, event) { 

// A posicao inicial do mouse, convertida para coordenadas do documento 
var scroll = getScrollOffsetsQ; // Uma funqao utilitaria de outro lugar 
var startX = event.clientX + scroll.x; 
var startY = event.clientY + scroll.y; 

// A posicao original (em coordenadas do documento) do elemento 
// que sera arrastado. Como elementToDrag esta posicionado de 
// forma absoluta, supomos que seu offsetParent e o corpo do documento. 
var origX = elementToDrag.offsetLeft; 
var origY = elementToDrag.offsetTop; 



// Calcula a distancia entre o evento mousedown e o canto 

// superior esquerdo do elemento. Vamos manter essa distancia quando o mouse se mover, 
var deltaX = startX - origX; 
var deltaY = startY - origY; 


// Registra as rotinas de tratamento de evento que vao responder aos eventos mousemove 
// e ao evento mouseup que vem apos esse evento mousedown, 
if (document.addEventListener) { // Modelo de evento padrao 
// Registra rotinas de captura de evento no documento 
document.addEventListener("mousemove", moveHandler, true); 
document.addEventListener("mouseup", upHandler, true); 

} 

else if (document.attachEvent) { // Modelo de evento do IE para IE5-8 
// No modelo de evento do IE, capturamos eventos chamando 
// setCapture() no elemento para captura-los. 
elementToDrag.setCapture(); 

elementToDrag.attachEvent("onmousemove", moveHandler); 
elementToDrag.attachEvent("onmouseup", upHandler); 

// Trata a perda da captura do mouse como urn evento mouseup. 
elementToDrag. attach Event (''onlosecapture' 1 , upHandler); 


// Tratamos desse evento. Nao permite que mais ninguem o veja. 
if (event.stopPropagation) event.stopPropagationQ; // Modelo padrao 
else event.cancelBubble = true; // IE 

// Agora impede qualquer a^ao padrao. 

if (event.preventDefault) event.preventDefaultQ; // Modelo padrao 
else event.returnValue = false; // IE 


* Esta e a rotina de tratamento que captura eventos mousemove quando urn elemento 

* esta sendo arrastado. Ela e responsavel por mover o elemento. 

function moveHandler(e) { 

if (!e) e = window.event; // Modelo de evento do IE 

// Move o elemento para a posicao atual do mouse, ajustada pela 
// posicao das barras de rolagem e do deslocamento do clique inicial. 
var scroll = getScrollOffsetsQ; 

elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px"; 
elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px"; 
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// E nao permite que mais ninguem veja esse evento. 
if (e.stopPropagation) e.stopPropagationQ; // Padrao 

else e.cancelBubble = true; // IE 


* Esta e a rotina de tratamento que captura o ultimo evento mouseup que 

* ocorre no final de urn arrasto. 

function upHandler(e) { 

if (!e) e = window.event; // Modelo de evento do IE 

// Anula o registro das rotinas de captura de evento. 

if (document.removeEventListener) { // Modelo de evento do DOM 
document.removeEventl_istener("mouseup", upHandler, true); 
document.removeEventListener("mousemove", moveHandler, true); 

} 

else if (document.detachEvent) { // Modelo de evento do IE 5 + 
elementToDrag.detachEvent("onlosecapture", upHandler); 
elementToDrag.detachEvent("onmouseup", upHandler); 
elementToDrag.detachEvent("onmousemove", moveHandler); 
elementToDrag. releaseCaptureQ; 

} 


// E nao permite que 0 evento se propague mais. 
if (e.stopPropagation) e.stopPropagation(); // Modelo padrao 

else e.cancelBubble = true; // IE 

} 

} 

O codigo a seguir mostra como usar drag() em um arquivo HTML (trata-se de uma versao simpli- 
ficada do Exemplo 16-2, com a adi^ao de arrasto): 

<script src="getScrollOffsets.js"x/script> <!-- drag() exige isso --> 

cscript src="Drag.js"x/script> <!-- define drag() --> 

<!-- 0 elemento a ser arrastado --> 

<div style="position:absolute; left:100px; top:100px; width:250px; 
background-color: white; border: solid black;"> 

<!-- A "barra de titulo” a arrastar junto. Observe 0 atributo onmousedown. --> 

<div style="background-color: gray; border-bottom: dotted black; 

padding: Bpx; font-family: sans-serif; font-weight: bold;" 
onmousedown=”drag(this.parentNode, event);”> 

Drag Me <!-- 0 conteudo da barra de titulo --> 

<!-- Conteudo do elemento que pode ser arrastado --> 

<p>This is a test. Testing, testing, testing.</pxp>Test</pxp>Test</p> 

</div> 

O segredo aqui e o atributo onmousedown do elemento <div> interno. Note que ele usa this. parentNode 
para especificar que o elemento conteiner inteiro sera arrastado. 
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17.6 Eventos de roda do mouse 

Todos os navegadores modernos suportam rodas de mouse e disparam eventos quando o usuario 
gira a roda do mouse. Muitas vezes os navegadores usam a roda do mouse para rolar o documento 
ou aproximar e afastar, mas e possrvel cancelar o evento mousewheel para evitar essas a^oes padrao. 

Existem varios problemas de interoperabilidade que afetam os eventos de roda do mouse, mas e pos- 
sfvel escrever codigo que funcione em todas as plataformas. Quando este livro estava sendo escrito, 
todos os navegadores, menos o Firefox, suportavam um evento chamado “mousewheel”. Em vez 
disso, o Firefox utiliza “DOMMouseScroll”. E a versao draft Level 3 Events do DOM propoe um 
evento chamado “wheel”, em vez de “mousewheel”. Alem das diferenijas nos nomes de evento, os 
objetos passados para esses varios eventos utilizam nomes de propriedade diferentes para especificar 
a quantidade de giro da roda. Por fim, note que tambem existem distinfoes de hardware funda¬ 
mentals entre rodas de mouse. Algumas permitem rotaQo unidimensional para frente e para tras e 
algumas (especialmente em Macs) tambem permitem rota?ao para a esquerda e para a direita (nesses 
mouses, a “roda” e uma trackball). O padrao Level 3 do DOM ate inclui suporte para “rodas” de 
mouse tridimensionais que podem informar rota^ao no sentido horario ou no sentido anti-horario, 
alem de para frente/para tras e para esquerda/para direita. 

O objeto evento passado para uma rotina de tratamento de “roda do mouse” tern uma propriedade 
wheelDelta que especifica quanto o usuario girou a roda. Um “clique ” de roda do mouse girando na 
dire^ao contraria a do usuario geralmente e um delta de 120 e um clique na sua dire^ao e -120. No 
Safari e no Chrome, para suportar mouses da Apple que contem uma trackball bidimensional, em 
vez de uma roda de mouse unidimensional, o objeto evento tern propriedades wheelDeltaX e wheel- 
DeltaY, alem de wheelDelta, sendo que wheelDelta e wheelDeltaY tern sempre o mesmo valor. 

No Firefox, voce pode usar o evento nao padronizado DOMMouseScroll, em vez de mousewheel, e 
usar a propriedade detail do objeto evento, em vez de wheelDelta. Entretanto, a escala e o sinal dessa 
propriedade detail sao diferentes de wheelDelta: multiplique detail por -40 para calcular o valor de 
wheelDelta equivalente. 

Quando este livro estava sendo escrito, a versao draft Level 3 Events do DOM definia um evento 
wheel como versao padronizada de mousewheel e DOMMouseScroll. O objeto passado para uma 
rotina de tratamento de evento wheel tera propriedades deltaX, deltaY e deltaZ para especificar rota- 
Qo em tres dimensoes. Voce deve multiplicar esses valores por -120 para corresponder ao valor e ao 
sinal de um evento mousewheel. 

Para todos esses tipos de evento, o objeto evento e como um objeto evento de mouse: ele inclui as 
coordenadas do cursor do mouse e o estado das teclas modificadoras do teclado. 

O Exemplo 17-3 demonstra como se trabalha com eventos de roda de mouse e como fazer isso de 
modo independente de plataforma. Ele define uma funfao chamada enclose () que envolve um 
“quadro” ou “janela de visualizaQo” do tamanho especificado em torno de um elemento cujo con- 
teudo e maior (como uma imagem) e define uma rotina de tratamento de evento de roda de mouse 
que permite ao usuario dar uma panoramica no conteudo do elemento dentro da porta de visualiza- 
Qo e tambem redimensionar a porta de visualizaQo. Voce poderia usar essa funQo enclose () com 
codigo como o seguinte: 
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cscript src="whenReady.js"x/script> 
cscript src="Enclose.js"x/script> 

whenReady(function() { 

enclose (document, get ElementByld ("content 11 )j400j200j -200, -300); 

})i 

</script> 

<style>div.enclosure { border: solid black lOpx; margin: lOpx; }</style> 

<img id="content" src="testimage.jpg"/> 

Para funcionar corretamente em todos os navegadores comuns, o Exemplo 17-3 deve fazer alguns 
testes de navegador (Se$ao 13.4.5). O exemplo antedpa a especificafao Level 3 Events do DOM e 
contem codigo para usar o evento wheel quando os navegadores o implementarem . Inclui tambem 
alguma prepara^ao para o futuro, para parar de usar o evento DOMMouseScroll quando o Firefox 
come^ar a disparar wheel ou mousewheel. Note que o Exemplo 17-3 tambem e um exemplo pra- 
tico das tecnicas de geometria de elemento e posicionamento CSS explicadas na Se^ao 15.8 e na 
Se ? ao 16.2.1. 

Exemplo 1 7-3 Tratando de eventos roda do mouse 

// Engloba o elemento conteudo em um quadro ou em uma porta de visualizaqao da largura e 
// altura especificadas (minimo 50x50). 0s argumentos contentX e contentY opcionais 
// especificam o deslocamento inicial do conteudo em relaqao ao quadro. (Se 
// especificados, devem ser <= 0.) 0 quadro tern rotinas de tratamento de evento 
// mousewheel que permite ao usuario dar uma panoramica no elemento e reduzir ou 
// ampliar o quadro. 

function enclose(content, framewidth, frameheight, contentX, contentY) { 

II Esses argumentos nao sao apenas os valores iniciais: eles mantem o 

// estado atual e sao utilizados e modificados pela rotina de tratamento de mousewheel. 

framewidth = Math.max(framewidth, 50); 

frameheight = Math.max(frameheight, 50); 

contentX = Math.min(contentX, 0) || 0; 

contentY = Math.min(contentY, 0) || 0; 

// Cria o elemento frame e configura um nome de classe e estilo CSS 
var frame = document.createElement("div"); 

frame.className = "enclosure"; // Para que possamos definir estilos em 

// uma folha de estilo 

frame.style.width = framewidth + "px"; // Configura o tamanho do quadro. 

frame.style.height = frameheight + "px"; 

frame.style.overflow = "hidden"; // Sem barras de rolagem, sem 

// transbordamento 

frame.style.boxSizing = "border-box"; // Border-box simplifica os 

frame.style.webkitBoxSizing = "border-box"; // calculos para redimensionar 
frame.style.MozBoxSizing = "border-box"; // o quadro. 

// Coloca o quadro no documento e move o elemento conteudo para o quadro. 
content.parentNode.insertBefore(frame, content); 
frame.appendChild(content); 

// Posiciona o elemento em relacao ao quadro 
content.style.position = "relative"; 


Isso e arriscado: se as futuras implementafoes nao coincidirem com a versao preliminar da especificaqao atual de quando 
escrevi isto, o tiro saira pela culatra e o exemplo nao funcionara. 
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content.style.left = contentX + "px"; 
content.style.top = contentY + "px"; 


// Precisaremos contornar algumas peculiaridades especificas dos navegadores a seguir 
var isMacWebkit = (navigator.userAgent.indexOf("Macintosh") !== -1 && 
navigator.userAgent.indexOf("WebKit") !== -l); 
var isFirefox = (navigator.userAgent.indexOf("Gecko") !== -l); 

// Registra rotinas de tratamento de evento roda do mouse, 
frame.onwheel = wheelHandler; // Navegadores futuros 

frame.onmousewheel = wheelHandler; // A maioria dos navegadores atuais 
if (isFirefox) // Somente Firefox 

frame. addEventListener("DOMMouseScroll", wheelHandler, false); 

function wheelHandler(event) { 

var e = event || window.event; // Evento de objeto padrao ou IE 


// Extrai a quantidade de rota^ao do objeto evento, procurando 
// propriedades de urn objeto evento wheel, de urn objeto evento mousewheel 
// (tanto na forma 2D como ID) e do evento DOMMouseScroll do Firefox. 

// Muda a escala dos deltas de modo que urn "clique" em direcao a tela tenha 30 

// Se futuros navegadores dispararem "wheel" e "mousewheel" para o mesmo 
// evento, acabaremos contando duplamente aqui. Esperamos, contudo, 

// que cancelar o evento wheel evite a geracao de roda do mouse. 


r deltaX = e.deltaX*-30 
e.wheelDeltaX/4 

o; 

var deltaY = e.deltaY*-30 
e.wheelDeltaY/4 
(e.wheelDeltaY===undefined && 
e.wheelDelta/4) 
e.detail*-10 


/ evento wheel 
// mousewheel 

// propriedade nao definida 
// evento wheel 

// evento mousewheel no Webkit 
// se nao houver propriedade 2D, entao 
// usa a propriedade wheel ID 
// evento DOMMouseScroll do Firefox 
// propriedade nao definida 


// A maioria dos navegadores gera urn evento com delta 120 por clique de mousewheel. 
// Nos Macs, entretanto, os mousewheels parecem ser sensiveis a velocidade e 
// os valores de delta sao frequentemente multiplos de 120, pelo menos com o 
// mouse da Apple. Usa teste de navegador para anular isso. 
if (isMacWebkit) { 
deltaX /= 30; 
deltaY /= 30; 

} 


// Se obtivermos urn evento mousewheel ou wheel no (em uma futura versao do) 
// Firefox, entao nao precisamos mais de DOMMouseScroll. 
if (isFirefox && e.type !== "DOMMouseScroll") 

frame.removeEventListener("DOMMouseScroll”, wheelHandler, false); 


// Obtem as dimensoes atuais do elemento conteudo 
var contentbox = content.getBoundingClientRectQ; 
var contentwidth = contentbox.right - contentbox.left; 
var contentheight = contentbox.bottom - contentbox.top; 


if (e.altKey) { // Se a tecla Alt estiver pressionada, redimensiona o quadro 
if (deltaX) { 
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framewidth -= deltaX; // Nova largura, mas nao maior do que o 
-framewidth = Math.min(framwidth, contentwidth); // conteudo 
framewidth = Math.max(framewidth,50); // e nao menor do que 50. 

frame.style.width = framewidth + "px"; // Configura-o no quadro 

} 

if (deltaY) { 

frameheight -= deltaY; // Faz o mesmo para a altura do quadro 
frameheight = Math.min(frameheight, contentheight); 
frameheight = Math.max(frameheight-deltaY, 50); 
frame.style.height = frameheight + "px”; 

} 

} 

else { // Sem a modificadora Alt, da uma panoramica no conteudo dentro do quadro 
if (deltaX) { 

// Nao rola mais do que isso 

var minoffset = Math.min(framewidth-contentwidth, 0); 

// Soma deltaX a contentX, mas nao deixa menor do que minoffset 
contentX = Math.max(contentX + deltaX, minoffset); 
contentX = Math.min(contentX, 0); // nem maior do que 0 

content.style.left = contentX + "px"; // Configura o novo 

// deslocamento 


} 


if (deltaY) { 

var minoffset = Math.min(frameheight - contentheight, 0); 

// Soma deltaY a contentY, mas nao deixa menor do que minoffset 
contentY = Math.max(contentY + deltaY, minoffset); 
contentY = Math.min(contentY, 0); // Nem maior do que 0 

content.style.top = contentY + "px"; // Configura o novo 

// deslocamento. 


} 


// Nao permite que esse evento borbulhe. Impede qualquer acao padrao. 

// Isso impede o navegador de usar o evento mousewheel para rolar 
// o documento. Espera-se que chamar preventDefaultQ em urn evento wheel 
// tambem impeca a geraqao de urn evento mousewheel para a 
// mesma rotaqao. 

if (e.preventDefault) e.preventDefaultQ; 
if (e.stopPropagation) e.stopPropagationQ; 
e.cancelBubble = true; // eventos do IE 
e.returnValue = false; // eventos do IE 
return false; 

} 

} 

17.7 Eventos arrastaresoltar 

O Exemplo 17-2 mostrou como responder a arrastos de mouse dentro de um aplicativo. E possf- 
vel usar tecnicas como aquela para permitir que elementos sejam arrastados e “soltos” dentro de 
uma pagina Web, mas o verdadeiro “arrastar e soltar” e outra coisa. Arrastar e soltar (ou DnD — de 
drag-and-drop, em ingles) e uma interface com o usuario para transferir dados entre uma “origem 
de arrasto” e um “alvo de soltura”, que pode ser no mesmo aplicativo ou em aplicativos diferen- 
tes. DnD e uma interaqao homem/computador complexa e as APIs para implementar DnD sao 
sempre complicadas: 
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• Precisam estar vinculadas ao sistema operational subjacente para que possam funcionar entre 
aplicativos nao relacionados. 

• Devem conciliar operates “mover”, “copiar” e “vincular” de transference de dados, deixar 
que a origem de arrasto e o alvo de soltura restrinjam o conjunto de operates permitidas e, 
entao, permitir que o usuario fa$a uma escolha (normalmente usando modificadoras do tecla- 
do) no conjunto permitido. 

• Devem fornecer uma maneira para que uma origem de arrasto especifique o icone ou a ima- 
gem a ser arrastada. 

• Devem fornecer notifica^ao baseada em evento, tanto para a origem do arrasto como para o 
alvo de soltura, do andamento da intera^ao DnD. 

A Microsoft introduziu uma API de DnD nas primeiras versoes do IE. Nao era uma API bem pro- 
jetada nem bem documentada, mas outros navegadores tentaram copia-la e HTML5 padroniza algo 
parecido com a API do IE e acrescenta novos recursos que tornam a API muito mais facil de usar. 
Essa nova API de DnD facil de usar nao estava implementada quando este livro estava sendo escrito; 
portanto, esta seqtio aborda a API do IE, com a benfao do padrao HTML5. 

A API de DnD do IE e complicada de usar e diferen^as de implementaQo nos navegadores atuais 
tornam impossivel utilizar algumas das partes mais sofisticadas dela em todos eles, mas ela permite 
que aplicativos Web participem na aplica^ao conjunta da DnD como os aplicativos de area de tra- 
balho normais. Os navegadores sempre foram capazes de fazer DnD simples. Se voce seleciona texto 
em um navegador Web, e facil arrasta-lo para um processador de texto. E se voce seleciona um URL 
em um processador de texto, pode arrasta-lo para o navegador a fim de visitar o URL. O que esta 
se<jao demonstra e como criar origens de arrasto personalizadas que transferem dados que nao sao 
seu conteudo textual e alvos de soltura personalizados que respondem aos dados soltos de alguma 
maneira que nao seja sua simples exibRao. 

A DnD e sempre baseada em eventos e a API JavaScript envolve dois conjuntos de eventos: um dis- 
parado na origem do arrasto e outro disparado no alvo de soltura. Todas as rotinas de tratamento de 
evento de DnD recebem um objeto evento parecido com um objeto evento de mouse, com a adi^ao 
de uma propriedade dataTransfer. Essa propriedade se refere a um objeto DataTransfer que define 
os metodos e as propriedades da API de DnD. 

Os eventos da origem do arrasto sao relativamente simples e vamos come^ar com eles. Qualquer 
elemento do documento que tenha o atributo HTML draggable e uma origem de arrasto. Quando o 
usuario inicia um arrastamento de mouse sobre uma origem de arrastamento, o navegador nao selecio¬ 
na o conteudo do elemento - em vez disso, ele dispara um evento dragstart no elemento. Sua rotina 
de tratamento para esse evento deve chamar dataTransfer. setDataQ para especificar os dados (e o tipo 
desses dados) que a origem do arrasto esta tornando disponfveis. (Quando a nova API de HTML5 
for implementada, voce vai poder chamar dataTransfer. items. add ().) Sua rotina de tratamento talvez 
tambem queira configurar dataTransfer.effectAllowed para especificar quais das operates de trans¬ 
ferencia “mover”, “copiar” e “vincular” sao suportadas e talvez queira chamar dataTransfer.setDragl- 
mage() ou dataTransfer.addElementQ (nos navegadores que suportam esses metodos) para especificar 
uma imagem ou elemento do documento a ser usado como representa^ao visual do arrasto. 

Enquanto o arrasto esta em andamento, o navegador dispara eventos drag na origem de arrasto. Voce 
pode receber esses eventos, se quiser atualizar a imagem de arrastamento ou alterar os dados que 
estao sendo oferecidos, mas geralmente nao e necessario registrar rotinas de tratamento de “arrasto”. 
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Quando ocorre uma soltura, o evento dragend e disparado. Se sua origem de arrastamento suporta 
uma opera^ao “mover”, ela deve verificar dataTransfer.dropEffect para ver se uma operagao mover 
foi realmente realizada. Se foi, os dados foram transferidos para algum lugar e devem ser exclufdos 
da origem do arrasto. 

O evento dragstart e o unico necessario para implementar origens de arrasto personalizadas simples. 
O Exemplo 17-4 mostra isso. Ele exibe a hora atual (no formato “hh:mm”) em um elemento <span> 
e atualiza a hora a cada minuto. Se o exemplo fizesse so isso, o usuario poderia selecionar o texto 
exibido no relogio e entao arrastar a hora. Mas o codigo JavaScript desse exemplo transforma o relo- 
gio em uma origem de arrasto personalizada, configurando a propriedade draggable desse elemento 
relogio como true e definindo uma fungao de rotina de tratamento de evento ondragstart. A rotina 
de tratamento de evento utiliza dataTransfer.setData() para especificar uma string de timestamp 
completa (incluindo in form agio de data, segundos e fiiso horario) como dados a serem arrastados. 
Ela tambem chama dataTransfer. setDraglconQ para especificar uma imagem (um icone de relogio) 
a ser arrastada. 

Exemplo 17-4 Uma origem de arrasto personalizada 
<script src="whenReady.js"x/script> 

whenReady(function() { 

var clock = document.getElementById("clock") 
var icon = new ImageQ; 
icon.src = "clock-icon.png"; 

// Exibe a hora a cada minuto 
function displayTime() { 

var now = new Date(); // Obtem a hora atual 

var hrs = now.getHoursQ, mins = now.getMinutesQ; 
if (mins < 10) mins = "0" + mins; 

clock.innerHTML = hrs + + mins; // Exibe a hora atual 

setTimeout(displayTime, 60000); // Executa novamente em l minuto 

} 

displayTime(); 

// Torna possivel arrastar o relogio 

// Tambem podemos fazer isso com um atributo HTML: <span draggable="true">... 
clock.draggable = true; 

// Configura rotinas de tratamento de evento drag 
clock.ondragstart = function(event) { 

var event = event || window.event; // Para compatibilidade com IE 

// A propriedade dataTransfer e fundamental para a API de arrastar e soltar 
var dt = event.dataTransfer; 

// Informa ao navegador o que esta sendo arrastado. 

// A construtora Date() usada como funcao retorna uma string de timestamp 
dt.setDataf'Text", Date() + "\n"); 


// 0 elemento relogio 
// Uma imagem para arrastar 
// URL da imagem 
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// Diz ao ravegador para arrastar nosso icone a fim de representar o timestamp, em 
// navegadores que suportam isso. Sem essa linha, o navegador pode 
// usar uma imagem do texto do relogio como valor a arrastar. 
if (dt.setDraglmage) dt.setDragImage(icon, 0, 0); 

}; 

}); 

<style> 

#clock { /* Faz o relogio ficar bonito *1 

font: bold 24pt sans; background: #ddf; padding: lOpx; 
border: solid black 2px; border-radius: lOpx; 

} 

</style> 

<hl>Drag timestamps from the clock</hl> 

<span id="clock"x/span> <!-- A hora e exibida aqui --> 

ctextarea cols=60 rows=20x/textarea> <!-- Voce pode soltar timestamps aqui --> 

Os alvos de soltura sao mais complicados do que as origens de arrasto. Qualquer elemento do do- 
cumento pode ser um alvo de soltura: nao ha necessidade de configurar um atributo HTML como 
acontece com as origens de arrasto; basta definir receptores de evento apropriados. (Contudo, com a 
nova API de DnD de HTML5, voce vai poder definir um atributo dropzone no alvo de soltura, em 
vez de definir algumas das rotinas de tratamento de evento descritas a seguir.) Sao quatro os eventos 
disparados nos alvos de soltura. Quando um objeto arrastado entra em um elemento do documento, 
o navegador dispara um evento dragenter nesse elemento. Seu alvo de soltura deve usar a proprieda- 
de dataTransfer.types para determinar se o objeto arrastado tern dados disponiveis em um formato 
que ele possa entender. (Talvez voce tambem queira verificar dataTransfer.effectAllowed para ga- 
rantir que a origem de arrasto e seu alvo de soltura possam estar de acordo com uma das operates 
mover, copiar e vincular.) Se essas verificafoes forem bem-sucedidas, seu destino de soltura deve 
permitir que o usuario e o navegador saibam que ele esta interessado em uma soltura. Voce pode dar 
esse retorno para o usuario mudando a borda ou a cor de fundo. Surpreendentemente, um alvo de 
soltura informa ao navegador que esta interessado em uma soltura cancelando o evento. 

Se um elemento nao cancelar o evento dragenter enviado a ele pelo navegador, este nao vai trata- 
-lo como alvo de soltura para esse arrasto e nao vai mais enviar eventos a ele. Mas se um alvo de 
soltura cancelar o evento dragenter, o navegador vai enviar eventos dragover a medida que o usuario 
continuar a arrastar o objeto sobre esse alvo. Surpreendentemente (novamente) um alvo de soltura 
deve receber e cancelar todos esses eventos para indicar seu contfnuo interesse pela soltura. Se o alvo 
de soltura quer especificar que permite apenas operates mover, copiar ou vincular, deve usar essa 
rotina de tratamento de evento dragover para configurar dataTransfer.dropEffect. 

Se o usuario mover o objeto arrastado de um alvo de soltura que indicou interesse cancelando even¬ 
tos, entao o evento dragleave sera disparado no alvo de soltura. A rotina de tratamento desse evento 
deve restaurar a borda ou cor de fundo do elemento ou desfazer qualquer outro feedback visual 
reahzado em resposta ao evento dragenter. Infebzmente, os eventos dragenter e dragleave borbulham 
e, se um alvo de soltura contem elementos aninhados, e dificil saber se um evento dragleave significa 
que o arrasto deixou o alvo de soltura de um evento fora do alvo ou de um evento dentro dele. 

Por fim, se o usuario solta um objeto em um alvo de soltura, o evento drop e disparado no alvo de 
soltura. A rotina de tratamento desse evento deve usar dataTransfer.getDataQ para obter os dados 
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que foram transferidos e fazer algo apropriado com eles. Alternativamente, se o usuario soltou um 
ou mais arquivos no alvo de soltura, a propriedade dataTransfer.files sera um objeto semelhante a 
um array de objetos File. (Consulte o Exemplo 18-11 para ver uma demonstragao.) Com a nova API 
de HTML5, as rotinas de tratamento de evento drop poderao iterar pelos elementos de dataTrans¬ 
fer . items [ ] para examinar dados que sao arquivos e que nao sao arquivos. 

O Exemplo 17-5 demonstra como transformar elementos <ul> em alvos de soltura e como trans- 
formar os elementos <li> dentro deles em origens de arrasto. O exemplo e um pedago de codigo 
JavaScript nao obstrusivo que procura elementos <ul> com um atributo class que inclua “dnd” e 
registra rotinas de tratamento de evento DnD em todas essas listas que encontrar. As rotinas de 
tratamento de evento transformam a propria lista em um alvo de soltura: todo texto solto na lista e 
transformado em um novo item e inserido no final da lista. As rotinas de tratamento de evento tam- 
bem recebem arrastos nos itens dentro da lista e tornam o texto de cada item da lista disponivel para 
transferencia. As rotinas de tratamento de origem de arrasto permitem operates “copiar” e “mover” 
e excluem itens da lista que sao soltos em operates mover. (Note, entretanto, que nem todos os 
navegadores suportam operates mover de forma intercambiavel.) 

Exemplo 17-5 Uma lista como alvo de soltura e origem de arrasto 

* A API de DnD e muito complicada e os navegadores nao sao totalmente capazes de operar 

* em conjunto. 

* Este exemplo tern os fundamentos certos, mas cada navegador e um pouco diferente 

* e cada um parece ter seus proprios erros. Este codigo nao tenta 

* solugoes especificas para os navegadores. 

*1 

whenReady(function() { // Executa esta fungao quando o documento esta pronto 

// Localiza todos os elementos <ul class='dnd'> e chama a fungao dnd() neles 

var lists = document.getElementsByTagName("ul"); 

var regexp = /\bdnd\b/; 

for(var i = 0; i < lists.length; i++) 

if (regexp.test(lists[i].className)) dnd(lists[i]); 

// Adiciona rotinas de tratamento de arrastar e soltar em um elemento da lista 
function dnd(list) { 

var original_class = list.className; // Lembra a classe CSS original 
var entered = 0; // Monitora as entradas e saidas 

// Esta rotina de tratamento e chamada quando um arrasto entra na lista pela 
// primeira vez. Ela verifica se o arrastamento contem dados em um formato que 
// possa processar e, se puder, 

// retorna false para indicar interesse em uma soltura. Nesse caso, ela tambem 
// realga o alvo de soltura para permitir que o usuario saiba desse interesse. 
list.ondragenter = function(e) { 

e = e || window.event; // Evento padrao ou IE 
var from = e.relatedTarget; 

// Os eventos dragenter e dragleave borbulham, o que torna dificil 
// saber quando se deve realgar ou tirar o realce do elemento em um caso como 
// esse, onde o elemento <ul> tern filhos <li>. Nos navegadores que 
// definem relatedTarget, podemos monitorar isso. 

// Caso contrario, contamos pares entrada/saida 
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// Se entramos de fora da lista ou se 

// essa e a primeira entrada, entao precisamos fazer alguma coisa 
entered++; 

if ((from && !ischild(from, list)) |] entered == l) { 


// Todas as informacoes de DnD estao nesse objeto dataTransfer 
var dt = e.dataTransfer; 

// 0 objeto dt.types lista os tipos ou formatos em que os dados 
// que estao sendo arrastados estao disponiveis. HTML5 diz que o tipo 
// tern um metodo containsQ. Em alguns navegadores ele e urn array com urn 
// metodo indexOf. No IE8 e anteriores, ele simplesmente nao existe. 
var types = dt.types; // Em quais formatos os dados estao disponiveis 

// Se nao temos quaisquer dados do tipo ou se os dados estao 

// disponiveis em formato de texto puro, entao realqa a 

// lista para permitir que o usuario saiba que estamos recebendo drop 

// e retorna false para permitir que o navegador saiba. 

if ((types || //IE 

(types.contains && types.contains("text/plain")) || //HTML5 

(types.indexOf && types.indexOf("text/plain")!=-l)) //Webkit 

{ 

list.className = original_class + " droppable"; 
return false; 

} 



}; 


// Se nao reconhecemos o tipo de dados, nao queremos uma soltura 
return; // sem cancelamento 

} 

return false; // Se nao e a primeira entrada, ainda estamos interessados 


// Esta rotina de tratamento e chamada quando o mouse se move sobre a lista. 

// Precisamos definir esta rotina de tratamento e retornar false, senao o 
// arrasto sera cancelado. 

list.ondragover = function(e) { return false; }; 

// Esta rotina de tratamento e chamada quando o arrasto parte da lista 
// ou de um de seus filhos. Se estamos realmente deixando a lista 
// (e nao apenas indo de um item da lista para outro), entao retira seu realce. 
list.ondragleave = function(e) { 
e = e || window.event; 
var to = e.relatedTarget; 

// Se estamos saindo para algo fora da lista ou se essa saida 
// compensa as entradas, entao retira o realce da lista 

if ((to && !ischild(to,list)) | | entered <= 0) { 
list.className = original_class; 
entered = 0; 

} 

return false; 

}; 

// Esta rotina de tratamento e chamada quando realmente acontece uma soltura. 

// Pegamos o texto solto e o transformamos em um novo elemento <li> 
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list.ondrop = function(e) { 

e = e || window.event; // Obtem o evento 

// Obtem os dados que foram soltos em formato de texto puro. 

// "Text” e urn apelido para "text/plain". 

II 0 IE nao suporta "text/plain"; portanto, usamos "Text” aqui. 

var dt = e.dataTransfer; // Objeto dataTransfer 

var text = dt.getData("Text"); // Obtem os dados soltos como texto puro. 

// Se obtivemos algum texto, transformamos em urn novo item no final da 
// lista. 
if (text) { 

var item = document.createElement("li"); // Cria novo <li> 
item.draggable = true; // Torna possivel arrasta-lo 

item.appendChild(document.createTextNode(text)); // Adiciona texto 
list.appendChild(item); // Adiciona-o na lista 

// Restaura o estilo original da lista e zera a contagem de entered 
list.className = original_class; 
entered = 0; 

return false; 

} 

b 

// Torna possivel arrastar todos os itens que estavam originalmente na lista 
var items = list.getElementsByTagName("li"); 
for(var i = 0; i < items.length; i++) 
items[i].draggable = true; 

// E registra rotinas de tratamento de evento para arrastar itens da lista. 

II Note que colocamos essas rotinas de tratamento na lista e permitimos que os 
// eventos borbulhem para cima a partir dos itens. 

// Esta rotina de tratamento e chamada quando urn arrasto e iniciado dentro da 
// lista. 

list.ondragstart = function(e) { 
e = e || window.event; 
var target = e.target || e.srcElement; 

// Se borbulhou a partir de algo que nao urn <li>, ignora-o 
if (target.tagName !== "LI") return false; 

II Obtem o importante objeto dataTransfer 
var dt = e.dataTransfer; 

II Informa quais dados precisamos arrastar e em que formato estao 
dt.setData("Text", target.innerText || target.textContent); 

// Informa que sabemos como permitir copias ou movimentaqoes dos dados 
dt.effectAllowed = "copyMove"; 

b 

II Esta rotina de tratamento e chamada depois da ocorrencia de uma soltura 
// bem-sucedida 

list.ondragend = function(e) { 
e = e || window.event; 
var target = e.target || e.srcElement; 
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// Se a soltura foi uma movimentacao, exclui o item da lista. 

// No IE8, isso vai ser "none", a nao ser que voce configure explicitamente 
// como move na rotina de tratamento ondrop acima. Mas for<;a-lo a ser "move" 
// para o IE impede que outros navegadores oferecam ao usuario a escolha de 
// uma operacao copiar ou mover, 
if (e.dataTransfer.dropEffect === "move") 
target.parentNode.removeChild(target); 


// Esta e a fun<;ao utilitaria que usamos em ondragenter e ondragleave. 

// Retorna true se a e filho de b. 
function ischild(a,b) { 

for(; a; a = a.parentNode) if (a === b) return true; 
return false; 

} 

} 

}); 

17.8 Eventos de texto 

Os navegadores tem tres eventos legados para entrada de teclado. Os eventos keydown e keyup sao 
de baixo m'vel e sao abordados na proxima seqao. No entanto, o evento keypress e de nivel mais alto e 
sinaliza que foi gerado um caractere imprimi'vel. A versao preliminar da especifica^ao Level 3 Events 
do DOM define um evento textinput mais geral, disparado quando o usuario insere texto indepen- 
dente da fonte (um teclado, transferencia de dados na forma de colagem ou soltura, um metodo de 
entrada de idioma asiatico ou um sistema de reconhecimento de voz ou manuscrito, por exemplo). 
O evento textinput nao era suportado quando este livro estava sendo escrito, mas os navegadores 
Webkit suportam um evento “textinput” (com a letra I maiuscula) muito parecido. 

O evento textinput proposto e o evento textinput implementado atualmente recebem um obje- 
to evento simples, com uma propriedade data que contem o texto inserido. (Outra propriedade, 
inputMethod, foi proposta para especificar a origem da entrada, mas ainda nao tinha sido implemen- 
tada.) Para entrada de teclado, a propriedade data normalmente vai conter apenas um caractere, mas 
a entrada de outras fontes frequentemente pode incluir varios caracteres. 

O objeto evento passado com eventos keypress e mais confuso. Um evento keypress representa 
um unico caractere de entrada. O objeto evento especifica esse caractere como uma posi^ao de 
codigo Unicode numerica e voce deve usar String.fromCharCodeQ para converte-la em uma string. 
Na maioria dos navegadores, a propriedade keyCode do objeto evento especifica a posi^ao de codigo 
do caractere de entrada. Por motivos historicos, contudo, o Firefox usa a propriedade charCode. A 
maioria dos navegadores dispara eventos keypress apenas quando e gerado um caractere imprimivel. 
Contudo, o Firefox tambem dispara “keypress” para caracteres nao imprimiveis. Para detectar esse 
caso (de modo que possa ignorar os caracteres nao imprimiveis), voce pode procurar um objeto 
evento com uma propriedade charCode definida, mas configurada como 0. 

Os eventos textinput, textinput e keypress podem ser cancelados para impedir a entrada do caracte¬ 
re. Isso significa que voce pode usar esses eventos para filtrar entrada. Talvez voce queira impedir que 
o usuario insira letras em um campo destinado a dados numericos, por exemplo. O Exemplo 17-6 e 
um modulo nao obstrusivo de codigo JavaScript que permite exatamente esse tipo de filtragem. Ele 
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procura elementos cinput type=text> que tenham um atributo adicional (nao padronizado) chama- 
do data-allowed-chars. O modulo registra rotinas de tratamento para eventos textinput, textlnput 
e keypress nesse campo de texto, para restringir a entrada aos caracteres que aparecem no valor do 
atributo allowed. O comentario inicial no Exemplo 17-6 contem uma amostra de HTML que uti- 
liza o modulo. 

Exemplo 17-6 Filtrando entrada de usuario 

* InputFilter.js: filtragem discreta de toques de tecla para elementos <input> 

* Este modulo localiza todos os elementos cinput type="text"> no documento que 

* tenham um atributo "data-allowed-chars". Ele registra rotinas de 

* tratamento de evento keypress, textlnput e textinput para esse elemento a fim de 

* restringir a entrada do usuario de modo que apenas os caracteres que aparecem no valor 

* do atributo possam ser inseridos. Se o elemento <input> tambem tern um atributo chamado 

* "data-messageid", o valor desse atributo e considerado a identificaqao de outro 

* elemento do documento. Se o usuario digita um caractere que nao e permitido, o 

* elemento mensagem se torna visivel. Se o usuario digita um caractere permitido, o 

* elemento mensagem e oculto. Esse elemento identificacao de mensagem se destina a oferecer 

* uma explicaqao para o usuario sobre o motivo de seu toque de tecla ser rejeitado. 

* Normalmente, ele deve ser estilizado com CSS para que seja inicialmente invisivel. 

* Aqui esta um exemplo de HTML que utiliza esse modulo. 

* Zipcode: cinput id="zip" type="text" 

* data-allowed-chars="0123456789" data-messageid="zipwarn"> 

* cspan id="zipwarn" style="color:red;visibility:hidden">Digits onlyc/span> 

* Este modulo e puramente discreto: ele nao define quaisquer simbolos 

* no namespace global. 

whenReady(function () { // Executa esta funcao quando o documento e carregado 
// Localiza todos os elementos cinput> 
var inputelts = document.getElementsByTagName("input"); 

// Itera por todos eles 

for(var i = 0 ; i c inputelts.length; i++) { 
var elt = inputelts[i]; 

// Pula aqueles que nao sao campos de texto ou que nao tern 
// um atributo data-allowed-chars. 

if (elt.type != "text" || !elt.getAttribute("data-allowed-chars")) 
continue; 

// Registra nossa funqao de tratamento de evento nesse elemento de entrada 
// keypress e uma rotina de tratamento de evento legada que funciona em toda parte. 
// textlnput (caixa mista) e suportado pelo Safari e Chrome, em 2010. 

// textinput (caixa baixa) e a versao draft Level 3 Events do DOM. 
if (elt.addEventListener) { 

elt.addEventListener("keypress", filter, false); 
elt.addEventListener("textInput", filter, false); 
elt.addEventListener("textinput", filter, false); 

} 

else { // textinput nao suportava versoes do IE sem addEventListener() 

elt.attachEvent("onkeypress", filter); 

} 

} 
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// Esta e a rotina de tratamento de keypress e textlnput que filtra a entrada do usuario 
function filter(event) { 

// Obtem o objeto evento e o alvo do alvo target 

var e = event || window.event; // Modelo padrao ou IE 

var target = e.target || e.srcElement; // Modelo padrao ou IE 

var text = null; // 0 texto que foi inserido 

// Obtem o caractere ou texto que foi inserido 

if (e.type === "textinput" | | e.type === "textlnput' 1 ) text = e.data; 
else { // Esse era urn evento keypress legado 

// 0 Firefox usa charCode para eventos key press imprimiveis 
var code = e.charCode || e.keyCode; 

// Se esse toque de tecla e uma tecla de fun^ao de qualquer tipo, nao o filtra 
if (code < 32 | | // Caractere de controle ASCII 

e.charCode == 0 || // Tecla de fun^ao (somente para Firefox) 

e.ctrlKey || e.altKey) // Tecla modificadora pressionada 
return; // Nao filtra esse evento 

// Converte codigo de caractere em uma string 
var text = String.fromCharCode(code); 

} 


// Agora pesquisa as informa^oes que precisamos a partir desse elemento de entrada 
var allowed = target.getAttribute("data-allowed-chars"); // Caracteres validos 

var messageid = target.getAttribute("data-messageid"); // Identifica^ao de 

// mensagem 

if (messageid) // Se existe uma identificacao de mensagem, obtem o elemento 
var messageElement = document.getElementByld(messageid); 

// Itera pelos caracteres do texto de entrada 
for(var i = 0; i < text.length; i++) { 
var c = text.charAt(i); 

if (allowed.indexOf(c) == -l) { // Esse e urn caractere proibido? 

// Exibe o elemento da mensagem, se existir urn 
if (messageElement) messageElement.style.visibility = "visible"; 

// Cancela a acao padrao para que o texto nao seja inserido 
if (e.preventDefault) e.preventDefaultQ; 
if (e.returnValue) e.returnValue = false; 
return false; 

} 

} 

// Se todos os caracteres eram validos, oculta a mensagem, caso exista uma. 
if (messageElement) messageElement.style.visibility = "hidden"; 

} 

}); 

Os eventos keypress e textinput sao disparados antes que o texto recentemente digitado seja real- 
mente inserido no elemento do documento que tem o foco, sendo esse o motivo pelo qual as retinas 
de tratamento para esses eventos podem cancelar o evento e impedir a inserijao do texto. Os nave- 
gadores tambem implementam um tipo de evento de entrada que e disparado depois que o texto e 
inserido em um elemento. Esses eventos nao podem ser cancelados e nao especificam qual era o novo 
texto em seus objetos evento, mas fornecem notifica^ao de que o conteudo textual de um elemento 
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mudou de algum modo. Se voce quisesse garantir que qualquer texto inserido em um campo de 
entrada aparecesse em letras maiusculas, por exemplo, poderia usar o evento de entrada como segue: 
SURNAME: <input type="text" oninput="this.value = this.value.toUpperCasef);"> 

HTML 5 padroniza o evento de entrada e e suportado por todos os navegadores modernos, exceto o 
IE. Voce pode obter um efeito semelhante no IE usando o evento nao padronizado propertychange 
para detectar alteragoes na propriedade value de um elemento de entrada de texto. O Exemplo 17-7 
mostra como voce poderia obrigar que toda entrada aparecesse em letras maiusculas de forma inde- 
pendente de plataforma. 

Exemplo 17-7 Usando o evento propertychange para detectar entrada de texto 
function forceToUpperCase(element) { 

if (typeof element === "string") element = document.getElementByld(element); 
element.oninput = upcase; 

element.onpropertychange = upcaseOnPropertyChange; 

// Caso facil: a rotina de tratamento do evento de entrada 
function upcase(event) { this.value = this.value.toUpperCasef); } 

// Caso dificil: a rotina de tratamento do evento propertychange 
function upcaseOnPropertyChange(event) { 
var e = event || window.event; 

// Se a propriedade value mudou 
if (e.propertyName === "value") { 

// Remove a rotina de tratamento de onpropertychange para evitar recursividade 
this.onpropertychange = null; 

// Muda o valor para todas as letras em maiusculas 
this.value = this, value. toUpperCaseQ; 

// E restaura a rotina de tratamento de propertychange original 
this.onpropertychange = upcaseOnPropertyChange; 

} 

} 

} 

17.9 Eventos de tedado 

Os eventos keydown e keyup sao disparados quando o usuario pressiona ou solta uma tecla no tecla- 
do. Eles sao gerados por teclas modificadoras, teclas de fungao e teclas alfanumericas. Se o usuario 
mantiver a tecla pressionada por tempo suficiente para que comece a repetir, vai haver varios eventos 
keydown antes que o evento keyup chegue. 

O objeto evento associado a esses eventos tern uma propriedade numerica keyCode que especifica 
qual tecla foi pressionada. Para teclas que geram caracteres imprimiveis, keyCode geralmente e a codi- 
ficagao Unicode do caractere principal que aparece na tecla. As teclas de letra sempre geram valores 
de keyCode maiusculos, independente do estado da tecla Shift, visto que e o que aparece na tecla ffsi- 
ca. Da mesma forma, as teclas numericas sempre geram valores de keyCode para o digito que aparece 
na tecla, mesmo que voce esteja pressionando a tecla Shift para digitar um caractere de pontuagao. 
Para teclas nao imprimiveis, a propriedade keyCode sera algum outro valor. Esses valores de keyCode 
nunca foram padronizados, mas e possfvel uma compatibilidade razoavel entre os navegadores e o 
Exemplo 17-8 inclui um mapeamento de valores de keyCode em nomes de tecla de fungao. 
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Assim como os objetos evento de mouse, os objetos evento de tecla tem propriedades altKey, 
ctrlKey, metaKey e shiftKey que sao configuradas como true se a tecla modificadora correspondente 
esta pressionada quando o evento ocorre. 

Os eventos keydown e keyup e a propriedade keyCode estao em uso ha mais de uma decada, mas 
nunca foram padronizados. A versao draft Level 3 Events do DOM padroniza os tipos de evento 
keydown e keyup, mas nao tenta padronizar keyCode. Em vez disso, define uma nova propriedade key 
que contem o nome da tecla como uma string. Se a tecla corresponder a um caractere imprimrvel, a 
propriedade key sera apenas esse caractere imprimrvel. Se for uma tecla de fun<jao, a propriedade key 
sera um valor como “F2”, “Home” ou “Left”. 

A propriedade key do Level 3 do DOM ainda nao estava implementada em nenhum navegador 
quando este livro estava sendo produzido. No entanto, os navegadores Safari e Chrome, baseados no 
Webkit, definem uma propriedade keyldentifier no objeto evento para esses eventos. Assim como 
key, keyldentifier e uma string e nao um numero, tendo valores liteis, como “Shift” e “Enter” para 
teclas de fun^ao. Para teclas imprimfveis, essa propriedade contem uma represen tapio de string me- 
nos util da codificapio Unicode do caractere. Ela e “U+0041” para a tecla A, por exemplo. 

O Exemplo 17-8 define uma classe Keymap que mapeia identificadores de toque de tecla, como “Pa¬ 
geUp”, “Alt_Z” e “ctrl+alt+shift+F5”, em fun (joes JavaScript que sao chamadas em resposta a esses 
toques de tecla. Passe vfnculos de tecla para a construtora KeymapQ na forma deum objeto JavaScript 
no qual os nomes de propriedade sao identificadores de toque de tecla e os valores de propriedade 
sao funijoes de tratamento. Adicione e remova vfnculos com os metodos bind() e unbind( ). Instale 
Keymap em um elemento HTML (frequentemente o objeto Document) com o metodo installQ. 
Instalar um mapa de teclas em um elemento registra uma rotina de tratamento de evento keydown 
nesse elemento. Sempre que uma tecla e pressionada, a rotina de tratamento verifica se existe uma 
funpio associada a esse toque de tecla. Se houver, ela a chama. A rotina de tratamento de keydown 
usa a propriedade key do Level 3 do DOM, caso esteja definida. Se nao estiver, procura a proprieda¬ 
de Webkit keyldentifier e a utiliza. Caso contrario, recorre a propriedade nao padronizada keyCode. 
O Exemplo 17-8 comepi com um longo comentario explicando o modulo com mais detalhes. 

Exemplo 17-8 Uma dasse Keymap para atalhos de tedado 

* Keymap.js: vincula eventos de tecla a funcoes de tratamento. 

* Este modulo define uma classe Keymap. Uma instancia dessa classe representa um 

* mapeamento de identificadores de tecla (definido abaixo) em funcoes de tratamento. 

* Keymap pode ser instalada em um elemento HTML para tratar de eventos keydown. Ouando 

* esse evento ocorre, Keymap utiliza seu mapeamento para chamar a rotina de tratamento 

* apropriada. 

* Ouando voce cria uma Keymap, pode passar um objeto JavaScript representando 

* o conjunto inicial de vinculos para Keymap. Os nomes de propriedade desse objeto 

* sao identificadores de tecla e os valores de propriedade sao as funcoes de tratamento. 

* Apos uma Keymap ser criada, voce pode adicionar novos vinculos, passando um 

* identificador de tecla e a funijao de tratamento para o metodo bind(). Um vinculo pode 

* ser removido passando-se um identificador de tecla para o metodo unbindQ. 

* Para usar Keymap, chame seu metodo installQ, passando um elemento HTML, 
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* como o objeto documento. installQ adiciona uma rotina de tratamento de evento 

* onkeydown no objeto especificado. Ouando essa rotina de tratamento e chamada, ela 

* determina o identificador de tecla da tecla pressionada e chama a funcao de tratamento, 

* se houver, vinculada a esse identificador. Uma unica Keymap pode ser instalada em mais 

* de urn elemento HTML. 

* Identificadores de tecla 

* Urn identificador de tecla e uma representa^ao de string que nao diferencia letras 

* maiusculas e minusculas de uma tecla, mais quaisquer teclas modificadoras que sejam 

* pressionadas ao mesmo tempo. Normalmente, o nome da tecla e o texto (sem Shift) que esta 

* na tecla. Nomes de tecla validos incluem "A", "7", "F2", "PageUp", "Left", "Backspace" 

* e "Esc". 

* Consulte o objeto Keymap.keyCodeToKeyName neste modulo para ver uma lista de nomes. 

* Esses representam urn subconjunto dos nomes definidos pelo padrao Level 3 do DOM e 

* essa classe usara a propriedade key do objeto evento, quando for implementada. 

* Urn identificador de tecla tambem pode incluir prefixos de tecla modificadora. Esses 

* prefixos sao Alt, Ctrl, Meta e Shift. Eles nao diferenciam letras maiusculas e 

* minusculas e devem ser separados do nome da tecla e uns dos outros com espacos ou 

* com urn sublinhado, hifen ou +. Por exemplo: "SHIFT+A", "Alt_F2", "meta-v" e "ctrl 

* alt left". 

* Em Macs, Meta e a tecla Command e Alt e a tecla Option. Alguns navegadores 

* mapeiam a tecla Windows na modificadora Meta. 

* Funcoes de rotina de tratamento 

* As rotinas de tratamento sao chamadas como metodos do documento ou elemento do 

* documento em que o mapa de teclas esta instalado e recebem dois argumentos: 

* l) o objeto evento para o evento keydown 

* 2) o identificador de tecla da tecla que foi pressionada 

* 0 valor de retorno da rotina de tratamento se torna o valor de retorno da rotina de 

* tratamento de keydown. 

* Se uma funcao de tratamento retornar false, o mapa de teclas vai parar de borbulhar e 

* vai cancelar qualquer acao padrao associada ao evento keydown. 

* Limita^oes 

* Nao e possivel vincular uma funcao de tratamento a todas as teclas. 0 sistema 

* operacional captura algumas sequencias de tecla (Alt-F4, por exemplo). E o proprio 

* navegador pode capturar outras (Ctrl-S, por exemplo). Este codigo e dependente do 

* navegador, do sistema operacional e da localidade. As teclas de funcao e as teclas de 

* funcao modificadas funcionam bem, assim como as teclas alfanumericas nao modificadas. 

* A combinafao de Ctrl e Alt com caracteres alfanumericos e menos robusta. 

* A maioria dos caracteres de pontuacao que nao exigem a tecla Shift 

* mas nao hifen) e suportada nos layouts de teclado US padrao. Mas nao e 

* especialmente portavel para outros layouts de teclado e deve ser evitada. 
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// Esta e a funcao construtora 
function Keymap(bindings) { 

this.map = {}; // Define o identificador de tecla->mapa da rotina de tratamento 

if (bindings) { // Copia os vinculos iniciais nele 

for(name in bindings) this.bind(name, bindings[name]); 

} 

} 

// Vincula o identificador de tecla especificado a funcao de tratamento especificada 
Keymap.prototype.bind = function(key, func) { 
this.map[Keymap.normalize(key)] = func; 

}; 

// Exclui o vinculo do identificador de tecla especificado 
Keymap.prototype.unbind = function(key) { 
delete this.map[Keymap.normalize(key)]; 

}; 

// Instala essa Keymap no elemento HTML especificado 
Keymap.prototype.install = function(element) { 

// Esta e a funcao de tratamento de evento 
var keymap = this; 

function handler(event) { return keymap.dispatch(event, element); } 

// Agora a instala 
if (element.addEventListener) 

element.addEventListener("keydown", handler, false); 
else if (element.attachEvent) 

element.attachEvent("onkeydown", handler); 


// Este metodo envia eventos de tecla baseados nos vinculos de mapa de teclas. 

Keymap.prototype.dispatch = function(event, element) { 

// Comecamos sem modificadoras e sem nome de tecla 
var modifiers = "" 
var keyname = null; 

// Constroi a string modificadora em ordem alfabetica minuscula canonica. 
if (event.altKey) modifiers += "alt_"; 
if (event.ctrlKey) modifiers += "ctrl"; 
if (event.metaKey) modifiers += "meta_"; 
if (event.shiftKey) modifiers += "shift_"; 

// 0 nome da tecla e facil, se a propriedade key do Level 3 do DOM estiver 
// implementada: 

if (event.key) keyname = event.key; 

// Usa keyldentifier no Safari e no Chrome para nomes de tecla de funcao 
else if (event.keyldentifier && event.keyldentifier.substring(0,2) !== "U+") 
keyname = event.keyldentifier; 

// Caso contrario, usa a propriedade keyCode e o mapa de relacionamento codigo-nome 
// abaixo 

else keyname = Keymap.keyCodeToKeyName[event.keyCode]; 

// Se nao conseguimos encontrar urn nome de tecla, apenas retorna e ignora o evento. 
if ('keyname) return; 
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// A identificacao de tecla canonica e modifiers mais o nome da tecla em minusculas 
var keyid = modifiers + keyname.toLowerCaseQ; 


// Agora ve se o identificador de tecla esta vinculado a alguma coisa 
var handler = this.map[keyid]; 

if (handler) { // Se existe uma rotina de tratamento para essa tecla, trata dela 

// Chama a funqao de tratamento 
var retval = handler.call(element, event, keyid); 


// Se a rotina de tratamento retorna false, cancela o padrao e 
if (retval === false) { 

if (event.stopPropagation) event.stopPropagation(); // 

else event.cancelBubble = true; // 

if (event.preventDefault) event.preventDefault(); // 

else event.returnValue = false; // 

} 


impede que borbulhe 

Modelo DOM 
Modelo IE 
DOM 
IE 


// Retorna o que a rotina de tratamento retornou 
return retval; 

} 

}; 


// Funqao utilitaria para converter urn identificador de tecla para a forma canonica. 

// Em hardware nao Macintosh, poderiamos mapear "meta" em "ctrl" aqui, para que 

// Meta-C fosse "Command-C" no Mac e "Ctrl-C" em outros lugares. 

Keymap.normalize = function(keyid) { 
keyid = keyid. toLowerCaseQ; 
var words = keyid.split(/\s+1[\-+_]/); 
var keyname = words.pop(); 
keyname = Keymap.aliases[keyname] || keyname; 
words.sort(); 
words.push(keyname); 
return words.join("_"); 

}; 


// Tudo em minusculas 
// Separa as modificadoras do nome 
// keyname e a ultima palavra 
// E urn apelido? 

// Classifica as modificadoras restantes 
// Adiciona novamente o nome normalizado 
// Concatena tudo 


Keymap.aliases = { // 

"delete”:"del", // 

"return":"enter", // 
// 

"ctrl":"control", 
"space":"spacebar", 
"ins":"insert" 


Mapeia apelidos de tecla comuns em seus nomes 
de tecla "oficiais" usados pelo Level 3 do DOM e pelo 
codigo de tecla no mapa de nomes de tecla abaixo. 
Tanto as teclas como os valores devem estar em letras 
minusculas aqui. 


}; 


// A propriedade legada keyCode do objeto evento keydown nao e padronizada 

// Mas os valores a seguir parecem funcionar para a maioria dos navegadores e sistemas 

// operacionais. 

Keymap.keyCodeToKeyName = { 

// Teclas contendo palavras ou setas 

8:"Backspace", 9:"Tab", 13:"Enter", l6:"Shift", 17:"Control", l8:"Alt", 
19:"Pause", 20:"CapsLock", 27:"Esc", 32:"Spacebar", 33:"PageUp", 
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34:"PageDown", 35:"End", 36:"Home", 37:"Left", 38:"Up", 39:"Right”, 

40 :"Down", 45:"Insert", 46:"Del", 

// Teclas numericas no teclado principal (nao no teclado numerico) 

48:"0",49:"l",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:"8", 57:"9", 

// Teclas de letra. Note que nao distinguimos maiusculas e minusculas 
65:"A", 66:"B", 67:"C", 68:"D", 69:"E", 70:"F", 71:"G", 72:"H", 73:"I", 

74:"3", 75: "K", 76:"L", 77:"M", 78:"N", 79:”0", 80:"P", 8l:"0", 82:"R", 

83:"S", 84:"T", 85:"U", 86:"V", 87:"W", 88:"X", 89:"Y", 90:"Z", 

// Numeros do teclado numerico e teclas de pontuaqao. (0 Opera nao suporta isso.) 

96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103:"7",104:"8",105:"9", 

106:"Multiply", 107:"Add", 109:"Subtract", 110:"Decimal", 111:"Divide", 

// Teclas de funcao 

112:"Fl", 113:"F2", 114:"F3", 115:"F4", 116:"F5", 117:"F6", 

118:"F7", 119:"F8", 120:"F9", 121:"F10", 122:"Fll", 123:"F12", 

124:"F13", 125:"F14", 126:"F15", 127:"Fl6", 128:"F17", 129:"Fl8", 

130:"F19", 131:"F20", 132:"F2l", 133:"F22", 134:"F23", 135:"F24", 

// Teclas de pontuaqao que nao exigem manter a tecla Shift pressionada 
// 0 hifen nao e portavel: FF retorna o mesmo codigo que Subtract 
59:";", 61:"=", 186:";", 187:"=", // 0 Firefox e o Opera retornam 59,61 

188:",", 190:".", 191:"/", 192:""", 219:"[", 220:"\\", 221:"]", 222:. 




Capi'tulo 18 

Scripts HTTP 


O protocolo HTTP (Hypertext Transfer Protocol) especifica como os navegadores Web recebem 
documentos e postam conteudo de formularios nos servidores Web e como estes respondem a essas 
requisites e postagens. Os navegadores Web obviamente manipulam muito HTTP. Normalmente, 
o HTTP nao esta sob o controle de scripts; em vez disso, ocorre quando o usuario clica em um link, 
envia um formulario ou digita um URL. 

Contudo, e possivel escrever scripts de HTTP com codigo JavaScript. As requisites HTTP sao 
iniciados quando um script configura a propriedade location de um objeto janela ou chama o me- 
todo submit () de um objeto formulario. Nesses dois casos, o navegador carrega uma nova pagina. 
Esse tipo de script de HTTP simples pode ser util em uma pagina Web de varios quadros, mas nao 
e o assunto que vamos abordar aqui. Em vez disso, este capi'tulo explica como os scripts podem se 
comunicar com um servidor Web sem fazer o navegador recarregar o conteudo de qualquer janela 
ou quadro. 

O termo Ajax descreve uma arquitetura para aplicativos Web que apresentam scripts HTTP de 
forma destacada . A principal caracteristica de um aplicativo Ajax e que ele usa scripts HTTP para 
iniciar uma troca de dados com um servidor Web sem fazer as paginas serem recarregadas. A capaci- 
dade de evitar a recarga da pagina (que era a norma nos primordios da Web) resulta em aplicativos 
Web responsivos, mais parecidos com os aplicativos de area tradicionais de computadores. Um apli¬ 
cativo Web poderia usar tecnologias Ajax para registrar dados de interato com o usuario no servidor 
ou para melhorar seu tempo de inicializato, exibindo apenas uma pagina no principio e baixando 
dados adicionais e componentes da pagina de acordo com a necessidade. 

O termo Comet se refere a uma arquitetura de aplicativo Web relacionada, que utiliza scripts 
HTTP". De certo modo, Comet e o inverso de Ajax: em Comet, e o servidor Web que inicia 
a comunica?ao, enviando mensagens para o cliente de forma assincrona. Se o aplicativo Web 


Ajax e o acronimo (sem letras maiusculas) de Asynchronous JavaScript and XML. O termo foi inventado por Jesse James 
Garrett e apareceu pela primeira vez em seu ensaio de fevereiro de 2005 “Ajax: A New Approach to Web Applications” 
(, http://www.adaptivepath.com/publications/essays/archives/000385.php ). “Ajax” foi um jargao popular por muitos anos; agora 
e apenas um termo util para uma arquitetura de aplicativo Web baseada em scripts de requisites HTTP. 

2 O nome Comet foi inventado por Alex Russell em “Comet: Low Latency Data for the Browser” ( http://injrequently : 
org/2006/03/comet-low-bttency-data-for-the-browser/). O nome provavelmente e uma brincadeira com Ajax: tanto Comet 
como Ajax sao marcas de sapolio nos EUA. 
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precisa responder a essas mensagens enviadas pelo servidor, pode entao usar tecnicas Ajax para 
enviar ou solicitar dados. Em Ajax, o cliente “puxa” dados do servidor. Com Comet, o servidor 
“empurra” dados para o cliente. Outros nomes para Comet incluem “Server Push”, “Ajax Push” 
e “HTTP Streaming”. 

Existem varias maneiras de implementar Ajax e Comet e essas implementaqoes basicas as ve- 
zes sao conhecidas como transportes. O elemento <img>, por exemplo, tern uma propriedade src. 
Quando um script configura essa propriedade em um URL, uma requisiqao HTTP GET e 
iniciado para baixar uma imagem desse URL. Portanto, um script pode passar informaqoes 
para um servidor Web codificando-as na parte da string de consulta do URL de uma imagem e 
configurando a propriedade src de um elemento <img>. O servidor Web deve retornar alguma 
imagem como resultado dessa requisiqao, mas ela pode ser invisivel: uma imagem transparente 
de 1 pixel por 1 pixel, por exemplo . 

Um elemento <img> nao e um bom transporte Ajax, pois a troca de dados e unidirecional: o cbente 
pode enviar dados para o servidor, mas a resposta do servidor sempre sera uma imagem da qual o 
cliente nao pode extrair informaqoes facilmente. No entanto, o elemento <iframe> e mais versatil. 
Para usar um <iframe> como transporte Ajax, o script primeiramente codifica informaqoes para o 
servidor Web em um URL e, entao, configura a propriedade src do elemento <iframe> com esse 
URL. O servidor cria um documento HTML contendo sua resposta e a envia de volta para o nave- 
gador Web, o qual a exibe no elemento <iframe>. O <iframe> nao precisa ser visivel para o usuario; 
ele pode ser oculto com CSS, por exemplo. Um script pode acessar a resposta do servidor percorren- 
do o objeto documento do <iframe>. Note, contudo, que essa travessia esta sujeita as restriqoes da 
polftica da mesma origem descrita na Seqao 13.6.2. 

Mesmo o elemento <script> tern uma propriedade src que pode ser configurada para iniciar uma 
requisiqao HTTP GET. Escrever scripts HTTP com elementos <script> e especialmente atraente, 
pois eles nao estao sujeitos a polftica da mesma origem e podem ser usados para comunicaqao entre 
domfnios. Normalmente, com um transporte Ajax baseado em <script>, a resposta do servidor 
assume a forma de dados codificados com JSON (consulte a Seqao 6.9), que sao “decodificados” 
automaticamente quando o script e executado pelo interpretador JavaScript. Por causa do uso do 
formato de dados JSON, esse transporte Ajax e conhecido como “JSONP”. 

Embora as tecnicas Ajax possam ser implementadas em cima de um transporte <iframe> ou 
<script>, normalmente existe uma maneira mais facil de fazer isso. Ha algum tempo, todos os 
navegadores suportam um objeto XMLHttpRequest que define uma API para scripts HTTP. A 
API inclui a capacidade de fazer requisites POST, alem das requisites GET normais, e pode 
retornar a resposta do servidor como texto ou como um objeto Document. Apesar de seu nome, 
a API XMLHttpRequest nao esta limitada ao uso com documentos XML: ela pode buscar qual- 
quer tipo de documento de texto. A Seqao 18.1 aborda a API XMLHttpRequest e ocupa a maior 
parte do capftulo. A maioria dos exemplos de Ajax deste capftulo vai usar o objeto XMLHtt¬ 
pRequest como transporte, mas tambem vamos demonstrar como se usa transporte baseado em 
<script>, na Seqao 18.2, devido a capacidade do elemento <script> de contornar as restri(joes da 
mesma origem. 


3 As imagens desse tipo as vezes sao chamadas de web bugs. Surgem preocupajoes com a privacidade quando web bugs sao 
utilizados para transmitir informa^oes para um servidor que nao e aquele do qual a pagina Web foi carregada. Um uso co¬ 
mum desse tipo de web bug de entidade externa e na contagem de visitas e na analise do trafego de sites. 
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XML e optional 

0 X em "Ajax"significa XML, a principal API do lado do cliente para HTTP (XMLHttpRequest) apresenta 
XML em seu nome e vamos ver posteriormente que uma das propriedades do objeto XMLHttpRequest se 
chama responseXML. Parece que XML e uma parte importante dos scripts HTTP, mas nao e. Esses nomes 
sao o legado historico da epoca em que XML era urn jargao poderoso. As tecnicas Ajax trabalham com 
documentos XML, e daro, mas o uso de XML e puramente opcional e na verdade se tornou relativamente 
raro. A especificagao XMLHttpRequest apresenta as inadequagoes do nome que preservamos: 

0 nome do objeto e XMLHttpRequest por compatibilidade com a Web, embora cada componente 
desse nome seja potencialmente enganoso. Primeiramente, o objeto suporta qualquer formato ba- 
seado em texto, inclusive XML. Segundo, ele pode ser usado para fazer requisites por meio de HTTP 
e HTTPS (algumas implementagoes suportam outros protocolos, alem de HTTP e HTTPS, mas essa 
funcionalidade nao e abordada por esta especificagao). Por fim, ele suporta "requisites" no sentido 
geral do termo pertinente a HTTP; a saber, toda atividade envolvida com requisites ou respostas 
HTTP para os metodos HTTP definidos. 


Os mecanismos de transporte para Comet sao mais complicados do que para Ajax, mas todos exi- 
gem que o cliente estabelega (e restabelega, conforme o necessario) uma conexao com o servidor e 
que o servidor mantenha essa conexao aberta para que possam enviar mensagens assincronas por ela. 
Um elemento <iframe> oculto pode servir como transporte Comet, por exemplo, caso o servidor 
envie cada mensagem na forma de um elemento <script> para ser executado no <iframe>. Uma 
estrategia independente de plataforma mais confiavel para implementar Comet e fazer com que o 
cliente estabelega uma conexao com o servidor (usando um transporte Ajax) e com que o servidor 
mantenha essa conexao aberta ate que precise enviar uma mensagem. Sempre que o servidor envia 
uma mensagem, ele fecha a conexao, o que ajuda a garantir que a mensagem seja recebida corre- 
tamente pelo cliente. Apos processar a mensagem, o cliente estabelece imediatamente uma nova 
conexao para as futuras mensagens. 

E dificil implementar um transporte Comet confiavel independente de plataforma, sendo que a 
maioria dos desenvolvedores de aplicativo Web que utilizam a arquitetura Comet conta com os 
transportes das bibliotecas de estrutura Web, como a Dojo. Quando este livro estava sendo escrito, 
os navegadores estavam comegando a implementar uma versao preliminar de especificagao relacio- 
nada a HTML5, conhecida como Server-Sent Events, que define uma API Comet simples na forma 
de um objeto EventSource. A Segao 18.3 aborda a API EventSource e demonstra uma simulagao 
simples dela, usando XMLHttpRequest. 

E possivel construir protocolos de comunicagao de nfvel mais alto em cima de Ajax e Comet. 
Essas tecnicas de comunicagao cliente/servidor podem ser usadas como base de um mecanismo 
de RPC (chamada de procedimento remoto) ou de um sistema de eventos publicagao/assinatura, 
por exemplo. 
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Entretanto, este capftulo nao descreve protocolos de nfvel mais alto como esse; em vez disso, se con- 
centra nas APIs que permitem Ajax e Comet. 

18.1 UsandoXMLHttpRequest 

Os navegadores definem suas APIs HTTP em uma classe XMLHttpRequest. Cada instancia dessa 
classe representa um unico par requisifao/resposta. As propriedades e os metodos do objeto permi¬ 
tem especificar detalhes da requisRao e extrair dados da resposta. XMLHttpRequest e suportada 
pelos navegadores Web ha muitos anos e a API esta nos estagios finais de padronizagao por inter- 
medio do W3C. Ao mesmo tempo, o W3C esta trabalhando na versao preliminar de um padrao 
“XMLHttpRequest Level 2”. Esta segao aborda a API XMLHttpRequest basica e tambem partes da 
versao draft Level 2 (que vou chamar de XHR2) atualmente implementadas por pelo menos dois 
navegadores. 

A primeira coisa que voce deve fazer para usar essa API HTTP, logicamente, e instanciar um objeto 
XMLHttpRequest: 

var request = new XMLHttpRequestQ; 

Voce tambem pode reutilizar um objeto XMLHttpRequest ja existente, mas note que fazer isso vai 
cancelar qualquer requisigao pendente por meio desse objeto. 


XMLHttpRequest no IE6 

A Microsoft apresentou o objeto XMLHttpRequest ao mundo no IE5, sendo que no IE5 e IE6 estava dispo- 
nfvel apenas como um objeto ActiveX. A construtora XMLHttpRequest (), agora padrao, nao tern suporte 
antes do IE7, mas pode ser simulada como segue: 

// Simula a construtora XMLHttpRequestQ no IE5 e IE6 
if (window.XMLHttpRequest === undefined) { 
window.XMLHttpRequest = functionQ { 
try { 

// Usa a versao mais recente do objeto ActiveX, se estiver disponivel 
return new ActiveX0bject("Msxml2.XMLHTTP.6.0”); 

} 

catch (el) { 
try { 

// Caso contrario, recorre a uma versao mais antiga 
return new ActiveX0bject("Msxml2.XMLHTTP.3.0"); 

} 

catch(e2) { 

// Caso contrario, lanca um erro 

throw new Error("XMLHttpRequest is not supported"); 

} 

} 

}J 

} 
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Uma requisigao HTTP consiste em quatro partes: 

• o metodo ou “verbo” da requisigao HTTP 

• o URL que esta sendo solicitado 

• um conjunto opcional de cabegalhos de pedido, que podem incluir informagoes de autenti- 
cagao 

• um corpo de requisigao opcional 

A resposta HTTP enviada por um servidor tern tres partes: 

• um codigo de status numerico e textual indicando o sucesso ou a falha da requisigao 

• um conjunto de cabegalhos de resposta 

• o corpo da resposta 

As duas primeiras subsegoes a seguir demonstram como configurar cada uma das partes de uma 
requisigao HTTP e como consultar cada uma das partes de uma resposta HTTP. Essas segoes chave 
sao seguidas pela abordagem de topicos mais especializados. 

A arquitetura de requisigao/resposta basica do HTTP e muito simples e facil de trabalhar. Na prati- 
ca, contudo, existem todos os tipos de complicagoes: os clientes e o servidor trocam cookies, os ser- 
vidores redirecionam os navegadores para outros servidores, alguns recursos sao colocados na cache 
e outros nao, alguns clientes enviam todas as suas requisites por meio de servidores proxy e assim 
por diante. A XMLHttpRequest nao e uma API HTTP em nivel de protocolo, mas sim em nivel de 
navegador. O navegador cuida de cookies, redirecionamentos, uso de cache e proxys, e seu codigo 
precisa se preocupar apenas com requisites e respostas. 


XMLHttpRequest e arquivos locais 

A capacidade de usar URLs relativos em paginas Web normalmente significa que podemos desenvolver e 
testar nossa HTML usando o sistema de arquivo local e, entao, envia-la inalterada para um servidor Web. 
Contudo, isso geralmente nao e possivel na programagao de Ajax com XMLHttpRequest. A XMLHttpRe¬ 
quest e projetada para trabalhar com os protocolos HTTP e HTTPS. Teoricamente, poderia ser feita para 
trabalhar com outros protocolos, como FTP, mas partes da API, como o metodo de requisigao e o codigo 
de status de resposta, sao espedficos de HTTP. Se uma pagina Web for carregada a partir de um arquivo 
local, os scripts dessa pagina nao poderao usar XMLHttpRequest com URLs relativos, pois esses URLs vao 
ser relativos a um URL file:/ / e nao a um URL http: //. E a politica da mesma origem frequentemente 
impede o uso de URLs http: / / absolutos. (Mas consulte a Segao 18.1.6.) 0 resultado e que, ao trabalhar 
com XMLHttpRequest, voce geralmente precisa carregar seus arquivos em um servidor Web (ou executar 
um servidor de forma local) para testa-los. 


18.1.1 Especificando a requisigao 

Apos criar um objeto XMLHttpRequest, o proximo passo para fazer uma requisigao HTTP e cha- 
mar o metodo open() de seu objeto XMLHttpRequest para especificar as duas partes exigidas da 
requisigao, o metodo e o URL: 
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request.open("CET"j // Comeca com uma requisiqao HTTP GET 

"data.csv''); // Para o conteudo desse URL 

O primeiro argumento de open() especifica o metodo ou verbo HTTP. Trata-se de uma string 
que nao diferencia letras maiusculas e minusculas, mas normalmente sao utilizadas letras mai¬ 
usculas para combinar com o protocolo HTTP. Os metodos “GET” e “POST” sao suportados 
universalmente. “GET” e usado para a maioria das requisites “normais” e e apropriado quan- 
do o URL especifica completamente o recurso solicitado, quando a requisiqao nao tern efeitos 
colaterais no servidor e quando a resposta do servidor pode ser colocada na cache. O metodo 
“POST” e o normalmente utilizado por formularios HTML. Ele inclui dados adicionais (os 
dados do formulario) no corpo da requisiqao e esses dados frequentemente sao armazenados 
em um banco de dados no servidor (um efeito colateral). POSTs repetidos para o mesmo URL 
podem resultar em diferentes respostas do servidor e as requisites que usam esse metodo nao 
devem ser colocados na cache. 


Alem de “GET” e “POST”, a especificaqao XMLHttpRequest tambem permite “DELETE”, 
“HEAD”, “OPTIONS” e “PUT” como primeiro argumento de open(). (Os metodos “HTTP 
CONNECT”, “TRACE” e “TRACK” sao explicitamente proibidos por colocarem a seguranqa em 
risco.) Os navegadores mais antigos podem nao suportar todos esses metodos, mas pelo menos 
“HEAD” e amplamente suportado e o Exemplo 18-13 demonstra seu uso. 

O segundo argumento de open() e o URL que e o assunto da requisiqao. Isso e relativo ao URL do 
documento que contem o script que esta chamando openQ. Se voce especifica um URL absoluto, o 
protocolo, o host e a porta em geral devem corresponder aos do documento conteiner: requisites 
HTTP de varias origens normalmente causam um erro. (Mas a especificaqao XMLHttpRequest 
Level 2 permite requisites de varias origens quando o servidor permite isso de forma explicita; 
consulte a Seqao 18.1.6.) 

O proximo passo no processo de requisiqao e configurar os cabeqalhos de pedido, se bouver. As 
requisites POST, por exemplo, precisam de um cabeqalho “Content-Type” para especificar o tipo 
MIME do corpo da requisiqao: 

request.setRequestHeader("Content-Type", "text/plain"); 

Se voce chamar setRequestHeaderQ varias vezes para o mesmo cabeqalho, o novo valor nao vai subs- 
tituir o valor especificado anteriormente: em vez disso, a requisiqao HTTP vai conter varias copias 
do cabeqalho ou este vai especificar varios valores. 

Nao e possivel especificar os cabeqalhos “Content-Length”, “Date”, “Referer” ou “User-Agent”: A 
XMLHttpRequest vai adiciona-los automaticamente e nao permite que voce os imite. Da mesma 
forma, o objeto XMLHttpRequest manipula automaticamente os cookies, o tempo de vida da co- 
nexao, o conjunto de caracteres e as negociaqoes de codificaqao, de modo que voce nao pode passar 
estes cabeqalhos para setRequestHeaderQ: 


Accept-Charset 

Accept-Encoding 

Connection 

Content-Length 

Cookie 

Cookie2 


Content-Transfer-Encoding 

Date 

Expect 

Host 

Keep-Alive 

Referer 


TE 

Trailer 

Transfer-Encoding 

Upgrade 

User-Agent 

Via 
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E possivel especificar um cabegalho “Authorization” com sua requisigao, mas normalmente nao e 
necessario fazer isso. Se estiver solicitando um URL protegido por senha, passe o nome de usua- 
rio e a senha como quarto e quinto argumentos para open() e a XMLHttpRequest vai configurar 
os cabegalhos apropriados para voce. (Vamos aprender sobre o terceiro argumento opcional de 
open() a seguir. Os argumentos opcionais nome de usuario e senha estao descritos na segao de 
referenda.) 

O ultimo passo para fazer uma requisigao HTTP com XMLHttpRequest e especificar o corpo 
da requisigao opcional e envia-lo para o servidor. Faga isso com o metodo send(): 

request.send(null); 

As requisigoes GET nunca tern corpo, de modo que voce deve passar null ou omitir o argumento. 
As requisites POST geralmente tern corpo e ele deve corresponder ao cabegalho “Content-Type” 
especificado com setRequestHeaderQ. 


A ordem importa 

As partes de uma requisigao HTTP tern uma ordem especifica: o metodo e o URL da requisigao vem pri- 
meiro, depois os cabegalhos e, por fim, o corpo. As implementagoes de XMLHttpRequest geralmente nao 
iniciam uma conexao em rede ate que o metodo send() seja chamado. Mas a API XMLHttpRequest foi 
projetada como se cada metodo fosse gravar em um fluxo de rede. Isso significa que o metodo XMLHtt¬ 
pRequest deve ser chamado em uma ordem que corresponda a estrutura de uma requisigao HTTP. setRe- 
questHeader(), por exemplo, deve ser chamado depois da chamada de open() e antes da chamada de 
send (), senao vai disparar uma excegao. 


O Exemplo 18-1 usa cada um dos metodos XMLHttpRequest que descrevemos ate aqui. Ele POSTa 
uma string de texto para um servidor e ignora qualquer resposta enviada pelo servidor. 


Exemplo 18-1 POSTando (com POST) texto puro em um servidor 

function postMessage(msg) { 

var request = new XMLHttpRequest(); // Novo pedido 

request, open (''POST”, "/log.php"); // POST para um script no lado do servidor 
// Envia a mensagem, em texto puro, como corpo do pedido 

request.setRequestHeader(''Content-Type", // 0 corpo do pedido vai ser texto puro 
"text/plain;charset=UTF-8"); 

request.send(msg); // Envia msg como corpo do pedido 

// 0 pedido esta pronto. Ignoramos qualquer resposta ou qualquer erro. 

} 

Note, no Exemplo 18-1, que o metodo send() inicia a requisigao e depois retorna: ele nao bloqueia 
enquanto espera pela resposta do servidor. As respostas HTTP sao quase sempre manipuladas de 
forma assfncrona, conforme demonstrado na segao a seguir. 
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18.1.2 Recuperando a resposta 

Uma resposta HTTP completa consiste em um codigo de status, um conjunto de cabe?alhos e um 
corpo. Eles estao disponiveis por meio de propriedades e metodos do objeto XMLHttpRequest: 

• As propriedades status e statusText retornam o status HTTP nas formas numerica e textual. 
Essas propriedades contem valores HTTP padrao, como 200 e “OK” para pedidos bem-suce- 
didos e 404 e “Not Found” para URLs que nao correspondem a nenhum recurso no servidor. 

• Os cabeptlhos de resposta podem ser consultados com getResponseHeaderQ e getAllRespon- 
seHeaders(). A XMLHttpRequest manipula cookies automaticamente: ela filtra os cabe?alhos 
de cookie do conjunto retornado por getAllResponseHeadersQ e retorna null se voce passa 
“Set-Cookie” ou “Set-Cookie2” para getResponseHeaderQ. 

• O corpo da resposta esta disponivel em forma textual na propriedade responseText ou em for¬ 
ma de Document na propriedade responseXML. (O nome dessa propriedade e historico: na ver- 
dade, ela funciona para documentos XHTML e tambem para documentos XML, e a XHR2 
diz ainda que deve fiincionar para documentos HTML normais.) Consulte a Sepio 18.1.2.2 
para mais in for maples sobre responseXML. 

O objeto XMLHttpRequest em geral e usado (mas consulte a Sepio 18.1.2.1) de forma assincrona: 
o metodo sendQ retorna imediatamente apos enviar a requisipio, e os metodos e propriedades de 
resposta listados anteriormente nao sao validos ate que a resposta seja recebida. Para ser notificado 
quando a resposta estiver pronta, voce deve receber eventos readystatechange (ou os novos eventos 
progress daXHR2, descritos na Sepio 18.1.4) no objeto XMLHttpRequest. Mas para entender esse 
tipo de evento, voce deve primeiro entender a propriedade readyState. 

readyState e um valor inteiro que especifica o status de uma requisipio HTTP. Seus valores possfveis 
estao enumerados naTabela 18-1. Os simbolos na primeira coluna sao constantes definidas na cons- 
trutora XMLHttpRequest. Essas constantes fazem parte da especificapio XMLHttpRequest, mas os 
navegadores mais antigos e o IE8 nao as definem, sendo que frequentemente se ve codigo contendo 
o valor 4, em vez de XMLHttpRequest.DONE. 


Tabela 18-1 Valores de readyState de XMLHttpRequest 


Constante Valor 

Significado 

UNSEN1 0 

openQ ainda nao foi chamado 

OPENED 1 

openQfoi chamado 

HEADERS_RECEIVED 2 

Os cabe^alhos foram recebidos 

LOADING 3 

0 corpo da resposta esta sendo recebido 

DONE 4 

A resposta esta completa 


Teoricamente, o evento readystatechange e disparado sempre que a propriedade readyState muda. 
Na pratica, o evento pode nao ser disparado quando readyState muda para 0 ou 1. Frequentemente, 
ele e disparado quando sendQ e chamado, mesmo que readyState permanepi em OPENED quando 







486 Parte II JavaScript do lado do cliente 


isso acontecer. Alguns navegadores disparam o evento varias vezes durante o estado LOADING para 
fornecer feedback do andamento. Todos os navegadores disparam o evento readystatechange quando 
readyState mudou para o valor 4 e a resposta do servidor esta completa. Contudo, como o evento 
tambem e disparado antes que a resposta esteja completa, as rotinas de tratamento de evento sempre 
devem testar o valor de readyState. 

Para receber eventos readystatechange, configure a propriedade onreadystatechange do objeto XM- 
LHttpRequest em sua fun^ao de tratamento de evento. Voce tambem pode usar addEventListener() 
(ou attachEvent() no IE8 e anteriores), mas geralmente so precisa de uma rotina de tratamento por 
pedido e e mais facil simplesmente configurar onreadystatechange. 

O Exemplo 18-2 define uma funqao getTextQ que demonstra como receber eventos readystatechan¬ 
ge. Primeiro, a rotina de tratamento de evento garante que a requisicao esteja completa. Se estiver, 
ela verifica o codigo de status da resposta para garantir que a requisicao foi bem-sucedida. Entao, 
examina o cabeqalho “Content-Type” para verificar se a resposta foi do tipo esperado. Se todas as tres 
condi^oes forem satisfeitas, ela passa o corpo da resposta (como texto) para uma funijao de callback 
especificada. 

Exemplo 18-2 Obtendo uma resposta HTTP onreadystatechange 

// Faz uma requisicao HTTP GET solicitando o conteudo do URL especificado. 

// Quando a resposta chega com sucesso, verifica se e texto puro 
// e, se for, a passa para a fun^ao callback especificada 
function getText(url, callback) { 

var request = new XMLHttpRequestQ; // Cria nova requisicao 

request.open("GET", url); // Especifica o URL a ser buscado 

request.onreadystatechange = functionQ { // Define receptor de evento 

// Se a requisicao esta completa e foi bem-sucedida 
if (request.readyState === 4 && request.status === 200) { 
var type = request.getResponseHeader("Content-Type"); 
if (type.match(/ A text/)) // Certifica-se de que a resposta seja texto 
callback(request.responseText); // A passa para callback 

} 

}; 

request.send(null); // Envia a requisicao agora 

} 

18.1.2.1 Respostas sincronas 

Por sua propria natureza, as respostas HTTP sao mais bem manipuladas de forma assincrona. Con¬ 
tudo, a XMLHttpRequest tambem suporta respostas sincronas. Se voce passar false como terceiro 
argumento para open(), o metodo sendQ vai bloquear ate que o pedido seja concluido. Nesse caso, 
nao ha necessidade de usar uma rotina de tratamento de evento: quando send() retorna, voce pode 
apenas verificar as propriedades status e responseText do objeto XMLHttpRequest. Compare este 
codigo sincrono com a fun910 getTextQ do Exemplo 18-2: 

// Faz urn pedido HTTP GET sincrono solicitando 0 conteudo do URL especificado. 

// Retorna 0 texto da resposta ou dispara urn erro, caso 0 pedido nao seja bem-sucedido 
// ou se a resposta nao era texto. 
function getTextSync(url) { 

var request = new XMLHttpRequestQ; // Cria nova requisicao 
request.open("GET", url, false); // Passa false para sincrono 
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request.send(null); // Envia a requisiqao agora 

// Dispara um erro se o pedido nao era 200 OK 

if (request.status !== 200) throw new Error(request.statusText); 

// Dispara um erro se o tipo era errado 

var type = request.getResponseHeader("Content-Type"); 

if (!type.match(/ A text/)) 

throw new Error("Expected textual response; got: " + type); 
return request.responseText; 

} 

Os pedidos sfncronos sao tentadores, mas devem ser evitados. JavaScript do lado do cliente e de thre¬ 
ad unico e quando o metodo send/) bloqueia, normalmente congela toda a interface com o usuario 
do navegador. Se o servidor que voce esta conectando estiver respondendo lentamente, o navegador 
de seu usuario vai congelar. Contudo, consulte a Se^ao 22.4 para ver um contexto no qual e aceitavel 
fazer pedidos sfncronos. 

18.1.2.2 Decodificando a resposta 

Nos exemplos anteriores, supomos que o servidor enviou uma resposta textual, com um tipo MIME 
como “text/plain”, “text/html” ou “text/css”, e a recuperamos com a propriedade responseText do 
objeto XMLHttpRequest. 

Entretanto, existem outras maneiras de manipular a resposta do servidor. Se o servidor envia um 
documento XML ou XHTML como resposta, voce pode recuperar uma representafao analisa- 
da do documento XML por meio da propriedade responseXML. O valor dessa propriedade e um 
objeto Document, sendo que voce pode pesquisa-lo e percorre-lo usando as tecnicas mostradas 
no Capftulo 15. (A versao preliminar da especificafao XHR2 diz que os navegadores tambem 
devem analisar automaticamente as respostas de tipo “text/html” e torna-las disponfveis como 
objetos Document por meio de responseXML, mas os navegadores da epoca em que este livro esta- 
va sendo escrito nao faziam isso.) 

Se o servidor quer enviar dados estruturados, como um objeto ou array, como resposta, pode 
transmitir esses dados como uma string codificada com JSON (Se^ao 6.9). Ao recebe-la, voce 
passaria a propriedade responseText para ISON.parse/). O Exemplo 18-3 e uma generaliza?ao do 
Exemplo 18-2: ele faz uma requisi?ao GET solicitando o URL especificado e passa o conteudo 
desse URL para a fun^ao de callback especificada quando o conteudo esta pronto. Mas, em vez 
de sempre passar texto, ele passa um objeto Document ou um objeto decodificado com ISON. 
parse() ou uma string. 

Exemplo 18-3 Analisando a resposta HTTP 

// Faz uma requisiqao HTTP GET solicitando o conteudo do URL especificado. 

// Ouando a resposta chega, a passa para a funcao callback como um 

// objeto Document XML analisado, um objeto analisado com ISON ou uma string. 

function get(url, callback) { 

var request = new XMLHttpRequest/); // Cria nova requisiqao 

request.open("GET", url); // Especifica o URL a ser buscado 
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request.onreadystatechange = functionQ { // Define o ouvinte de evento 

// Se a requisicao esta completo e foi bem-sucedido 
if (request.readyState === 4 && request.status === 200) { 

// Obtem o tipo da resposta 

var type = request.getResponseHeader(“Content-Type”); 

// Verifica o tipo para que nao obtenhamos documentos HTML no futuro 
if (type.indexOf("xml") !== -1 && request.responseXML) 

callback(request.responseXML); // Resposta Document 

else if (type === "application/json") 

callback(JSON.parse(request.responseText)); // Resposta JSON 

else 

callback(request.responseText); // Resposta string 

} 

}; 

request.send(null); // Envia a requisiqao agora 

} 

O Exemplo 18-3 verifica o cabetjalho “Content-Type” da resposta e trata de respostas “application/ 
json” de forma especial. Outro tipo de resposta que talvez voce queira “decodificar” de modo especial 
e “application/javascript” ou “text/javascript”. Voce pode usar XMLHttpRequest para solicitar um 
script JavaScript e entao usar uma evalQ (Se<jao 4.12.2) global para executar esse script. No entanto, 
nesse caso e desnecessario usar um objeto XMLHttpRequest, pois os recursos de script de HTTP 
do proprio elemento <script> sao suficientes para baixar e executar um script. Consulte o Exemplo 
13-4 e tenha em mente que o elemento <script> pode fazer pedidos HTTP de varias origens que sao 
proibidos para a API XMLHttpRequest. 

Os servidores Web frequentemente respondem aos pedidos HTTP com dados binarios (arquivos 
de imagem, por exemplo). A propriedade responseText so serve para texto e nao pode manipular 
respostas binarias corretamente, mesmo que voce use o metodo charCodeAtQ da string resultante. 
A XHR2 define uma maneira de manipular respostas binarias, mas quando este livro estava sendo 
escrito, os fornecedores de navegador nao a tinham implementado. Consulte a Se^ao 22.6.2 para 
saber mais detalhes. 

A decodifica?ao correta de uma resposta do servidor presume que ele envia um cabe?alho “Con¬ 
tent-Type” com o tipo MIME correto para a resposta. Se um servidor enviar um documento 
XML sem configurar o tipo MIME apropriado, por exemplo, o objeto XMLHttpRequest nao 
vai analisa-lo e vai configurar a propriedade responseXML. Ou entao, se um servidor incluir 
um parametro “charset” incorreto no cabe^alho content-type, o objeto XMLHttpRequest vai 
decodificar a resposta usando a codificaqao errada e os caracteres de responseText poderao estar 
errados. A XHR2 define um metodo overrideMimeTypeQ para tratar desse problema e varios na- 
vegadores ja o implementaram. Se voce conhece o tipo MIME de um recurso melhor do que 
o servidor, passe o tipo de overrideMimeTypeQ antes de chamar sendQ - isso vai fazer com que 
XMLHttpRequest ignore o cabe?alho content-type e use o tipo que voce especificar. Suponha 
que voce esteja baixando um arquivo XML que pretende tratar como texto puro. Voce pode usar 
setOverrideMimeTypeQ para permitir que o objeto XMLHttpRequest saiba que nao precisa anali- 
sar o arquivo em um documento XML: 

// Nao processa a resposta como um documento XML 
request.overrideMimeType(''text/plain; charset=utf-8") 
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18.1.3 Codificando o corpo da requisigao 

As requisites HTTP POST incluem um corpo contendo os dados que o cliente esta passando para 
o servidor. No Exemplo 18-1, o corpo da requisite era simplesmente uma string de texto. Frequen- 
temente, contudo, queremos enviar dados mais complicados junto com uma requisite HTTP. Esta 
seto demonstra diversas maneiras de fazer isso. 

18.1.3.1 Pedidos codificados como formularios 

Considere os formularios HTML. Quando o usuario envia um formulario, os dados nele presen- 
tes (os nomes e valores de cada um dos elementos do formulario) sao codificados em uma string e 
enviados junto com a requisite. Por padrao, os formularios HTML sao postados (com POST) no 
servidor e os dados do formulario codificados sao usados como corpo da requisite. O esquema 
de codificato usado para dados de formulario e relativamente simples: faz a codificato de URI 
normal (substituindo caracteres especiais por codigos de escape hexadecimais) no nome e no valor 
de cada elemento do formulario, separa o nome e valor codificados com um sinal de igualdade e 
separa esses pares nome/valor com simbolos de E comercial. A codificato de um formulario simples 
poderia ser como a seguinte: 

find=pizza&zipcode=02134&radius=lkm 

Este formato de codificato de dados de formulario tern um tipo MIME formal: 
application/x-www-form-urlencoded 

Voce deve configurar o cabepilho de requisite “Content-Type” com esse valor ao postar (com 
POST) dados de formulario desse tipo. 

Note que esse tipo de codificato nao exige um formulario HTML e, na verdade, nao vamos tra- 
balhar diretamente com formularios neste capftulo. Nos aplicativos Ajax, e provavel que exista um 
objeto JavaScript que voce queira enviar para o servidor. (Esse objeto pode ser extrafdo da entrada 
do usuario em um formulario HTML, mas isso nao importa aqui.) Os dados mostrados acima po- 
deriam ser a representato codificada em formulario deste objeto JavaScript: 

{ 

find: "pizza", 
zipcode: 02134, 
radius: "lkm" 

} 

A codificato de formularios e tao usada na Web e tao bem suportada em todas as linguagens de 
programato do lado do servidor, que codificar como formulario dados que nao sao de formulario 
em geral e o mais facil a fazer. O Exemplo 18-4 demonstra como codificar como formulario as pro- 
priedades de um objeto. 

Exemplo 18-4 Codificando um objeto para uma requisito HTTP 

/** 

* Codifica as propriedades de um objeto como se fossem pares nome/valor de 

* um formulario HTML, usando o formato application/x-www-form-urlencoded 
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} 


function encodeFormData(data) { 

if (!data) return // Sempre retorna uma string 

var pairs = []; // Para conter pares nome=valor 

for(var name in data) { // Para cada nome 

if (Idata.hasOwnProperty(name)) continue; 
if (typeof data[name] === "function") continue; 
var value = data[name] .toStringQ; 
name = encodeURIComponent(name).replace("%20", "+"); 
value = encodeURIComponent(value).replace("%20", "+"); 
pairs.push(name + "=" + value); 


// Pula herdadas 
// Pula metodos 
// Valor como string 
// Codifica name 
// Codifica value 
// Lembra o par name=value 


} 

return pairs.join('&'); // Retorna pares unidos, separados com & 


Com essa funipao encodeFormDataQ definida, podemos escrever facilmente utilitarios como a funijao 
postData() do Exemplo 18-5. Note que, por simplicidade, essa fun^ao postData() (e fun<;6es seme- 
lhantes nos exemplos a seguir) nao processa a resposta do servidor. Quando a resposta esta completa, 
ela passa o objeto XMLHttpRequest inteiro para a fun^ao de callback especificada. Esse callback e 
responsavel por veriflcar o codigo de status da resposta e extrair o texto da resposta. 


Exemplo 18-5 Fazendo uma requisi^ao HTTP POST com dados codificados como formulario 
function postData(url, data, callback) { 
var request = new XMLHttpRequest(); 

request.open("P0ST", url); // Posta (com POST) no url especificado 

request.onreadystatechange = functionQ { // Rotina de tratamento de evento simples 

if (request.readyState === 4 && callback) // Ouando a resposta esta completa 
callback(request); // chama a funqao callback. 

}; 

request.setRequestHeader("Content-Type", // Configura Content-Type 

"application/x-www-form-urlencoded"); 

request.send(encodeFormData(data)); // Envia dados codificados como formulario 

} 

Dados de formulario tambem podem ser submetidos usando GET, e quando o proposito do 
formulario de submissao e fazer uma consulta apenas de leitura, GET e mais apropriado que 
POST. Os pedidos GET nunca tern corpo, de modo que a “carga util” de dados codificados 
como formulario precisa ser enviada para o servidor como a parte do URL referente a consulta 
(apos um ponto de interroga?ao). A fun^ao utilitaria encodeFormDataQ tambem pode ser util para 
esse tipo de pedido GET e o Exemplo 18-6 demonstra como usa-la. 


Exemplo 18-6 Fazendo um pedido GET com dados codificados como formulario 

function getData(url, data, callback) { 
var request = new XMLFittpRequestQ; 

request.open("CET", url + // Obtem (com GET) o url especificado 

"?" + encodeFormData(data)); // com os dados codificados adicionados 
request.onreadystatechange = functionQ { // Rotina de tratamento de evento simples 

if (request.readyState === 4 && callback) callback(request); 

}; 

request.send(null); // Envia a requisiqao 
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Os formularios HTML usam se^oes de consulta codificadas como formulario para codificar dados 
em um URL, mas o uso de XMLHttpRequest nos da a liberdade de codificar nossos dados como 
quisermos. Com suporte apropriado no servidor, nossos dados de consulta de pizza poderiam ser 
codificados em um URL mais legivel como o seguinte: 
http://restaurantfinder.example.com/02134/lkin/pizza 


18.1.3.2 Pedidos codificados como JSON 

O uso de codificaqao de formulario no corpo de requisites POST e uma convenfao comum, mas 
de forma alguma e um requisito do protocolo HTTP. Nos ultimos anos, o formato JSON ganhou 
popularidade como formato de troca na Web. O Exemplo 18-7 mostra como voce poderia codifi¬ 
car um corpo de solicita?ao usando JSON.stringifyQ (Sed« 6.9). Note que esse exemplo difere do 
Exemplo 18-5 apenas nas duas ultimas linhas. 

Exemplo 18-7 Fazendo uma solicita^ao HTTP POST com um corpo codificado com JSON 
function postJSON(url, data, callback) { 
var request = new XMLHttpRequestQ; 

request.open("P0ST", url); // Posta (com POST) no url especificado 

request.onreadystatechange = functionQ { // Rotina de tratamento de evento simples 

if (request.readyState === 4 && callback) // Ouando a resposta esta completa 
callback(request); // chama a funcao callback. 

h 

request.setRequestHeader("Content-Type", "application/json"); 
request.send(JSON.stringify(data)); 

} 

18.1.3.3 Pedidos codificados como XML 

As vezes a XML tambem e usada como codificado para transferencia de dados. Em vez de expres- 
sarmos nossa consulta de pizza como uma versao codificada como formulario ou com JSON de 
um objeto JavaScript, poderfamos representa-la como um documento XML. Ela poderia ser como 
segue, por exemplo: 

<query> 

<find zipcode="02i34" radius='Tkm"> 

</find> 

</query> 

Em todos os exemplos mostrados ate aqui, o argumento do metodo send() de XMLHttpRequest 
foi uma string ou null. Na verdade, voce tambem pode passar um objeto Document XML aqui. O 
Exemplo 18-8 demonstra como criar um objeto Document XML simples e usa-lo como corpo de 
uma solicitado HTTP. 

Exemplo 18-8 Uma solicitado HTTP POST com um documento XML como corpo 

// Codifica what, where e radius em um documento XML e os posta no 
// url especificado, chamando callback quando a resposta e recebida 
function postOuery(url, what, where, radius, callback) { 
var request = new XMLHttpRequest(); 
request.open("P0ST", url); // 


Posta (com POST) no url especificado 
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request.onreadystatechange = functionQ { // Rotina de tratamento de evento simples 

if (request.readyState === 4 && callback) callback(request); 

}; 


// Cria um documento XML com elemento-raiz <query> 

var doc = document.implementa<;ao.createDocument("", "query", null); 

var query = doc.documentElement; // 0 elemento <query> 

var find = doc.createElement("find"); // Cria um elemento <find> 

query.appendChild(find); // E o adiciona em <query> 

find.setAttribute("zipcode", where); // Configura atributos em <find> 

find.setAttribute("radius", radius); 

find.appendChild(doc.createTextNode(what)); // E configura o conteudo de <find> 


// Agora envia os dados codificados como XML para o servidor. 

// Note que Content-Type sera configurado automaticamente. 
request.send(doc); 

} 

Note que o Exemplo 18-8 jamais configura o cabegalho “Content-Type” para a solicitagao. Quan- 
do voce passa um documento XML para o metodo send() sem antes especificar um cabegalho 
Content-Type, o objeto XMLHttpRequest configura um cabegalho apropriado automaticamente. 
(Da mesma forma, se voce passar uma string para send() e nao tiver especificado um cabegalho Con¬ 
tent-Type, o objeto XMLHttpRequest vai adicionar automaticamente um cabegalho “text/plain; 
charset=UTL-8”. O codigo no Exemplo 18-1 configura esse cabegalho explicitamente, mas isso nao 
e obrigatorio para corpos de requisites de texto puro. 


18.1.3.4 Carregando um arquivo 

Uma das caracteristicas dos formularios HTML e que, quando o usuario selecionar um arquivo por 
meio de um elemento <input type="file">, o formulario vai enviar o conteudo desse arquivo no 
corpo da requisigao POST gerada por ele. Os formularios HTML sempre puderam carregar arqui- 
vos, mas ate pouco tempo nao era possivel fazer o mesmo com a API XMLHttpRequest. Contudo, a 
API XHR2 permite carregar arquivos passando-se um objeto Pile para o metodo send(). 

Nao ha uma construtora de objeto File (): os scripts so podem obter objetos Pile que representam ar¬ 
quivos selecionados pelo usuario. Nos navegadores que suportam objetos Pile, todo elemento <input 
type="file"> tern uma propriedade files que e um objeto semelhante a um array de objetos Pile. 
A API de arrastar e soltar (Segao 17.7) tambem permite acessar os arquivos que o usuario “solta” 
em um elemento, por intermedio da propriedade dataTransfer.files do evento drop. Vamos ver 
mais sobre o objeto Pile na Segao 22.6 e na Segao 22.7. Por enquanto, podemos trata-lo como uma 
represen tagao completamente opaca de arquivo selecionado pelo usuario, conveniente para carregar 
por meio de send(). O Exemplo 18-9 e uma fungao JavaScript discreta que adiciona uma rotina 
de tratamento de evento change em certos elementos de carregamento de arquivo, para que possa 
postar (com POST) automaticamente o conteudo de qualquer arquivo selecionado em um URL 
especificado. 

Exemplo 18-9 Carregamento de arquivo com uma requisigao HTTP POST 

// Localiza todos os elementos <input type="file"> com um atributo data-uploadto 
// e registra uma rotina de tratamento onchange para que qualquer arquivo selecionado 
// seja postado (com POST) automaticamente no URL "uploadto" especificado. 
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// A resposta do servidor e ignorada. 

whenReady(function() { // Executa quando o documento esta pronto 

var elts = document.getElementsByTagName("input"); // Todos os elementos de entrada 
for(var i = 0; i < elts.length; i++) { // Itera por eles 

var input = elts[i]; 

if (input.type !== "file") continue; // Pula todos os elementos, menos 

// o de carregamento de arquivo 
var url = input.getAttribute("data-uploadto"); // Obtem o URL para carregamento 
if (!url) continue; // Pula todos sem url 


}); 


input.addEventListener("change", functionQ { // Quando o usuario seleciona 


var file = this.files[0]; 

if ((file) return; 

var xhr = new XMLHttpRequestQ; 

xhr.open("POST", url); 

xhr.send(file); 

}, false); 


// arquivo 

// Presume uma selecao de arquivo unico 
// Se nao for arquivo, nao faz nada 
// Cria uma nova requisiqao 
// Posta (com POST) no URL 
// Envia o arquivo como corpo 


Conforme vamos ver na Seqao 22.6, o tipo File e um subtipo do tipo mais geral Blob. A XHR2 
permite passar qualquer objeto Blob para o metodo send(). A propriedade type do objeto Blob 
sera usada para conflgurar o cabeqalho Content-Type para o carregamento, caso voce mesmo nao 
o configure explicitamente. Se precisar carregar dados binarios que voce gerou, pode usar as 
tecnicas mostradas na Seqao 22.5 e na Seqao 22.6.3 para converte-los em um Blob e utiliza-lo 
como corpo do pedido. 


18.1.3.5 Pedidos multipart/form-data 

Quando os formularios HTML contem elementos de carregamento de arquivo e tambem outros 
elementos, o navegador nao pode usar codificaqao de formulario normal e deve postar (com POST) 
o formulario usando um content-type especial conhecido como “multipart/form-data”. Essa codifi¬ 
caqao envolve o uso de longas strings de “limite” para separar o corpo da requisiqao em varias partes. 
Para dados textuais, e possivel criar corpos de requisiqao “multipart/form-data” manualmente, mas 
isso e complicado. 

A XHR2 define uma nova API FormData que simplifica os corpos de pedido de varias partes. Pri- 
meiramente, crie um objeto FormData com a construtora FormData () e, em seguida, chame o me¬ 
todo append () desse objeto tantas vezes quantas forem necessarias para adicionar as “partes” (podem 
ser strings ou objetos File ou Blob) individuals na requisiqao. Por fim, passe o objeto FormData para 
o metodo send(). O metodo send() vai definir uma string de limite apropriada e vai conflgurar o 
cabeqalho “Content-Type” da requisiqao. O Exemplo 18-10 demonstra o uso de FormData e vamos 
ve-lo novamente no Exemplo 18-11. 

Exemplo 18-10 Postando (com POST) corpo de requisiqao multipart/form-data 

function postFormData(url, data, callback) { 
if (typeof FormData === "undefined") 

throw new Error("FormData is not implemented"); 
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var request = new XMLHttpRequestQ; // Nova requisiqao HTTP 
request.open("P0ST"j url); // Posta (com POST) no url especificado 

request.onreadystatechange = function() { // Lima rotina de tratamento de evento simples, 
if (request.readyState === 4 && callback) // Ouando a resposta esta completa 
callback(request); // ...chama a funcao callback. 

}; 

var formdata = new FormDataQ; 
for(var name in data) { 

if (Idata.hasOwnProperty(name)) continue; // Pula propriedades herdadas 

var value = data[name]; 

if (typeof value === "function") continue; // Pula metodos 

// Cada propriedade se torna uma "parte" da requisicao. 

// Objetos File sao permitidos aqui 

formdata.append(name, value); // Adiciona nome/valor como uma parte 

} 

// Envia os pares nome/valor no corpo de uma requisiqao multipart/form-data. Cada 
// par e uma parte da requisiqao. Note que o envio configura o 

// cabeqalho Content-Type automaticamente, quando voce o passa para urn objeto FormData 
request.send(formdata); 

} 

18.1.4 Eventos progress de HTTP 

Nos exemplos anteriores, utilizamos o evento readystatechange para detectar a conclusao de uma 
requisiqao HTTP. A versao preliminar da especificaqao XHR2 define um conjunto de eventos mais 
uteis e eles ja foram implementados pelo Firefox, Chrome e Safari. Nesse novo modelo de evento, o 
objeto XMLHttpRequest dispara diferentes tipos de eventos em diferentes fases do pedido, de modo 
que nao e mais necessario verificar a propriedade readyState. 

Nos navegadores que os suportam, esses novos eventos sao disparados como segue. Quando o me- 
todo send() e chamado, e disparado um unico evento loadstart. Enquanto a resposta do servidor 
esta sendo baixada, o objeto XMLHttpRequest dispara eventos progress, normalmente a cada 50 
milissegundos mais ou menos, e esses eventos podem ser usados para fornecer feedback ao usuario 
sobre o andamento da requisiqao. Se uma requisiqao e concluida muito rapidamente, ela pode nunca 
disparar um evento progress. Quando uma requisiqao e concluida, um evento load e disparado. 

Uma requisiqao completa nao e necessariamente uma requisiqao bem-sucedida e sua rotina de tra¬ 
tamento para o evento load deve verificar o codigo de status do objeto XMLHttpRequest para ga- 
rantir que foi recebida uma resposta HTTP “200 OK”, em vez de “404 Not Found”, por exemplo. 

Existem tres maneiras de uma requisiqao HTTP deixar de ser concluida e tres eventos correspon- 
dentes. Se uma requisiqao atinge o tempo-limite, e disparado o evento timeout. Se uma requisiqao 
e cancelado, e disparado o evento abort. (Os tempos-bmite e o metodo abort() serao abordados na 
Seqao 18.1.5.) Por fim, outros erros de rede, como redirecionamentos em demasia, podem impedir 
a conclusao de um pedido e, quando isso acontece, o evento error e disparado. 

Um navegador vai disparar apenas um dos eventos load, abort, timeout ou error para qualquer 
requisiqao feita. A versao preliminar da XHR2 diz que os navegadores devem disparar um evento 
loadend quando um desses eventos tiver ocorrido. Entretanto, quando este livro estava sendo escrito, 
os navegadores nao implementavam loadend. 
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Voce pode chamar o metodo addEventListenerQ do objeto XMLHttpRequest a fim de registrar 
rotinas de tratamento para cada um desses eventos progress. Se voce tem somente uma rotina de 
tratamento para cada tipo de evento, geralmente e mais facil apenas configurar a propriedade da ro¬ 
tina de tratamento correspondente, como onprogress e onload. Voce pode ate usar a existencia dessas 
propriedades de evento para testar se um navegador suporta eventos progress: 
if ("onprogress" in (new XMLHttpRequestQ)) { 

// Eventos progress sao suportados 

} 

O objeto evento associado a esses eventos progress tem tres propriedades uteis, alem das proprie¬ 
dades normais do objeto Event, como type e timestamp. A propriedade loaded e o niimero de bytes 
transferidos ate o momento. A propriedade total e o comprimento total (em bytes) dos dados a 
serem transferidos, do cabe^alho “Content-Length” ou 0, caso o comprimento do conteudo nao 
seja conhecido. Por fim, a propriedade lengthComputable e true se o comprimento do conteudo e 
conhecido e, caso contrario, e false. Obviamente, as propriedades total e loaded sao especialmente 
uteis nas rotinas de tratamento de evento progress: 

request.onprogress = function(e) { 
if (e.lengthComputable) 

progress.innerHTML = Math.round(l00*e.loaded/e.total) + "% Complete"; 

} 

18.1.4.1 Eventos progress de upload 

Alem de definir esses eventos uteis para monitorar o download de uma resposta HTTP, XHR2 tam- 
bem permite que os eventos sejam usados para monitorar o upload de uma requisRao HTTP. Nos 
navegadores que implementaram esse recurso, o objeto XMLHttpRequest tera uma propriedade 
upload. O valor da propriedade upload e um objeto que define um metodo addEventListener() e 
um conjunto completo de propriedades do evento progress, como onprogress e onload. (Contudo, 
o objeto upload nao define uma propriedade onreadystatechange: os uploads so disparam os novos 
tipos de evento.) 

Voce pode usar as rotinas de tratamento de evento upload exatamente como usaria as rotinas de 
tratamento de evento progress normais. Para um objeto XMLHttpRequest x, configure x. onprogress 
para monitorar o andamento do download da resposta. E configure x. upload.onprogress para moni¬ 
torar o andamento do upload da requisRao. 

O Exemplo 18-11 demonstra como usar eventos progress de upload para dar feedback do andamen¬ 
to de upload para o usuario. Esse exemplo tambem demonstra como obter objetos bile da API Drag- 
-and-Drop e como fazer o upload de varios arquivos em uma unica requisRao XMLHttpRequest 
com a API LormData. Esses recursos ainda estavam em versao draft quando este livro estava sendo 
escrito e o exemplo nao funciona em todos os navegadores. 

Exemplo 18-11 Monitorando andamento de upload HTTP 

// Localiza todos os elementos da classe "fileDropTarget" e registra rotinas de 
// tratamento de evento DnD para faze-las responder as solturas (drop) de arquivo. Quando 
// os arquivos sao soltos, carrega-os no URL especificado no atributo data-uploadto. 
whenReady(function() { 
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var elts = document.getElementsByClassName("fileDropTarget"); 
for(var i = 0; i < elts.length; i++) { 
var target = elts[i]; 

var url = target.getAttribute("data-uploadto"); 
if (lurl) continue; 

createFilellploadDropTarget(target, url); 


function createFileUploadDropTarget(target, url) { 

// Monitora se estamos fazendo upload de algo no momentOj para que possamos 
// rejeitar solturas. Poderiamos manipular varios uploads concomitantes, mas 
// isso tornaria a notifica^ao de andamento complicada demais para este exemplo. 
var uploading = false; 

console.log(target, url); 

target.ondragenter = function(e) { 
console.log("dragenter"); 

if (uploading) return; // Ignora arrastos, se estivermos ocupados 
var types = e.dataTransfer.types; 
if (types && 

((types.contains && types.contains("Files")) || 

(types.indexOf && types.indexOf("Files") !== -a))) { 
target.classList.add("wantdrop"); 
return false; 

} 

}; 

target.ondragover = function(e) { if ((uploading) return false; }; 
target.ondragleave = function(e) { 

if ((uploading) target.classList.remove("wantdrop”); 

}; 

target.ondrop = function(e) { 
if (uploading) return false; 
var files = e.dataTransfer.files; 
if (files && files.length) { 
uploading = true; 

var message = "Uploading files:<ul>"; 
for(var i = 0; i < files.length; i++) 

message += "<li>" + files[i].name + "</li>"; 
message += "</ul>"; 

target.innerHTML = message; 

target.classList.remove("wantdrop"); 

target.classList.add("uploading"); 

var xhr = new XMLHttpRequestQ; 
xhr.open("POST", url); 
var body = new FormData(); 

for(var i = 0; i < files.length; i++) body.append(i, files[i]); 
xhr.upload.onprogress = function(e) { 
if (e.lengthComputable) { 

target. innerFITML = message + 

Math.round(e.loaded/e.total*100) + 

"% Complete"; 

} 

h 
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xhr.upload.onload = function(e) { 
uploading = false; 

target.classList.remove("uploading"); 
target.innerHTML = "Drop files to upload"; 

}; 

xhr.send(body); 
return false; 

} 

target.classList.remove("wantdrop"); 

} 

} 

}); 

18.1.5 Cancelando requisites e tempos-limite 

Uma requisite) HTTP em andamento pode ser cancelada chamando-se o metodo abort() do objeto 
XMLHttpRequest. O metodo abortQ esta disponivel em todas as versoes de XMLHttpRequest e, 
em XHR2, chamar abortQ dispara um evento abort no objeto. (Alguns navegadores suportavam 
eventos abort quando este livro estava sendo escrito. A presen^a de uma propriedade “onabort” pode 
ser testada no objeto XMLHttpRequest.) 

A principal razao para se chamar abortQ e cancelar ou interromper inquisi^oes que demoram mui- 
to para completar ou quando as respostas se tornam irrelevantes. Suponha que voce esteja usando 
XMLHttpRequest para solicitar sugestoes de preenchimento automatico para um campo de entrada 
de texto. Se o usuario digita um novo caractere no campo antes que as sugestoes do servidor possam 
chegar, entao a requisi^ao pendente nao tern mais interesse e pode ser cancelada. 

XHR2 define uma propriedade timeout que especifica um tempo, em milissegundos, apos o qual 
uma requisRao sera cancelada automaticamente e tambem define um evento timeout, que deve ser 
disparado (em vez do evento abort) quando decorre um tempo-limite. Quando este livro estava 
sendo escrito, os navegadores nao implementavam esses tempos-limite automaticos (e seus objetos 
XMLHttpRequest nao tinham propriedades timeout ou ontimeout). Contudo, voce pode implemen- 
tar seus proprios tempos-limite com setTimeoutQ (Se<jao 14.1) e o metodo abortQ. O Exemplo 
18-12 demonstra como fazer isso. 

Exemplo 18-12 Implementando tempos-limite 

// Faz uma requisiqao HTTP GET solicitando o conteudo do URL especificado. 

// Se a resposta chega normalmente, passa responseText para a funcao callback. 

// Se a resposta nao chega em menos do que timeout ms, cancela a requisicao. 

// Os navegadores podem disparar "readystatechange" apos abortQ e, se foi 
// recebida uma requisiqao parcial, a propriedade status pode ser configurada, de modo 
// que precisamos ativar um flag para nao chamarmos a funcao callback para uma 
// resposta parcial que atingiu o tempo-limite. Esse problema nao surge se usamos o 
// evento load. 

function timedGetText(url, timeout, callback) { 

var request = new XMLHttpRequestQ; // Cria nova requisiqao. 

var timedout = false; // Tenhamos atingido o tempo-limite ou nao. 

// Inicia um timer que vai abortar o pedido apos timeout ms. 
var timer = setTimeout(function() { // Inicia um timer. Se disparado, 

timedout = true; // ativa um flag e, entao, 
request.abortQ; // cancela a requisiqao. 

}, 
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timeout); 


// Quanto tempo antes de fazermos isso 


request.open("CET", url); 


// Especifica o URL a ser buscado 
// Define ouvinte de evento. 


request.onreadystatechange = functionQ { 
if (request.readyState !== 4) return; 
if (timedout) return; 
clearTimeout(timer); 
if (request.status === 200) 


// Ignora requisites incompletas. 

// Ignora requisites canceladas. 

// Cancela tempo-limite pendente. 

// Se a requisite foi bem-sucedida 
// passa a resposta para a callback. 


callback(request.responseText); 


}; 


request.send(null); 


// Envia a requisicao agora 


} 


18.1.6 Requisitando HTTP de varias origens 


Como parte da polftica de seguranfa da mesma origem (Set« 13.6.2), o objeto XMLHttpRequest 
normalmente pode fazer requisites HTTP somente para o servidor do qual o documento que o uti- 
liza foi baixado. Essa restrifao fecha brechas de seguran^a, mas e autoritaria e tambem impede varios 
usos legftimos de requisites de varias origens. Voce pode usar URLs de varias origens com elementos 
<form> e <iframe>, e o navegador vai exibir o documento de origem multipla resultante. Mas, por 
causa da polftica da mesma origem, o navegador nao vai permitir que o script original inspecione o 
conteudo do documento com varias origens. Com XMLHttpRequest, o conteudo do documento e 
sempre exposto por meio da propriedade responseText; portanto a polftica da mesma origem nao per- 
mite que XMLHttpRequest faq:a requisites com varias origens. (Note que o elemento <script> nun- 
ca esteve sujeito a pok'tica da mesma origem: ele vai baixar e executar qualquer script, independente 
da origem. Conforme vamos ver na Seto 18.2, essa liberdade de fazer requisites com varias origens 
torna o elemento <script> uma alternativa de transporte Ajax atraente para XMLHttpRequest.) 

XHR2 permite requisites com varias origens para sites que consentem isso, enviando cabe^alhos 
CORS (Cross-Origin Resource Sharing) apropriados em suas respostas HTTP. Quando este livro 
estava sendo escrito, as versoes correntes de Firefox, Safari e Chrome suportavam CORS e o IE8 
suportava por meio de um objeto proprietario XDomainRequest que nao esta documentado aqui. 
Como programador Web, nao ha nada especial que voce precise fazer para que isso funcione: se o 
navegador suporta CORS para XMLHttpRequest e se o site para o qual voce esta tentando fazer um 
requisites com varias origens decidiu permitir requisites com varias origens com CORS, a polftica 
da mesma origem sera abrandada e suas requisites de varias origens simplesmente vao funcionar. 

Embora nao seja preciso fazer nada para que requisites com varias origens habilitadas para CORS 
funcionem, e importante entender alguns detalhes sobre a seguran^a. Primeiro, se voce passar um 
nome de usuario e uma senha para o metodo XMLHttpRequest open( ), eles nunca serao enviados 
com uma requisite com varias origens (isso possibilitaria tentativas distribufdas de decifrar senha). 
Alem disso, os pedidos de varias origens em geral nao incluem qualquer outra credencial de usuario: 
cookies e sinais de autenticato HTTP normalmente nao sao enviados como parte da requisite e 
qualquer cookie recebidos como parte de uma resposta de varias origens e descartado. Se sua requi¬ 
site de varias origens exige esses tipos de credenciais para ser bem-sucedida, voce deve configurar a 
propriedade withCredentials do objeto XMLHttpRequest como true, antes de enviar (com send( )) a 
requisite. E incomum ter de fazer isso, mas testar a presen^a da propriedade withCredentials e uma 
maneira de saber se existe suporte para CORS em seu navegador. 

O Exemplo 18-13 e um codigo JavaScript discreto que utiliza XMLHttpRequest para fazer requi¬ 
sites HTTP HEAD para baixar informates de tipo, tamanho e data sobre os recursos vinculados 
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pelos elementos <a> em um documento. As requisites HEAD sao feitas por solicitapio e as infor- 
mafoes de link resultantes sao exibidas em dicas de ferramenta. O exemplo presume que essas in¬ 
formates nao estarao disponiveis para links de varias origens, mas em navegadores habilitados para 
CORS, tenta baixa-las de qualquer forma. 

Exemplo 18-13 Solicitando detalhes de link com HEAD e CORS 

/** 

* linkdetails.js 

* Este modulo nao obstrusivo de JavaScript localiza todos os elementos <a> que tenham 

* um atributo href, mas nenhum atributo title, e adiciona uma rotina de tratamento de 

* evento onmouseover neles. A rotina de tratamento de evento faz um pedido HEAD do 

* objeto XMLHttpRequest para buscar detalhes sobre o recurso vinculado e, entao, 

* configura esses detalhes no atributo title do link para que sejam exibidos como uma 

* dica de ferramenta. 


whenReady(function() { 

// Ha alguma chance de que requisites com varias origens sejam bem-sucedidos? 
var supportsCORS = (new XMLHttpRequestQ).withCredentials !== undefined; 

// Itera por todos os links do documento 
var links = document.getElementsByTagName('a'); 
for(var i = 0; i < links.length; i++) { 
var link = links[i]; 

if (llink.href) continue; // Pula ancoras que nao sao hiperlinks 

if (link.title) continue; // Pula links que ja tern dicas de ferramenta 

// Se esse e um link de varias origens 

if (link.host !== location.host || link.protocol !== location.protocol) 

{ 

link.title = "Off-site link"; // Presume que nao podemos obter mais 
// informacoes 

if (!supportsCORS) continue; // Sai agora, se nao existir suporte para CORS 
// Caso contrario, podemos saber mais sobre o link 

// Portanto, vai em frente e registra as rotinas de tratamento de evento 
// para que possamos tentar. 


// Registra rotina de tratamento de evento para baixar detalhes do link em 
// mouseover 

if (link.addEventListener) 

link.addEventListenerC'mouseover", mouseoverHandler, false); 

else 

link.attachEvent("onmouseover", mouseoverHandler); 


function mouseoverHandler(e) { 

var link = e.target || e.srcElement; // 0 elemento <a> 
var url = link.href; // 0 URL do link 


var req = new XMLHttpRequestQ; 
req.open("HEAD", url); 
req.onreadystatechange = functionQ { 
if (req.readyState !== 4) return; 


// Nova requisicao 
// Solicita apenas os cabecalhos 
// Rotina de tratamento de evento 
// Ignora requisites incompletas 
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}); 


if (req.status === 200) { // Se for bem-sucedida 

var type = req.getResponseHeader("Content-Type"); 
var size = req.getResponseHeader("Content-Length"); 
var date = req.getResponseHeader("Last-Modified"); 

// Exibe os detalhes em uma dica de ferramenta. 
link.title = "Type: " + type + " \n" + 

"Size: " + size + " \n" + "Date: " + date; 

} 

else { 


// Se a requisiqao falhou e o link ainda nao tem uma 
// dica de ferramenta "Off-site link", entao exibe o erro. 
if (llink.title) 

link.title = "Couldn't fetch details: \n" + 
req.status + " " + req.statusText; 

} 

>; 

req.send(null); 


// Obtem 
// detalhes 
// do link 


// Remove a rotina de tratamento: queremos buscar esses cabecalhos apenas uma vez. 
if (link.removeEventListener) 

link.removeEventListener("mouseover", mouseoverHandler, false); 

else 

link. detachEvent("onmouseover", mouseoverHandler); 


18.2 HTTP por <script>: JSONP 

A introdugao deste capftulo mencionou que um elemento <script> pode ser usado como mecanismo 
de transporte Ajax: basta configurar o atributo src de um elemento <script> (e inseri-lo no docu- 
mento, caso ainda nao esteja la) e o navegador vai gerar uma requisigao HTTP para baixar o URL 
especificado. Os elementos <script> sao transportes Ajax uteis por um motivo importante: eles nao 
estao sujeitos a polftica da mesma origem, de modo que podem ser usados para solicitar dados de 
servidores que nao o seu proprio. Um motivo secundario para usar elementos <script> e que eles 
decodificam (isto e, executam) automaticamente corpos de resposta que consistem em dados codi- 
ficados com JSON. 


Scripts e seguranca 

Para usar um elemento <script> como transporte Ajax, voce tem de permitir que sua pagina Web execute 
qualquer codigo JavaScript que o servidor remoto opte por enviar. Isso significa que voce nao deve usar a 
tecnica descrita aqui com servidores nao confiaveis. E ao usa-la com servidores confiaveis, tenha em men- 
te que se um invasor puder entrar nesse servidor, podera assumir o controle de sua pagina Web, executar 
o codigo que quiser e exibir o conteudo que desejar, sendo que esse conteudo parecera ser proveniente 
de seu site. 

Dito isso, note que se tornou comum os sites usarem scripts de terceiros confiaveis, especialmente para 
incorporar anuncios ou"widgets"em uma pagina. Usar um elemento <script> como transporte Ajax para 
se comunicar com um servigo Web confiavel nao tem mais perigo do que isso. 
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A tecnica de usar um elemento <script> como transporte Ajax se tornou conhecida como JSONP: 
ela funciona quando o corpo da resposta a requisi^ao HTTP e codificado com JSON. O “P” signi- 
fica “preenchimento” ou “prefixo” - isso sera explicado em breve . 

Suponha que voce escreveu um servi^o que trata requisites GET e retorna dados codificados com 
JSON. Documentos da mesma origem podem usa-lo com XMLHttpRequest e ]S0N. parse( ), com 
codigo como o do Exemplo 18-3. Se voce habilita CORS em seu servidor, documentos de varias 
origens em novos navegadores tambem podem usar seu servi^o com XMLHttpRequest. Contudo, 
os documentos de varias origens em navegadores mais antigos, que nao suportam CORS, so podem 
acessar seu servRo com um elemento <script>. O corpo de sua resposta JSON e (por definRao) 
codigo JavaScript valido e o navegador vai executa-lo quando ele chegar. Executar dados codificados 
com JSON os decodifica, mas o resultado ainda e apenas dados, e nao faz nada. 

E ai que a parte P de JSONP entra em a^ao. Quando chamado por meio de um elemento <script>, 
seu servifo deve “preencher” sua resposta circundando-a com parenteses e prefixando-a com o nome 
de uma firnfao JavaScript. Em vez de apenas enviar dados JSON, como segue: 

[l, 2, {"buckle": "my shoe''}] 

Ele envia uma resposta preenchida com JSON, como segue: 

handleResponse( 

[l, 2, {"buckle": "my shoe''}] 

) 

Como corpo de um elemento <script>, essa resposta preenchida faz algo interessante: ela avalia os 
dados codificados com JSON (que, afinal, nada mais sao do que uma enorme expressao JavaScript) e 
entao os passa para a funijao handleResponseQ, a qual, presumimos, o documento container definiu 
para que faq:a algo de util com os dados. 

Para que isso funcione, precisamos de algum modo de dizer ao servRo que ele esta sendo chamado a 
partir de um elemento <script> e deve enviar uma resposta JSONP, em vez de uma resposta JSON 
pura. Isso pode ser feito com a adi^ao de um parametro de consulta no URL: anexando-se ?json (ou 
&json), por exemplo. 

Na pratica, os servifos que suportam JSONP nao impoem um nome de fun^ao, como “handleRes- 
ponse”, que todos os clientes devem implementar. Em vez disso, eles usam o valor de um parametro 
de consulta para permitir que o cliente especifique um nome de fun^ao e, entao, usam esse nome de 
fun$ao como preenchimento na resposta. O Exemplo 18-14 usa um parametro de consulta chamado 
“jsonp” para especificar o nome da fun^ao de callback. Muitos servi^os que suportam JSONP reconhe- 
cem esse nome de parametro. Outro nome comum e “callback”, e talvez voce tenha que modificar o 
codigo mostrado aqui para faze-lo funcionar com os requisitos especificos do servifo que precise usar. 

O Exemplo 18-14 define uma funijao getDSONPQ que faz uma requisRao JSONP. Esse exemplo e 
um pouco complicado e existem algumas coisas que voce deve notar a respeito dele. Primeiramente, 
observe como ele cria um novo elemento <script>, configura seu URL e o insere no documento. 

E essa inserQo que dispara a requisiQo HTTP. Segundo, note que o exemplo cria uma nova funqao de 
callback interna para cada pedido, armazenando a firn^ao como uma propriedade de get]S0NP(). Por 
fim, note que callback faz alguma limpeza necessaria: ela remove o elemento script e exclui a si mesma. 


Bob Ippolito ir 


srmo “JSONP” (http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonpf) em 2005. 
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Exemplo 18-14 Fazendo um pedido JSONP com um elemento script 

// Faz um pedido JSONP para o URL especificado e passa os dados 

// analisados da resposta para a funcao callback especificada. Adiciona um parametro de 
// consulta chamado "jsonp" no URL, para especificar o nome da funcao callback para a 
II requisiqao. 

function getJSONP(url, callback) { 

II Cria um nome de callback exclusivo apenas para essa requisicao 

var cbnum = "cb" + getJSONP.counter++; // Incrementa counter a cada vez 

var cbname = "getJSONP." + cbnum; // Como uma propriedade dessa funcao 


// Adiciona o nome de callback na string de consulta de url, usando codificaqao de 
II formulario 

// Usamos o nome de parametro "jsonp". Alguns serviqos habilitados para JSONP 
// podem exigir um nome de parametro diferente, como "callback", 
if (url.indexOf("?") === -l) // 0 URL ainda nao tern uma secao de consulta 

url += "?jsonp=" + cbname; // adiciona o parametro como seqao de consulta 
else // Caso contrario, 

url += "&jsonp=" + cbname; // adiciona-o como um novo parametro. 


// Cria o elemento script que vai enviar essa requisicao 
var script = document.createElement("script"); 


// Define a funqao callback que sera chamada pelo script 
getJSONP[cbnum] = function(response) { 
try { 

callback(response); // Manipula os dados da resposta 

} 

finally { // Mesmo que callback ou response tenham lancado um erro 

delete getJSONP[cbnum]; II Exclui essa funcao 

script.parentNode.removeChild(script); // Remove o script 

} 

}; 


// Agora dispara a requisiqao HTTP 

script.src = url; // Configura o url do script 

document.body.appendChild(script); // Adiciona-o no documento 

} 

getJSONP.counter = 0; // Um contador que usamos para criar nomes de callback exclusivos 

18.3 Comet com eventos Server-Sent 

A versao preliminar do padrao dos eventos Server-Sent define um objeto EventSource que torna 
simples escrever aplicativos Comet. Basta passar um URL para a construtora EventSourceQ e, entao, 
receber eventos message no objeto retornado: 

var ticker = new EventSource("stockprices.php"); 
ticker.onmessage = function(e) { 
var type = e.type; 
var data = e.data; 

// Agora processa o tipo de evento e as strings de dados do evento. 

} 
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O objeto evento associado a um evento message tem uma propriedade data que contem a string 
enviada pelo servidor como carga util desse evento. O objeto evento tambem tem uma propriedade 
type, como acontece com todos os objetos evento. O valor padrao e “message”, mas a origem do 
evento pode especificar uma string diferente para a propriedade. Uma unica rotina de tratamento 
de evento onmessage recebe todos os eventos da origem de evento de determinado servidor e pode 
envia-los, se necessario, com base em suas propriedades type. 

O protocolo Server-Sent Event e simples. O cliente inicia uma conexao com o servidor (quando 
cria o objeto EventSource) e o servidor mantem essa conexao aberta. Quando ocorre um evento, 
o servidor escreve linhas de texto na conexao. Uma transmissao de um evento possivel poderia ser 
como segue: 

event: bid configura o tipo do objeto evento 
data: C00C configura a propriedade data 
data: 999 anexa uma nova linha e maisdados 

uma linha em branco dispara o evento message 

Existem alguns detalhes adicionais no protocolo que permitem fornecer identificanoes para os even¬ 
tos e a um cliente que esteja restabelecendo a conexao, dizer ao servidor qual era a identifica^ao 
do ultimo evento que recebeu, para que um servidor possa reenviar qualquer evento que ele tenha 
perdido. Contudo, esses detalhes nao sao importantes aqui. 

Uma aplicaQo obvia para a arquitetura Comet e o chat online: um cliente de chat pode postar novas 
mensagens na sala de bate-papo com XMLHttpRequest e se inscrever no fluxo de conversa com um 
objeto EventSource. O Exemplo 18-15 demonstra como e facil escrever um cliente de bate-papo 
como esse com EventSource. 


Exemplo 18-15 Um cliente de chat simples, usando EventSource 
<script> 

window.onload = functionQ { 

// Cuida de alguns detalhes da interface do usuario 

var nick = prompt("Enter your nickname”); // Obtem o apelido do usuario 

var input = document.getElementById("input"); // Localiza o campo de entrada 

input.focusQ; // Configura o foco do teclado 


// Registra para notificaqao de novas mensagens usando EventSource 
var chat = new EventSource("/chat"); 
chat.onmessage = function(event) { 


var msg = event.data; 

var node = document.createTextNode(msg); 

var div = document.createElement("div"); 

div.appendChild(node); 

document.body.insertBefore(div, input); 

input.scrollIntoView(); 


// Quando uma nova mensagem chega 
// Obtem o texto do objeto evento 
// 0 transforma em um no de texto 
// Cria um <div> 

// Adiciona o no de texto em div 
// E adiciona div antes de input 
// Garante que o elemento input seja 


// Posta as mensagens do usuario no servidor usando XMLHttpRequest 

input.onchange = functionQ { // Quando o usuario pressiona return 
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var msg = nick + " + input.value; 

var xhr = new XMLHttpRequestQ; 
xhr.openf'POST", ''/chat''); 
xhr.setRequestHeader("Content-Type", 


// Nome de usuario mais entrada do usuario 
// Cria novo XHR 

// para postar (com POST) em /chat. 

// Especifica texto UTF-8 puro 


xhr.send(msg); 
input.value = "" 


"text/plain;charset=UTF-8"); 

/ Envia a mensagem 
/ Apronta-se para ma 


} 

}; 

</script> 

<!-- A interface com o usuario para chat e apenas urn campo de entrada de texto --> 
<!-- Novas mensagens de chat serao inseridas antes desse campo de entrada --> 
<input id="input" style="width:100%"/> 


Quando este livro estava sendo escrito, EventSource era suportado no Chrome e no Safari, sendo 
esperado que o Mozilla o implementasse no primeiro lanqamento apos o Firefox 4.0. Nos navegado- 
res (como o Firefox) cuja implementa?ao de XMFHttpRequest dispara um evento readystatechange 
(para readyState 3) quando ha download em andamento, e relativamente facil simular EventSource 
com XMFHttpRequest, e o Exemplo 18-16 mostra como isso pode ser feito. Com esse modulo de 
simulafao, o Exemplo 18-15 funciona no Chrome, no Safari e no Firefox. (O Exemplo 18-16 nao 
funciona no IE nem no Opera, pois suas implementa^oes de XMLHttpRequest nao geram eventos 
durante um download.) 


Exemplo 18-16 Simulando EventSource com XMLHttpRequest 

// Simula a API EventSource para navegadores que nao a suportam. 

// Exige um objeto XMLHttpRequest que envie eventos readystatechange quando 
// ha novos dados escritos em uma conexao HTTP de longa duracao. Note que 
// esta nao e uma implementaqao completa da API: ela nao suporta a 
// propriedade readyState, o metodo close() nem os eventos open e error. 

// Alem disso, o registro de evento para eventos message e feito apenas por meio da 
// propriedade onmessage -- esta versao nao define um metodo addEventListener. 
if (window.EventSource === undefined) { // Se EventSource nao estiver definido, 

window.EventSource = function(url) { // simula-o deste modo. 

var xhr; // Nossa conexao HTTP... 

// Usado nas rotinas de tratamento de evento. 

// Para que possamos identificar o que e novo. 

// Para verificar o tipo de resposta da propriedade. 
// Contem dados da mensagem 
// 0 campo de tipo de nossos objetos evento 
// Para sincronizar novamente com o servidor 
// Atraso entre tentativas de conexao 
// Configura como true para abandonar a conexao 


r evtsrc = this; 
r charsReceived = 0; 
r type = null; 

r eventName = "message"; 
r lastEventld = ""; 
r retrydelay = 1000; 
r aborted = false; 


// Cria um objeto XHR 
xhr = new XMLHttpRequestQ; 


// Define uma rotina de tratamento de evento para ele 
xhr.onreadystatechange = functionQ { 
switch(xhr.readyState) { 

case 3: processDataQ; break; // Ouando um trecho de dados chega 

case 4: reconnectQ; break; // Ouando a requisiqao fecha 




} 
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// E estabelece uma conexao de longa duracao por meio dele 
connectQ; 


// Se a conexao se fecha normalmente, espera um segundo e tenta reiniciar 
function reconnectQ { 

if (aborted) return; // Nao refaz a conexao apos um cancelamento 

if (xhr.status >= BOO) return; // Nao refaz a conexao apos um erro 

setTimeout(connect, retrydelay); // Espera um pouco e depois refaz a conexao 


// E assim que estabelecemos uma conexao 
function connectQ { 
charsReceived = 0; 
type = null; 
xhr.open("GET", url); 

xhr.setRequestHeader("Cache-Control", "no-cache"); 

if (lastEventld) xhr.setRequestHeader("Last-Event-ID", lastEventld); 

xhr.sendQ; 



// Cada vez que dados chegam, processa-os e dispara a rotina de tratamento de 
// onmessage 

// Esta funcao trata dos detalhes do protocolo Server-Sent Events 
function processDataQ { 

if (Itype) { // Verifica o tipo de resposta, se ainda nao verificamos 

type = xhr.getResponseHeader('Content-Type'); 
if (type !== "text/event-stream”) { 
aborted = true; 
xhr.abortQ; 

} 

} 

// Monitora o quanto recebemos e obtem apenas a 
// parte da resposta que ainda nao processamos. 
var chunk = xhr.responseText.substring(charsReceived); 
charsReceived = xhr.responseText.length; 

// Decompoe o trecho de texto em linhas e itera por elas. 

var lines = chunk.replace(/(\r\n|\r|\n)$/, "").split(/\r\n|\r|\n/); 

for(var i = 0; i < lines.length; i++) { 

var line = lines[i], pos = line.indexOf(":"), name, value=""; 
if (pos == 0) continue; // Ignora comentarios 
if (pos > 0) { // campo nome:valor 

name = line.substring(0,pos); 
value = line.substring(pos+i); 

if (value.charAt(O) == " ") value = value.substring(l); 

} 

else name = line; // somente nome de campo 
switch(name) { 

case "event": eventName = value; break; 
case "data": data += value + "\n"; break; 
case "id": lastEventld = value; break; 
case "retry": retrydelay = parselnt(value) || 1000 ; break; 
default: break; // Ignora qualquer outra linha 
} 
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}; 

} 


if (line === "") { // Uma linha em branco significa enviar o evento 

if (evtsrc.onmessage && data !== "") { 

// Corta nova linha a direita, se houver uma 
if (data.charAt(data.length-l) == "\n") 

data = data.substring(0, data.length-l); 
evtsrc.onmessage({ // Este e urn objeto Event falsificado 
type: eventName, // tipo do evento 
data: data, // dados do evento 

origin: url //a origem dos dados 

}); 

} ^ 

continue; 


Conclufmos essa explora^ao da arquitetura Comet com um exemplo de servidor. O Exemplo 18-17 
e um servidor HTTP personalizado, escrito em JavaScript do lado do servidor para o ambiente do 
lado do servidor Node (Se^ao 12.2). Quando um cliente solicita o URL raiz “/”, ele envia o codigo 
de cliente de chat mostrado no Exemplo 18-15 e o codigo de simula^ao do Exemplo 18-16. Quando 
um cliente faz uma requisRao GET solicitando o URL “/chat”, ele salva o fluxo de resposta em um 
array e mantem essa conexao aberta. E quando um cliente faz um pedido POST solicitando “/chat”, 
ele usa o corpo da requisRao como mensagem de bate-papo e o grava, com o prefixo Server-Sent 
Events “data:”, em cada um dos fluxos de resposta abertos. Se voce instalar Node, podera executar 
esse exemplo de servidor de forma local. Ele recebe na porta 8000; portanto, apos iniciar o servidor, 
voce apontaria seu navegador para http ://localhost:8000 para conectar e come^ar a bater papo 
consigo mesmo. 


Exemplo 18-17 Um servidor de chat dos eventos Server-Sent personalizado 

// Isto e JavaScript do lado do servidor para execuqao com NodeJS. 

// Implementa uma sala de chat muito simples e completamente anonima. 

// Posta (com POST) novas mensagens em /chat ou obtem (com GET) um fluxo de texto/eventos 
// de mensagens 

// do mesmo URL. Fazer uma requisiqao GET para / retorna um arquivo HTML simples 
II contendo a interface com o usuario de chat do lado do cliente. 
var http = require('http'); // API de servidor HTTP NodeJS 

// 0 arquivo HTML para o cliente de chat. Usado a seguir. 

var clientui = require('fs').readFileSync("chatclient.html"); 

var emulation = require('fs').readFileSync("EventSourceEmulation.js"); 

// Um array de objetos ServerResponse para o qual vamos enviar eventos 
var clients = []; 

II Envia um comentario para os clientes a cada 20 segundos para que eles nao 
// fechem a conexao e depois a restabelecam 
setInterval(function() { 

clients.forEach(function(client) { 
client.write(":ping\n"); 
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}, 20000); 

// Cria um novo servidor 
var server = new http.Server(); 

// Ouando o servidor recebe uma nova requisicao, executa esta funcao 
server.on("request", function (request, response) { 

// Analisa o URL solicitado 

var url = require(' url').parse(request.url); 

// Se o pedido foi para "/", envia a interface com o usuario de chat do lado do 

if (url.pathname === "/") { // Um pedido para a interface com o usuario de chat 
response.writeHead(200, {"Content-Type": "text/html"}); 
response.write("<script>" + emulation + "</script>"); 
response.write(clientui); 
response.end(); 

> 

// Envia 404 para qualquer requisiqao que nao seja "/chat" 
else if (url.pathname !== "/chat") { 
response.writeHead(404); 
response.end(); 



// Se a requisicao foi uma postagem, entao um cliente esta postando uma nova mensagem 
if (request.method === "POST") { 
request.setEncoding("utf8"); 

// Ouando obtemos um trecho de dados, adiciona-o no corpo 
request.onC'data”, function(chunk) { body += chunk; }); 

// Ouando a requisicao esta pronta, envia uma resposta vazia 

// e transmite a mensagem para todos os clientes que estiverem recebendo. 

request.on("end”, functionQ { 

response.writeHead(200); // Responde a requisiqao 
response.end(); 


// Formata a mensagem no formato fluxo de texto/eventos 
// Certifica-se de que cada linha seja prefixada com "data:" e que seja 
// terminada com duas novas linhas. 

message = 'data: ' + body.replace('\n', '\ndata: ') + "\r\n\r\n"; 

// Agora envia essa mensagem para todos os clientes que estiverem recebendo 
clients.forEach(function(client) { client.write(message); }); 

}); 

} 

// Caso contrario, um cliente esta solicitando um fluxo de mensagens 
else { 

// Configura o tipo de conteudo e envia um evento message inicial 
response.writeHead(200, {'Content-Type': "text/event-stream" }); 
response, write ("data: Connected\n\n''); 

// Se o cliente fecha a conexao, remove o objeto 
// resposta correspondente do array de clientes ativos 
request.connection.on("end", functionQ { 
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clients.splice(clients.indexOf(response), l); 
response.end(); 


// Lembra o objeto resposta para que possamos enviar futuras mensagens para ele 
clients.push(response); 

} 

}); 

// Executa o servidor na porta 8000. Conecta-se em http://localhost:8000/ para usa-lo. 
server.listen(8000); 



Capi'tulo 19 

A biblioteca jQuery 


JavaScript tem uma API basica intencionalmente simples e uma API do lado do cliente demasiada- 
mente complicada, desfigurada por grandes incompatibilidades entre os navegadores. A chegada do 
IE9 elimina a pior dessas incompatibilidades, mas muitos programadores acham mais facil escrever 
aplicativos Web usando uma estrutura ou uma biblioteca utilitaria de JavaScript para simplificar ta- 
refas comuns e ocultar as diferen^as entre os navegadores. Quando este livro estava sendo produzido, 
uma das bibliotecas mais populares era a jQuery 1 . 

Como a biblioteca jQuery se tornou tao utilizada, os desenvolvedores Web devem conhece-la - mes- 
mo que voce nao a utilize em seu proprio codigo, e provavel que a encontre em codigo escrito por 
outras pessoas. Felizmente, a jQuery e estavel e pequena o suficiente para ser documentada neste 
livro. Voce vai encontrar uma introduQo abrangente neste capi'tulo e a Parte IV contem uma refe¬ 
renda rapida da jQuery. Os metodos da jQuery nao tem entradas individuals na seQo de referenda, 
mas a jQuery fornece um resumo de cada metodo. 

A jQuery torna facil encontrar os elementos importantes de um documento e entao manipula-los, 
adicionando conteudo, editando atributos HTML e propriedades CSS, definindo rotinas de trata- 
mento de even to e fazendo animates. Ela tambem tem utilitarios Ajax para fazer requisites HTTP 
dinamicamente e fun^oes utilitarias de uso geral para trabalhar com objetos e arrays. 

Conforme seu nome implica, a biblioteca jQuery se concentra em consultas {query, em ingles). 
Uma consulta tipica utiliza um seletor CSS para identificar um conjunto de elementos do docu¬ 
mento e retorna um objeto representando esses elementos. Esse objeto retornado fornece muitos 
metodos uteis para operar como um grupo nos elementos coincidentes. Quando possivel, esses 
metodos retornam o objeto no qual sao chamados, o que permite usar um idioma de encadea- 
mento de metodos sucinto. As seguintes caracteristicas sao a base do poder e da utilidade da 
jQuery: 

• Uma sintaxe expressiva (seletores CSS) para se referir aos elementos do documento 

• Um metodo de consulta eficiente para localizar o conjunto de elementos do documento que 
correspondem a um seletor CSS 


Outras bibliotecas normalmente usadas e nao abordadas neste livro incluem Prototype, YUI e dojo. Pesquise “bibliotecas 
JavaScript” na Web para encontrar muitas outras. 
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• Um conjunto de metodos uteis para manipular os elementos selecionados 

• Tecnicas de programaqao funcional poderosas para operar nos conjuntos de elementos como 
um grupo, em vez de um por vez 

• Um idioma (encadeamento de metodos) sucinto para expressar sequencias de operates 

Este capftulo come^a com uma introdu^ao a j Query que mostra como fazer consultas simples e 
como trabalhar com os resultados. As se$oes a seguir explicam: 

• Como configurar atributos HTML, estilos e classes CSS, valores e conteudo de elemento, 
geometria e dados de formulario HTML 

• Como alterar a estrutura de um documento, inserindo, substituindo, empacotando e excluin- 
do elementos 

• Como usar o modelo de evento independente de navegador da jQuery 

• Como produzir efeitos visuais animados com jQuery 

• Utilitarios Ajax da jQuery para fazer scripts de requisites HTTP 

• buncoes utilitarias da jQuery 

• A sintaxe completa dos seletores da jQuery e como usar metodos de selepio avanptdos da 
jQuery 

• Como estender a jQuery usando e escrevendo plug-ins 

• A biblioteca jQuery UI (para interface do usuario) 

19.1 Fundamentos da jQuery 

A biblioteca jQuery define uma unica funijao global chamada jOueryQ. Essa firnfao e utilizada com 
tanta frequencia que a biblioteca tambem define o simbolo global $ como atalho para ela. Esses sao 
os dois unicos simbolos que a jQuery define no espa^o de nomes global 2 . 

Essa unica funfao global com dois nomes e a principal firnfao de consulta da jQuery. Aqui, por exem- 
plo, voce pode ver como solicitamos o conjunto de todos os elementos <div> em um documento: 
var divs = $("div"); 

O valor retornado por essa funpio representa um conjunto de zero ou mais elementos DOM e e 
conhecido como objeto jQuery. Note que jQuery () e uma funpio fabrica e nao uma construtora: ela 
retorna um objeto recem-criado, mas nao e usada com a palavra-chave new. Os objetos jQuery defi- 
nem muitos metodos para operar nos conjuntos de elementos que representam, sendo que a maior 
parte do capftulo e dedicada a explicate desses metodos. A seguir, por exemplo, esta um codigo que 
localiza, realpi e exibe rapidamente todos os elementos <p> ocultos que tern a classe “details”: 

$(”p.details”).css("background-color", "yellow").show("fast"); 


Se voc£ usa $ em seu proprio codigo ou esta usando outra biblioteca, como a Prototype, que utiliza $, pode chamar jQuery. 
noConflict () para restaurar $ ao seu valor original. 
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O metodo css() opera no objeto jQuery retornado por $() e retorna esse mesmo objeto, de modo 
que o metodo show() pode ser chamado em seguida, em um “encadeamento de metodos” com- 
pacto. Esse idioma de encadeamento de metodos e comum na programagao com jQuery. Como 
outro exemplo, o codigo a seguir localiza todos os elementos do documento que tern a classe CSS 
“clicktohide” e registra uma rotina de tratamento de evento em cada um. Essa rotina de tratamento 
de evento e chamada quando o usuario clica no elemento, e faz o elemento “deslizar” e desaparecer 
lentamente: 

$(".clicktohide").click(function() { $(this).slideUp("slow"); }); 


Obtendo a jQuery 

A biblioteca jQuery e software livre. Voce pode baixa-la no enderego http://jquery.com. Uma vez que te- 
nha o codigo, voce pode indui-lo em suas paginas Web com um elemento <script> como o seguinte: 
<scri.pt src=”jquery-1.4.2.min.js"></scripts 

0 "min"no nome de arquivo anterior indica que essa e a versao minimizada da biblioteca, com comenta- 
rios e espagos em branco desnecessarios removidos e os identificadores internos substituidos pelos mais 
curtos. 

Outra maneira de usar a jQuery em seus aplicativos Web e permitir que uma rede de distribuigao de con- 
teiido a fornega, usando um URL como um dos seguintes: 
http://code.jquery.com/jquery-1.4.2.min.js 
http://ajax.microsoft.eom/ajax/jquery/jquery-l.4.2.min.js 
http://ajax.googleapis.eom/ajax/libs/jquery/l.4.2/jquery.min.js 

Este capitulo documenta a jQuery versao 1.4. Se estiver usando uma versao diferente, substitua o numero 
de versao "1.4.2" nos URLs anteriores conforme for necessario 3 . Se voce usa Google CDN, pode usar "1.4" 
para obter a versao mais recente da serie 1.4.x ou apenas"1", para obter a versao mais atualizada anterior a 
2.0. A principal vantagem de carregar a jQuery a partir de URLs bem conhecidos como esses e que, devido 
a popularidade da jQuery, os visitantes de seu site provavelmente ja vao ter uma copia da biblioteca na 
cache de seus navegadores e nenhum download vai ser necessario. 


19.1.1 Afun$aojQuery() 

A fungao jQuery () (tambem conhecida como $()) e a mais importante da biblioteca jQuery. Contu- 
do, ela e bastante sobrecarregada e existem quatro maneiras diferentes de chama-la. 

A primeira de chamar $ () e mais comum maneira e passar um seletor CSS (uma string) para ela. 
Quando chamada desse modo, ela retorna o conjunto de elementos do documento atual que coin¬ 
cident com o seletor. A jQuery suporta a maior parte da sintaxe de seletor CSS3, alem de algumas 
extensoes proprias. Os detalhes completos da sintaxe de seletor da jQuery estao na Segao 19.8.1. Se 
voce passa um elemento ou um objeto jQuery como segundo argumento para $(), ela retorna ape- 


3 Quando este capitulo foi escrito, a versao atual da jQuery era 1.4.2. Quando o livro ia ser impresso, a jQuery 1.5 tinha 
acabado de ser lan^ada. As alteragoes feitas na jQuery 1.5 envolvem principalmente a fun^ao utilitariaAjax e serao mencio- 
nadas de passagem na Se?ao 19.6. 
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nas os descendentes correspondentes do elemento (ou elementos) especificado. Esse valor opcional 
do segundo argumento define o ponto (ou pontos) de partida para a consulta e e frequentemente 
chamado de contexto. 

A segunda maneira de chamar $ () e passar um objeto Element ou Document ou Window. Quando 
chamada desse modo, ela simplesmente empacota o elemento, documento ou janela em um objeto 
jQuery e retorna esse objeto. Fazer isso permite que voce use metodos jQuery para manipular o 
elemento, em vez de usar metodos DOM brutos. E comum ver programas jQuery chamar $(docu- 
ment) ou $(this), por exemplo. Os objetos jQuery podem representar mais de um elemento em um 
documento e voce tambem pode passar um array de elementos para $(). Nesse caso, o objeto jQuery 
retornado representa o conjunto de elementos de seu array. 

O terceiro modo de chamar $() e passar uma string de texto HTML. Quando isso e feito, a 
jQuery cria o elemento (ou elementos) HTML descrito por esse texto e, entao, retorna um 
objeto jQuery representando esse elemento. A jQuery nao insere os elementos recem-criados 
no documento automaticamente, mas os metodos jQuery descritos na Se?ao 19.3 permitem 
inseri-los facilmente onde voce quiser. Note que nao e possfvel passar texto puro ao se chamar 
$() dessa maneira, senao a jQuery vai pensar que voce esta passando um seletor CSS. Para esse 
estilo de chamada, a string passada para $() deve incluir pelo menos uma marca HTML com 
sinais de menor e maior. 

Quando chamada dessa terceira maneira, $ () aceita um segundo argumento opcional. Voce pode 
passar um objeto Document para especificar o documento ao qual os elementos devem ser associa- 
dos. (Se estiver criando elementos para serem inseridos em um <iframe>, por exemplo, voce precisara 
especificar explicitamente o objeto documento desse quadro.) Ou entao, voce pode passar um objeto 
como segundo argumento. Se fizer isso, as propriedades do objeto devem especificar os nomes e 
valores dos atributos HTML a serem configurados no objeto. Mas se o objeto incluir propriedades 
com qualquer um dos nomes “css”, “html”, “text”, “width”, “height”, “offset”, “val” ou “data”, ou 
propriedades que tenham o mesmo nome de qualquer um dos metodos de registro de rotina de 
tratamento de evento da jQuery, a biblioteca vai chamar o metodo de mesmo nome no elemento 
recem-criado e vai passar o valor da propriedade para ele. (Metodos como css(), html() e text() sao 
abordados na SeQo 19.2 e os metodos de registro de rotina de tratamento de evento, na SeQo 19.4. 
Por exemplo: 

var img = $("<img/>", // 

{ src:url, // 

css: {borderWidth:5}, // 

click: handleClick // 

}); 

Por fim, a quarta maneira de chamar $ () e passar uma furnjao para ela. Se isso for feito, a funQo pas¬ 
sada sera chamada quando o documento estiver carregado e o DOM estiver pronto para ser manipu- 
lado. Esta e a versao jQuery da fiunjao on Load () do Exemplo 13-5. E muito comum ver programas 
jQuery escritos como fun^oes anonimas definidas dentro de uma chamada de jOueryQ: 

jOuery(function() { // Chamada quando o documento tiver carregado 

// Todo codigo jQuery fica aqui 


Cria um novo elemento <img> 
com este atributo HTML, 
este estilo CSS 

e esta rotina de tratamento de evento. 
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As vezes voce vai ver $(f) escri ita usando a forma mais antiga e prolixa: $(document) .ready(f). 

A fungao passada para jOueryQ sera chamada com o objeto documento como seu valor de this e 
com a fungao jQuery como seu unico argumento. Isso significa que e possfvel tornar a fungao global 
$ indefinida e ainda usar esse apelido conveniente de forma local, com o seguinte idioma: 

jQuery.noConflictQ; // Restaura $ ao seu estado original 
jOuery(function($) { // Usa $ como apelido local para o objeto jQuery 
// Coloque todo seu codigo jOuery aqui 

}); 

A jQuery dispara fungoes registradas por meio de $() quando o evento DOMContentLoaded e 
disparado (Segao 13.3.4) ou, nos navegadores que nao suportam esse evento, quando o evento load e 
disparado. Isso significa que o documento sera completamente analisado, mas que recursos externos, 
como imagens, ainda nao podem ser carregados. Se voce passar uma fungao para $() depois que o 
DOM estiver pronto, essa fungao sera chamada imediatamente, antes que $() retorne. 

A biblioteca jQuery tambem usa a fungao jOueryQ como espago de nomes e define varias fungoes 
utilitarias e propriedades embaixo del a. A fungao jQuery. noConflict (), mencionada anteriormente, 
e uma fungao utilitaria. Outras incluem a jQuery.each(), para iteragao de uso geral, e jQuery.parse] - 
SON() , para analisar texto JSON. A Segao 19.7 lista as fungoes utilitarias de uso geral e outras fungoes 
da jQuery estao descritas ao longo deste capftulo. 


Terminologia da jQuery 

Vamos fazer uma pausa aqui para definir alguns termos e frases importantes que voce vera ao longo deste 
capitulo: 

"a fungao jQuery" 

A fungao jQuery e o valor de jQuery ou de $. Essa e a fungao que cria objetos jQuery, registra rotinas 
de tratamento para serem chamadas quando o DOM estiver pronto e tambem serve como espago 
de nomes da jQuery. Normalmente, me refiro a ela como $ Q. Ja que serve como espago de nomes, 
a fungao jQuery tambem poderia se chamar"o objeto global jQuery", mas e muito importante nao 
confundir isso com "urn objeto jQuery". 

“um objeto jQuery" 

Urn objeto jQuery e um objeto retornado pela fungao jQuery. Um objeto jQuery representa um con- 
junto de elementos do documento e tambem pode ser chamado de "resultado da jQuery", "conjunto 
da jQuery" ou "conjunto empacotado". 

"os elementos setedonados" 

Quando voce passa um seletor CSS para a fungao jQuery, ela retorna um objeto jQuery representando 
o conjunto de elementos do documento correspondentes a esse seletor. Ao descrever os metodos do 
objeto jQuery, frequentemente vou usar a frase "os elementos selecionados" para me referir a esses 
elementos correspondentes. Por exemplo, para explicar o metodo attr(), posso escrever"o metodo 
attr() configura atributos HTML nos elementos selecionados". Isso vai no lugar de uma descrigao 
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mais precisa, porem complicada, como"o metodo attr() define atributos HTML nos elementos do 
objeto jQuery no qual foi chamado". Note que a palavra"selecionado"se refere ao seletor CSS e que 
nada tem a ver com qualquer selegao realizada pelo usuario. 

"uma fungao jQuery" 

Uma fungao jQuery e uma fungao como jQuery . noConflict() definida no espago de nomes dafun- 
gao jQuery. As fungoes jQuery tambem poderiam ser descritas como "metodos estaticos". 

"um metodo jQuery" 

Urn metodo jQuery e um metodo de um objeto jQuery retornado pela fungao jQuery. A parte mais 
importante da biblioteca jQuery sao os metodos poderosos que ela define. 

A distingao entre fungoes e metodos jQuery as vezes e complicada, pois varias fungoes e metodos tern o 
mesmo nome. Observe as diferengas entre as duas linhas de codigo a seguir: 

// Chama a funcao jQuery each() para 

// chamar a fungao f uma vez para cada elemento do array a 
$.each(a,f); 

// Chama a fungao jOueryQ para obter um objeto jQuery representando todos 
// os elementos <a> do documento. Em seguida, chama o metodo each() desse 
// objeto jOuery para chamar a funcao f uma vez para cada elemento selecionado. 
$("a").each(f); 

A documentagao oficial da jQuery, no enderego http://jquery.com, usa nomes como $. each para se referir 
as fungoes jQuery e nomes como . each (com um ponto-final, mas sem cifrao) para se referir aos metodos 
jQuery. Neste livro, em vez disso, vou usar os termos"fungao"e"metodo". Normalmente, isso vai estar daro 
a partir do contexto que estara em discussao. 


19.1.2 Consultas e resultados de consulta 

Quando se passa uma string de seletor CSS para $(), ela retorna um objeto jQuery representando o 
conjunto de elementos correspondentes (ou “selecionados”). Os seletores CSS foram apresentados 
na Segao 15.2.5 e voce pode estudar essa segao para ver exemplos - todos os exemplos mostrados 
la funcionam quando passados para $(). A sintaxe de seletor espedflca suportada pela jQuery esta 
detalhada na Segao 19.8.1. Contudo, em vez de nos concentrarmos nesses detalhes avangados de 
seletor agora, vamos primeiro explorar o que pode ser feito com os resultados de uma consulta. 

O valor retornado por $() e um objeto jQuery. Os objetos jQuery sao semelhantes a um array: eles 
tem uma propriedade length e propriedades numericas de 0 a length-l. (Consulte a Segao 7.11 para 
mais informagoes sobre objetos semelhantes a um array.) Isso significa que voce pode acessar o con- 
teudo do objeto jQuery usando a notagao de array com colchetes padrao: 

$("body'').length // => is os documentos tem apenas um elemento body 
$("body”)[0] // Isto e o mesmo que document.body 

Se preferir nao utilizar notagao de array com objetos jQuery, voce pode usar o metodo size() em vez 
da propriedade length e o metodo get() em vez da indexagao com colchetes. Se precisar converter 
um objeto jQuery em um array verdadeiro, chame o metodo toArrayQ. 
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Alem da propriedade length, os objetos jQuery tem tres outras propriedades que as vezes inte- 
ressam. A propriedade selector e a string seletora (se houver) que foi usada na criagao do objeto 
jQuery. A propriedade context e o objeto contexto passado como segundo argumento para $() 
ou o objeto Document. Por fim, todos os objetos jQuery tem uma propriedade chamada jquery 
e testar a existencia dessa propriedade e uma maneira simples de distinguir objetos jQuery de 
outros objetos semelhantes a um array. O valor da propriedade jquery e o numero de versao da 
j Query como uma string: 

// Localiza todos os elementos <script> no corpo do documento 
var bodyscripts = $("script", document.body); 
bodyscripts.selector // => "script" 
bodyscripts.context // => document.body 
bodyscripts.jquery // => "1.4.2" 



$() i/ersi/squerySelectorAIIO 

A fungao $() e semelhante ao metodo querySelectorAllQ de Document, descrito na Segao 15.2.5: 
ambos recebem um seletor CSS como argumento e retornam um objeto semelhante a um array que 
contem os elementos correspondentes ao seletor. A implementagao da jQuery usa querySelectorAll() 
nos navegadores que o suportam, mas ha bons motivos para usar $() em vez de querySelectorAllQ 
em seu codigo: 

• querySelectorAllQ foi implementado apenas recentemente pelosfornecedores de navegador. $() 
funciona tanto nos navegadores mais antigos quanto nos novos. 

• Como a jQuery pode fazer selegoes"manuals", os seletores CSS3 suportados por $() funcionam em 
todos os navegadores e nao apenas nos que suportam CSS3. 

• 0 objeto semelhante a um array retornado por $() (um objeto jQuery) e muito mais util do que o 
objeto semelhante a um array (um NodeList) retornado por querySelectorAllQ. 


Se voce quiser iterar por todos os elementos em um objeto jQuery, pode chamar o metodo eachQ 
em vez de escrever um lago for. O metodo eachQ e parecido com o metodo de array forEachQ de 
ECMAScript 5 (ES5). Ele espera uma fungao callback como unico argumento e chama essa fun¬ 
gao callback uma vez para cada elemento do objeto jQuery (na ordem do documento). A callback 
e chamada como metodo do elemento coincidente, de modo que, dentro dela, a palavra-chave 
this se refere a um objeto Element. eachQ tambem passa o fndice e o elemento como primeiro e 
segundo argumentos para a callback. Note que this e o segundo argumento sao elementos brutos 
do documento e nao objetos jQuery - se quiser usar um metodo jQuery para manipular o elemen¬ 
to, voce precisara passa-lo para $() primeiro. 

O metodo eachQ da j Query tem uma caracterfstica muito diferente de forEachQ: se sua callback 
retorna false para qualquer elemento, a iteragao termina apos esse elemento (isso e como usar a 
palavra-chave break em um lago normal). eachQ retorna o objeto jQuery em que e chamada, de 
modo que pode ser usado em encadeamentos de metodos. Aqui esta um exemplo (ele usa o metodo 
prependQ que vai ser explicado na Segao 19.3): 
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// Numera os divs do documento, ate e incluindo div#last 

$(''div").each(function(idx) { // localiza todos os <div>s e itera por eles 

$(this).prepend(idx + "); // Insere indice no inicio de cada um 

if (this.id === "last") return false; // Para no elemento #last 

}); 

Apesar do poder do metodo each(), ele nao e muito usado, pois os metodos jQuery normalmente 
iteram implicitamente pelo conjunto de elementos coincidentes e operam em todos eles. Em geral, 
so e necessario usar each() se voce precisa manipular os elementos coincidentes de diferentes manei- 
ras. Mesmo assim, talvez nao seja necessario chamar each(), pois diversos metodos jQuery permitem 
passar uma funqao callback. 

A biblioteca jQuery e anterior aos metodos de array ES5 e define dois outros metodos que forne- 
cem funcionalidade semelbante aos metodos ES5. O metodo jQuery map() tern funcionamento 
muito parecido com o do metodo Array.map(). Ele aceita uma funqao callback como argumento 
e invoca essa funqao uma vez para cada elemento do objeto jQuery, coletando os valores de 
retorno dessas chamadas e retornando um novo objeto jQuery que contem esses valores de 
retorno. map() chama a callback da mesma maneira que o metodo each(): o elemento e passado 
como valor de this e como segundo argumento, e o indice do elemento e passado como primeiro 
argumento. Se a callback retorna null ou undefined, esse valor e ignorado e nada e adicionado ao 
novo objeto jQuery para essa chamada. Se a callback retorna um array ou um objeto semelhante 
a um array (como um objeto jQuery), ele e “nivelado” e seus elementos sao adicionados indi- 
vidualmente no novo objeto jQuery. Note que o objeto jQuery retornado por map() pode nao 
conter elementos do documento, mas ainda funciona como objeto semelhante a um array. Aqui 
esta um exemplo: 

// Localiza todos os cabecalhos, mapeia em suas identificaqoes, converte em um array 

// verdadeiro e classifica-o. 

$(":header").map(function() { return this.id; }).toArrayQ.sort(); 

Junto com each() e map(), outro metodo jQuery fundamental e indexQ. Esse metodo espera um 
elemento como argumento e retorna o indice desse elemento no objeto jQuery ou —1, caso nao seja 
encontrado. Contudo, na forma tipica da jQuery, esse metodo indexQ e sobrecarregado. Se voce 
passa um objeto jQuery como argumento, indexQ pesquisa o primeiro elemento desse objeto. Se 
voce passa uma string, indexQ a utiliza como seletor CSS e retorna o indice do primeiro elemento 
desse objeto jQuery no conjunto de elementos correspondentes a esse seletor. E se voce nao passa 
argumento algum, indexQ retorna o indice do primeiro elemento desse objeto jQuery dentro de 
seus elementos irmaos. 

O ultimo metodo jQuery de uso geral que vamos discutir aqui e isQ. Ele recebe um seletor como 
argumento e retorna true se pelo menos um dos elementos selecionados tambem corresponde ao 
seletor especificado. Voce poderia utiliza-lo em uma funQo callback each(), por exemplo: 

$("div").each(function() { // Para cada elemento <div> 

if ($(this).is(":hidden")) return; // Pula elementos ocultos 
// Faz algo com os visiveis aqui 
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19.2 Metodos getter e setter da jQuery 

Algumas das operates mais simples e mais comuns nos objetos jQuery sao aquelas que obtem 
ou configuram o valor de atributos HTML, estilos CSS, conteudo de elemento ou geometria de 
elemento. Esta secjao descreve esses metodos. Primeiramente, contudo, e interessante fazer algumas 
generalizafoes sobre metodos getter e setter na jQuery: 

• Em vez de definir um par de metodos, a jQuery utiliza um unico metodo como getter e setter. 
Se voce passa um novo valor para o metodo, ele configura esse valor; se voce nao especifica um 
valor, ele retorna o valor atual. 

• Quando usados como setter, esses metodos configuram valores em cada elemento no objeto 
jQuery e, entao, retornam o objeto jQuery para permitir encadeamento de metodos. 

• Quando usados como getter, esses metodos consultam apenas o primeiro elemento do conjun- 
to de elementos e retornam um unico valor. (Use map() se quiser consultar todos os elemen- 
tos.) Como os metodos getter nao retornam o objeto jQuery em que sao chamados, so podem 
aparecer no final de um encadeamento de metodos. 

• Quando usados como setter, esses metodos frequentemente aceitam argumentos de objeto. 
Nesse caso, cada propriedade do objeto especifica um nome e um valor a ser configurado. 

• Quando usados como setter, esses metodos em geral aceitam fun foes como valores. Nesse 
caso, a funfao e chamada para calcular o valor a ser configurado. O elemento para o qual o 
valor esta sendo calculado e o valor de this, o l'ndice do elemento e passado como primeiro 
argumento para a funfao e o valor atual e passado como segundo argumento. 

Lembre-se dessas generalizafoes sobre metodos getter e setter ao ler o restante desta sefao. Cada 
subsefao a seguir explica uma categoria importante de metodos getter/setter da jQuery. 

19.2.1 Obtendo e configurando atributos HTML 

O metodo attr() e o getter/setter da jQuery para atributos HTML e obedece a cada uma das ge- 
neralizafoes descritas anteriormente. attr() trata de incompatibilidades de navegador e de casos 
especiais, permitindo usar nomes de atributo HTML ou suas propriedades JavaScript equivalentes 
(quando elas diferem). Por exemplo, voce pode usar “for” ou “htmlFor” e “class” ou “className”. 
removeAttr () e uma funfao relacionada que remove completamente um atributo de todos os elemen¬ 
tos selecionados. Aqui estao alguns exemplos: 

$("form").attr("action"); // Consulta o atributo action do is form 

$("#icon").attr("src", "icon.gif"); // Configura o atributo src 
$("#banner").attr({src:"banner.gif", // Configura 4 atributos simultaneamente 
alt:"Advertisement", 
width:720, height:64}); 

$("a").attr("target", "_blank"); // Faz todos os links carregarem em novas janelas 

$("a").attr("target", function!) { // Carrega links locais de forma local e carrega 

if (this.host == location.host) return ''_self" 

else return "_blank"; // links externos em uma nova janela 

}); 

$("a").attr({target: function!) {...}});// Tambem podemos passar funcoes como esta 
$("a").removeAttr("target"); // Faz todos os links carregarem nessa janela 
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19.2.2 Obtendo e configurando atributos CSS 


O metodo css() e muito parecido com o metodo attr(), mas funciona com os estilos CSS de um 
elemento, em vez dos atributos HTML do elemento. Ao consultar valores de estilo, css() retor- 
na o estilo atual (ou “calculado”; consulte a Se^ao 16.4) do elemento: o valor retornado pode vir 
do atributo style ou de uma folha de estilo. Note que nao e possivel consultar estilos compostos, 
como “font” ou “margin”. Em vez disso, voce deve consultar estilos individuals, como “font-weight”, 
“font-family”, “margin-top” ou “margin-left”. Ao configurar estilos, o metodo css() simplesmente 
adiciona o estilo no atributo style do elemento. css() permite usar nomes de estilo CSS com hifen 
(“background-color”) ou nomes de estilo JavaScript com maiusculas no meio (“backgroundColor”). 
Ao consultar valores de estilo, css() retorna valores numericos como strings, com sufixos de unida- 
des inclufdos. No entanto, ao configurar, ele converte numeros em strings e adiciona nelas um sufixo 
“px” (pixels), quando necessario: 


// Obtem a espessura da fonte do primeiro <hl> 
// Letras maiusculas no meio tambem funcionam 
// Erro: nao pode consultar estilos compostos 


m estilo em todos os elementos <hi> 


l Pode configurar estilos compostos 


$("hi").css("font-weight"); 

$(”hl").css("fontWeight"); 

$("hi").css(”font”); 

$("hi").css("font-variant", 

"smallcaps"); 

$(”div.note").css("border", 

"solid black 2px”); 

.({ backgroundColor: "black", // Configura varios estilos simultaneamente 
textColor: "white", // Nomes com maiusculas no meio funcionam melhor 

fontVariant: "small-caps”, // como propriedades de objeto 
padding: "lOpx 2px 4px 20px", 
border: "dotted black 4px" }); 
em 25% todos os tamanhos de fonte de <hl> 

;("font-size", function(i,curval) { 

return Math.round(l.25*parselnt(curval)); 

}); 


$("hl").c 


// Aumenta 
$("hl").cs: 


19.2.3 Obtendo e configurando classes CSS 

Lembre-se de que o valor do atributo class (acessado por meio da propriedade className em Java¬ 
Script) e interpretado como uma lista separada por espa^os de nomes de classe CSS. Normalmente, 
queremos adicionar, remover ou testar a presen^a de um nome na lista, em vez de substituir uma 
lista de classes por outra. Por isso, a j Query define metodos de conveniencia para trabalhar com o 
atributo class. addClassQ e removeClassQ adicionam e removem classes dos elementos selecionados. 
toggleClassQ adiciona classes em elementos que ainda nao as tern e remove classes do que tern. 
hasClassQ testa a presen^a de uma classe especificada. Aqui estao alguns exemplos: 

// Adicionando classes CSS 

$("hi").addClass("hilite"); // Adiciona uma classe em todos os elementos <hi> 

$("hi+p").addClass("hilite first"); // Adiciona 2 classes em elementos <p> apos <hi> 

{("section").addClass(function(n) { // Passa uma fun^ao para adicionar uma classe 

return "section" + n; // personalizada em cada elemento coincidente 

}); 


7 Removendo classes CSS 
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$("p") .removeClass("hilite"); // 

$("p") .removeClass("hilite first"); // 

$("section").removeClass(function(n) { // 

return "section" + n; 

}); 

$("div").removeClass(); // 

// Alternando classes CSS 
$("tr:odd").toggleClass("oddrow"); II 

II 

$("hl").toggleClass("big bold"); // 

$("hi").toggleClass(function(n) { // 

return "big bold hi-" + n; 

}); 

$("hl").toggleClass("hilite", true); // 

$("hi").toggleClass("hilite", false); II 


Remove uma classe de todos os elementos <p> 

Multiplas classes sao permitidas 

Remove classes personalizadas dos elementos 


Remove todas as classes de todos os <div>s 


Adiciona a classe se ela nao existe 
ou a removej se existe 
Alterna duas classes simultaneamente 
Alterna uma ou mais classes calculadas 


Funciona como addClass 
Funciona como removeClass 


// Testando a presenqa de classes CSS 
$("p").hasClass("first") 

$("#lead").is(".first") 

$("#lead").is(". first. hilite") 


II Algum elemento p tern esta classe? 

// Isto faz a mesma coisa 

// is() e mais flexivel do que hasClassQ 


Note que o metodo hasClassQ e menos flexfvel do que addClass(), removeClassQ e toggleClass(). 
hasClass() so funciona para um unico nome de classe e nao suporta argumentos de fun^ao. Ele re- 
torna true se qualquer um dos elementos selecionados tern a classe CSS especificada e retorna false 
se nenhuma delas tern. O metodo is() (descrito na Seq:ao 19.1.2) e mais flexfvel e pode ser usado 
para o mesmo proposito. 

Esses metodos jQuery sao como os metodos classList descritos na SeQo 16.5, mas funcionam em 
todos os navegadores e nao apenas naqueles que suportam a propriedade classList de HTML5. 
Alem disso, evidentemente, os metodos jQuery funcionam para varios elementos e podem ser en- 
cadeados. 


19.2.4 Obtendo e configurando valores de formulario HTML 

val() e um metodo para configurar e consultar o atributo value de elementos de formulario HTML 
e tambem para consultar e configurar o estado de caixas de seleQo, botoes de op<jao e elementos 

$("#surname").val() // Obtem o valor do campo de texto surname 

$("#usstate").val() // Obtem o valor unico de <select> 

$("select#extras").val() // Obtem array de valores de <select multiple> 

$("input:radio[name=ship]:checked").val() // Obtem o val do botao de opcao checked 

$("#email").val("Invalid email address") // Configura o valor de um campo de texto 

$("input:checkbox").val(["optl", "opt2"]) // Marca qualquer caixa de seleqao 

// com esses nomes ou valores 

$("input:text").val(function() {// Redefine todos os campos de texto com seus padroes 
return this.defaultValue; 

}) 
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19.2.5 Obtendo e configurando conteudo de elementos 

Os metodos text() e html() consultam e configuram o conteudo de texto puro ou HTML de um 
ou mais elementos. Quando chamado sem argumentos, text() retorna o conteudo de texto puro de 
todos os nos de texto descendentes de todos os elementos coincidentes. Isso funciona ate em navega- 
dores que nao suportam as propriedades textContent ou innerText (Sefao 15.5.2). 

Se voce chama o metodo html( ) sem argumentos, ele retorna o conteudo HTML apenas do primeiro 
elemento coincidente. A jQuery usa a propriedade innerHTML para fazer isso: x. html () e na realidade 
o mesmo que x[o] .innerHTML. 

Se voce passar uma string para text() ou html(), essa string sera usada para o conteudo de texto 
puro ou formatado em HTML do elemento e vai substituir todo o conteudo existente. Assim como 
nos outros metodos setter que vimos, tambem e possivel passar uma funijao, a qual sera usada para 
calcular a nova string do conteudo: 

var title = $("head title").text() // Obtem o titulo do documento 
var headline = $("hl").html() // Obtem a html do primeiro elemento <hl> 

$(''hl'').text(function(njcurrent) { // Fornece a cada cabefalho um numero de secao 

return + (n+l) + ” + current 

}); 

19.2.6 Obtendo e configurando geometria de elementos 

Na Se^ao 15.8, aprendemos que pode ser dificil determinar corretamente o tamanho e a posicao 
de um elemento, especialmente em navegadores que nao suportam getBoundingClientRect() (Se^ao 
15.8.2). A jQuery simplifica esses calculos com metodos que fimcionam em qualquer navegador. 
Note que todos os metodos descritos aqui sao getter, mas somente alguns tambem podem ser usados 
como setter. 

Para consultar ou configurar a posicao de um elemento, use o metodo offset(). Esse metodo mede 
posi?6es relativas ao documento e as retorna na forma de um objeto com propriedades left e top que 
contem as coordenadas X e Y. Se voce passa um objeto com essas propriedades para o metodo, ele 
configura a posipio especificada. Ele configura o atributo CSS position conforme for necessario para 
que os elementos possam ser posicionados: 

var elt = $("#sprite"); // 0 elemento que desejamos mover 

var position = elt.offsetQ; // Obtem sua posicao atual 

posiqao.top += 100; // Altera sua coordenada Y 

elt.offset(position); // Configura a nova posicao 

// Move todos os elementos <hi> para a direita, por uma distancia que depende de suas 

// posicoes no documento 

$("hi").offset(function(index,curpos) { 

return {left: curpos.left + 25 *index, top:curpos.top}; 

}); 

O metodo positionQ e como offsetQ, exceto que e somente getter e retorna posicoes de elemen¬ 
to relativas ao pai do deslocamento, em vez de relativas ao documento como um todo. Na Sepio 
15.8.5, vimos que todo elemento tern uma propriedade offsetParent a que sua posicao e relativa. 
Os elementos posicionados sempre servem como pais de deslocamento para seus descendentes, mas 
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alguns navegadores tambem transformam outros elementos, como celulas de tabela, em pais de des- 
locamento. A jQuery considera pais de deslocamento somente elementos posicionados e o metodo 
offsetParent( ) de um objeto jQuery mapeia cada elemento em seu elemento posicionado ascenden- 
te mais proximo ou no elemento <body>. Note o infeliz desacordo de nomenclatura desses metodos: 
offset() (deslocamento) retorna a posiQo absoluta de um elemento, em coordenadas do documen- 
to. E position!) (posiQo) retorna o deslocamento de um elemento relativo a seu offsetParentQ (pai 
de deslocamento). 

Existem tres metodos getter para consultar a largura de um elemento e tres para consultar a altura. 
Os metodos width () e height!) retornam a largura e altura basicas e nao incluem preenchimento, 
bordas nem margens. innerWidthQ e innerHeightQ retornam a largura e altura de um elemento, mais 
a largura e altura de seu preenchimento (a palavra “inner” - interior - se refere ao fato de que esses 
metodos retornam as dimensoes medidas ate o interior da borda). outerWidth() e outerHeightQ nor- 
malmente retornam as dimensoes do elemento, mais seu preenchimento e sua borda. Se voce passa o 
valor true para um desses metodos, eles tambem acrescentam o tamanho das margens do elemento. 
O codigo a seguir mostra quatro larguras diferentes que podem ser calculadas para um elemento: 

var body = $("body"); 

var contentWidth = body.widthQ; 

var paddingWidth = body.innerWidthQ; 

var borderWidth = body.outerWidthQ; 

var marginWidth = body.outerWidth(true); 

var padding = paddingWidth-contentWidth;// soma do preenchimento esquerdo e direito 
var borders = borderWidth-paddingWidth; // soma das larguras de borda esquerda e direita 
var margins = marginWidth-borderWidth; // soma das margens esquerda e direita 

Os metodos width!) e height!) tern recursos que os outros quatro (os metodos inner e outer) nao 
tern. Primeiramente, se o primeiro elemento do objeto jQuery e um objeto Window ou Document, 
eles retornam o tamanho da janela de visualizaQo da janela do navegador ou o tamanho total do 
documento. Os outros metodos so funcionam para elementos, nao para janelas ou documentos. 

Outra caracteristica dos metodos width () e height!) e que eles sao tanto setter como getter. Se voce 
passa um valor para esses metodos, eles configuram a largura ou altura de cada elemento no objeto 
jQuery. (Note, entretanto, que eles nao podem configurar a largura ou altura de objetos Window 
e Document.) Se voce passa um niimero, ele e entendido como uma dimensao em pixels. Se voce 
passa um valor de string, ele e usado como valor do atributo CSS width ou height e, portanto, pode 
utilizar qualquer unidade CSS. Por fim, assim como nos outros metodos setter, voce pode passar 
uma funQo que sera chamada para calcular a largura ou altura. 

Existe uma pequena assimetria entre o comportamento getter e setter de width () e height!). Quando 
usados como getter, esses metodos retornam as dimensoes da caixa de conteudo de um elemento, 
excluindo preenchimento, bordas e margens. No entanto, quando utilizados como setter, eles sim- 
plesmente configuram os atributos CSS width e height. Por padrao, esses atributos tambem especifi- 
cam o tamanho da caixa de conteudo. Mas se um elemento tern seu atributo CSS box-sizing (SeQo 
16.2.3.1) configurado como border-box, os metodos widthQ e height!) definem dimensoes que 
incluem o preenchimento e a borda. Para um elemento e que usa o modelo de caixa content-box, 
chamar $(e) .width(x).widthQ retorna o valor x. Entretanto, para elementos que usam o modelo 
border-box, isso geralmente nao acontece. 
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O ultimo par de metodos jQuery relacionados a geometria sao scrollTop() e scrollLeftQ, que con- 
sultam as posifoes da barra de rolagem de um elemento ou as configuram para todos os elementos. 
Esses metodos funcionam para o objeto Window e tambem para elementos do documento e, quan- 
do chamados em um objeto Document, consultam ou configuram as posi^oes da barra de rolagem 
do objeto Window que content o documento. Ao contrario do que acontece com outros metodos 
setter, voce nao pode passar uma fun910 para scrollTop() ou scrollLeft(). 


Podemos usar scrollTop() como getter e como setter, junto com o metodo height (), paradefinir um 
metodo que rola a janela para cima ou para baixo pelo numero especificado de paginas: 


// Rola a janela por n paginas. n pode 
function page(n) { 

var w = $(window); 
var pagesize = w.heightQ; 
var current = w.scrollTop(); 
w.scrollTop(current + n*pagesize); 


ser fracionario ou negativo 

// Empacota a janela em um objeto jQuery 
// Obtem o tamanho de uma pagina 
// Obtem a posi^ao atual da barra de rolagem 
// Configura a nova posi^ao da barra de rolagem 


19.2.7 Obtendo e configurando dados de elementos 

A jQuery define um metodo getter/setter chamado data () que configura ou consulta dados asso- 
ciados a qualquer elemento do documento ou a objetos Document ou Window. A capacidade de 
associar dados a qualquer elemento e importante e poderosa: e a base do registro de rotina de trata- 
mento de evento e dos mecanismos de enfileiramento de efeitos da jQuery. Talvez voce queira usar 
o metodo data() em seu codigo, de vez em quando. 

Para associar dados aos elementos em um objeto jQuery, chame dataQ como metodo setter, passan- 
do um nome e um valor como os dois argumentos. Alternativamente, voce pode passar um unico 
objeto para o metodo setter dataQ e cada propriedade desse objeto sera usada como um par nome/ 
valor a ser associado ao elemento (ou elementos) do objeto jQuery. Note, entretanto, que quando 
voce passa um objeto para dataQ, as propriedades desse objeto substituem qualquer dado anterior- 
mente associado ao elemento (ou elementos). Ao contrario de muitos dos outros metodos setter que 
vimos, dataQ nao chama as funfoes que voce passa. Se voce passa uma funQo como segundo argu- 
mento para dataQ, essa funpio e armazenada, assim como aconteceria com qualquer outro valor. 

O metodo dataQ tambem pode servir como getter, evidentemente. Quando chamado sem argu¬ 
mentos, ele retorna um objeto contendo todos os pares nome/valor associados ao primeiro elemento 
no objeto jQuery. Quando voce chama dataQ com um unico argumento de string, ele retorna o 
valor associado a essa string para o primeiro elemento. 

Use o metodo removeDataQ para remover dados de um elemento (ou elementos). (Usar dataQ para 
configurar um valor nomeado como null ou undefined nao e o mesmo que realmente excluir o valor 
nomeado.) Se voce passa uma string para removeDataQ, o metodo exclui qualquer valor associado a 
essa string para o elemento (ou elementos). Se voce chama removeData () sem argumentos, ele remove 
todos os dados associados ao elemento (ou elementos): 

$(''div").dataC'x'', 1 ); // Configura alguns dados 

$("div.nodata").removeData(''x"); // Remove alguns dados 
var x = $('#mydiv').data("x"); // Consulta alguns dados 
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A jQuery tambem define formas de firnfao utilitaria dos metodos data() e removeDataQ. Voce pode 
associar dados a um elemento individual e usando a forma de metodo ou de fiinfao de data(): 

$(e).data(...) // A forma de metodo 

$.data(e, ...) //A forma de fun^ao 

A estrutura de dados da jQuery nao armazena dados de elemento como propriedades dos elemen- 
tos em si, mas precisa adicionar uma propriedade especial em qualquer elemento que tenha dados 
associados. Alguns navegadores nao permitem que propriedades sejam adicionadas em elementos 
<applet>, <object> e <embed>, de modo que a jQuery simplesmente nao permite que dados sejam 
associados a elementos desses tipos. 

19.3 Alterando a estrutura de documentos 

Na Se^ao 19.2.5, vimos os metodos htmlQ e text() para configurar conteudo de elemento. Esta se- 
Qo aborda metodos que fazem altera^oes mais complexas em um documento. Como os documentos 
HTML sao representados como uma arvore de nos, em vez de uma sequencia linear de caracteres, as 
inser^oes, exclusoes e substitutes nao sao tao simples quanto para strings e arrays. As subsefoes a 
seguir explicam os diversos metodos jQuery para modificaQo de documentos. 


19.3.1 Inserindo e substituindo elementos 


Vamos come^ar com metodos basicos para inscribes e substitutes. Cada um dos metodos demons- 
trados a seguir recebe um argumento especificando o conteudo a ser inserido no documento. Pode 
ser uma string de texto puro ou de HTML para especificar novo conteudo ou pode ser um objeto 
jQuery ou um objeto Element ou Node de texto. A inserQo e feita no local, antes ou depois ou no 
lugar de (dependendo do metodo) cada um dos elementos selecionados. Se o conteudo a ser inserido 
e um elemento que ja existe no documento, ele e movido de seu local atual. Se vai ser inserido mais 
de uma vez, o elemento e clonado conforme o necessario. Todos esses metodos retornam o objeto 
jQuery no qual sao chamados. Note, entretanto, que apos a execuQo de replaceWith( ), os elementos 
do objeto jQuery nao estao mais no documento: 


$("#log").append("<br/>"+message); // 
$("hi").prepend("§"); // 

$("hl").before("<hr/>"); // 

$("hl").after("<hr/>"); // 

$("hr").replaceWith("<br/>"); // 

$("h2").each(function() { // 

var h2 = $(this); 
h2.replaceWith("<hl>" h 


Adiciona conteudo no final do elemento #log 
Adiciona simbolo de se^ao no inicio de cada <hi> 
Insere uma regra antes de cada <hl> 

E tambem depois 

Substitui elementos <hr/> por <br/> 

Substitui <h2> por <hl>, mantendo o conteudo 

+ h2.htmlQ + "</hl>"); 


}); 

// after() e before() tambem podem ser chamados em nos de texto 

// Esta e outra maneira de adicionar um simbolo de secao no inicio de cada <hl> 

$("hl").map(function() { return this.firstChild; }).before 


Para cada um desses cinco metodos de alteraQo de estrutura, tambem pode ser passada uma funijao 
que sera chamada para calcular o valor a ser inserido. Como sempre, se voce fornecer uma funijao 
assim, ela sera chamada uma vez para cada elemento selecionado. O valor de this sera esse elemento 
e o primeiro argumento sera o indice dele dentro do objeto jQuery. Para appendQ, prependQ e re- 
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placeWithQ, o segundo argumento e o conteudo atual do elemento como uma string HTML. Para 
beforeQ e afterQ, a funpio e chamada sem o segundo argumento. 

Todos os cinco metodos demonstrados anteriormente sao chamados nos elementos alvo e recebem 
como argumento o conteudo que sera inserido. Cada um desses cinco metodos pode ser correlacio- 
nado a outro metodo de funcionamento inverso: chamado no conteudo e que recebe os elementos 
do alvo como argumento. A tabela a seguir mostra os pares de metodo: 


Operagao 

$(target).metodo(content) 

$(content) .metodo( target) 

insere conteudo no final de target 

append() 

appendTo() 

insere conteudo no imcio de target 

prepend() 

prependToQ 

insere conteudo apos target 

after() 

insertAfter() 

insere conteudo antes de target 

before() 

insertBeforeQ 

substitui target por content 

replaceWith() 

replaceAllQ 


Os metodos demonstrados no exemplo de codigo anterior sao os da segunda coluna. Os metodos da 
terceira coluna estao demonstrados a seguir. Existem alguns pontos importantes a saber sobre esses 
pares de metodos: 

• Se voce passa uma string para um dos metodos da segunda coluna, ela e entendida como uma 
string de HTML a ser inserida. Se voce passa uma string para um dos metodos da terceira co¬ 
luna, ela e entendida como um seletor que identifica os elementos de destino. (Voce tambem 
pode identificar os elementos de destino diretamente, passando um objeto jQuery, Element 
ou no de texto.) 

• Os metodos da terceira coluna nao aceitam argumentos de fungao, como acontece com os 
metodos da segunda coluna. 

• Os metodos da segunda coluna retornam o objeto jQuery em que foram chamados. Os ele¬ 
mentos desse objeto jQuery podem ter novo conteudo ou novos irmaos, mas eles mesmos 
nao sao alterados. Os metodos da terceira coluna sao chamados no conteudo que esta sendo 
inserido e retornam um novo objeto jQuery representando o novo conteudo apos sua insergao. 
Em especial, note que, se o conteudo for inserido em varios locais, o objeto jQuery retornado 
vai conter um elemento para cada local. 

Com essas diferengas listadas, o codigo a seguir efetua as mesmas operates que o codigo anterior, 
usando os metodos da terceira coluna em vez dos da segunda. Observe que, na segunda linha, nao 
podemos passar texto puro (sem sinais de menor e maior para identifica-lo como HTML) para o 
metodo $ () - ele pensa que estamos especificando um seletor. Por isso, devemos criar explicitamente 
o no de texto que queremos inserir: 

$("<br/>+message").appendTo("#log''); // Anexa html em #log 

$(document.createTextNode(''§'')).prependTo("hl"); // Anexa no de texto nos <hl>s 
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$("<hr/>"),insertBefore("hl"); 
$("<hr/>").insertAfter("hl"); 
$("<br/>").replaceAll("hr"); 


// Insere regra antes de <hi>s 
// Insere regra apos <hl>s 
// Substitui <hr/> por <br/> 


19.3.2 Copiandoelementos 


Conforme mencionado, se voce inserir elementos que ja fazem parte do documento, eles serao sim- 
plesmente movidos (e nao copiados) para seu novo local. Se voce estiver inserindo os elementos em 
mais de um lugar, a jQuery fara as copias necessarias, mas nao serao feitas no caso de apenas uma 
inser^ao. Se quiser copiar elementos em um novo local, em vez de move-los, voce deve primeiro fazer 
uma copia com o metodo cloneQ. clone() faz e retorna uma copia de cada elemento selecionado (e 
de todos os descendentes desses elementos). Os elementos do objeto jQuery retornado ainda nao 
fazem parte do documento, mas voce pode inseri-los com um dos metodos anteriores: 

// Anexa um novo div, com identificaqao "linklist", no final do documento 
$(document.body).append("<div id='linklist'xhl>List of Links</hlx/div>"); 

// Copia todos os links que estao no documento e os insere nesse novo div 
$("a").clone().appendTo("#linklist"); 

// Insere elementos <br/> apos cada link para que eles aparecam em linhas separadas 
$("#linklist > a").after("<br/>"); 

cloneQ normalmente nao copia rotinas de tratamento de evento (Secjao 19.4) nem outros dados que 
voce tenha associado a elementos (Secjao 19.2.7); passe true se tambem quiser clonar esses dados 


adicionais. 


19.3.3 Empacotando elementos 


Outro tipo de inserjao em um documento HTML envolve empacotar um novo elemento (ou ele¬ 
mentos) em torno de um ou mais elementos. A jQuery define tres fun (joes de empacotamento. 
wrapQ empacota cada um dos elementos selecionados. wrapInnerQ empacota o conteudo de cada 
elemento selecionado. E wrapAllQ empacota os elementos selecionados como um grupo. Esses me¬ 
todos normalmente recebem um elemento empacotador recem-criado ou uma string de HTML 
usada para criar um empacotador. A string HTML pode conter varios elementos aninhados, se 
desejado, mas deve haver apenas um elemento mais interno. Se voce passar uma funjao para qual- 
quer um desses metodos, ela sera chamada uma vez no contexto de cada elemento (com o indice do 
elemento como seu unico argumento) e deve retornar a string empacotadora, o objeto Element ou o 
objeto jQuery. Aqui estao alguns exemplos: 

// Empacota todos os elementos <hl> com elementos <i> 

$("hl") .wrap(document.createElement("i")); // Produz <ixhl>.. .</hlx/i> 

// Empacota o conteudo de todos os elementos <hl>. Usar um argumento de string e mais 
// facil. 

$("hl").wrapInner("<i/>"); // Produz <hlxi>.. ,</ix/hl> 

// Empacota o primeiro paragrafo em uma ancora e div 
$("body>p:first").wrap("<a name=Tead'xdiv class='first’x/divx/a>"); 

// Empacota todos os outros paragrafos em outro div 
$("body>p:not(:first)").wrapAll("<div class='rest'x/div>"); 
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19.3.4 Exduindoelementos 

Junto com inser^oes e substitutes, a jQuery tambem define metodos para excluir elementos. 
empty () remove todos os filhos (incluindo nos de texto) de cada um dos elementos selecionados, sem 
alterar os elementos em si. O metodo removeQ, em contraste, remove os elementos selecionados (e 
todo o seu conteudo) do documento. remove () normalmente e chamado sem argumentos e remove 
todos os elementos do objeto jQuery. Contudo, se voce passa um argumento, esse argumento e tra- 
tado como seletor e sao removidos somente os elementos do objeto jQuery que tambem coincidem 
com o seletor. (Se quiser apenas remover elementos do conjunto de elementos selecionados, sem 
remove-los do documento, use o metodo filter(), que e abordado na Se^ao 19.8.2.) Note que nao e 
necessario remover elementos antes de reinseri-los no documento: voce pode simplesmente inseri-los 
em um novo local e eles serao movidos. 

O metodo remove () remove todas as rotinas de tratamento de evento (consulte a Seqao 19.4) e outros 
dados (SeQo 19.2.7) que voce possa ter vinculado aos elementos removidos. O metodo detachQ 
funciona exatamente como remove(), mas nao remove rotinas de tratamento de evento nem dados. 
detachQ pode ser mais util quando se quer remover elementos do documento temporariamente, 
para reinsert posterior. 

Por fim, o metodo unwrapQ remove elementos de maneira oposta ao metodo wrapQ ou wrapAHQ: ele 
remove o elemento pai de cada elemento selecionado, sem afetar os elementos selecionados ou seus 
irmaos. Isto e, para cada elemento selecionado, ele substitui o pai desse elemento por seus filhos. Ao 
contrario de removeQ e detachQ, unwrapQ nao aceita um argumento seletor opcional. 

19.4 Tratando eventos com jQuery 

Como vimos no Capitulo 17, uma das dificuldades de trabalhar com eventos e que o IE (ate o 
IE9) implementa uma API de evento diferente da de todos os outros navegadores. Para tratar dessa 
dificuldade, a jQuery define uma API de evento uniforme que funciona em todos os navegadores. 
Em sua forma simples, a API jQuery e mais facil de usar do que as APIs de evento padrao ou do IE. 
E em sua forma completa, mais complexa, a API jQuery e mais poderosa do que a API padrao. As 
subse^oes a seguir tern todos os detalhes. 

19.4.1 Registro simples de rotina de tratamento de evento 

A jQuery define metodos de registro de evento simples para cada um dos eventos de navegador 
normalmente usados e universalmente implementados. Para registrar uma rotina de tratamento de 
eventos click, por exemplo, basta chamar o metodo clickQ: 

// Clicar em qualquer <p> fornece a ele um fundo cinza 
$("p").click(function() { $(this).css("background-color", "gray"); }); 

A chamada de um metodo de registro de evento da jQuery registra sua rotina de tratamento em 
todos os elementos selecionados. Normalmente, isso e muito mais facil do que registrar rotinas de 
tratamento de evento uma por vez, com addEventListenerQ ou attachEventQ. 
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Estes sao os metodos de registro de rotina de tratamento de evento simples definidos pela jQuery: 


blur() focusin() 
change() focusout() 
click() keydown() 
dblclick() keypress() 
error() keyup() 


mousedown() mouseup() 
mouseenter() resize() 
mouseleave() scroll!) 
mousemove() select() 
mouseout() submit() 
mouseover() unload() 


focus() load() 


A maioria desses metodos de registro e para os tipos de evento comuns que voce ja conhece do Ca- 
pitulo 17. Entretanto, algumas observances sao necessarias. Os eventos focus e blur nao borbulham, 
mas os eventos focusin e focusout, sim, e a jQuery garante que esses eventos funcionam em todos 
os navegadores. Inversamente, os eventos mouseover e mouseout borbulham, sendo que isso muitas 
vezes e inconveniente, pois e dificil saber se o mouse deixou o elemento em que voce esta interessado 
ou se simplesmente saiu de um dos descendentes desse elemento. mouseenter e mouseleave sao even¬ 
tos que nao borbulham e que resolvem esse problema. Esses tipos de evento foram originalmente 
introduzidos pelo IE e a jQuery garante que eles funcionam corretamente em todos os navegadores. 

Os tipos de evento resize e unload sao sempre disparados apenas no objeto Window; portanto, se 
quiser registrar rotinas de tratamento para esses tipos de evento, voce deve chamar os metodos resi¬ 
ze!) e unload!) em $(window). O metodo scroll!) e mais usado em $(window), mas tambem pode ser 
usado em qualquer elemento que tenha barras de rolagem (como quando o atributo CSS overflow e 
configurado como “scroll” ou “auto”). O metodo load() pode ser chamado em $(window) para regis¬ 
trar uma rotina de tratamento de evento load para a janela, mas em geral e melhor passar sua funijao 
de inicializaqao diretamente para $(), como mostrado na SeQo 19.1.1. Contudo, voce pode usar o 
metodo load() em iframes e em imagens. Note que, quando chamado com argumentos diferentes, 
load() tambem e usado para carregar novo conteudo (via scripts de HTTP) em um elemento - con- 
suite a Sefao 19.6.1. O metodo error() pode ser usado em elementos <img> para registrar rotinas de 
tratamento que sao chamadas se o carregamento de uma imagem falha. Ele nao deve ser usado para 
configurar a propriedade onerror de Window, descrita na SeQo 14.6. 

Alem desses metodos de registro de evento simples, existem duas formas especiais que as vezes sao 
uteis. O metodo hover () registra rotinas de tratamento para eventos mouseenter e mouseleave. Cha¬ 
mar hover(f,g) e como chamar mouseenter(f) e, em seguida, chamar mouseleave(g). Se voce passa 
apenas um argumento para hover(), essa fun<jao e usada como rotina de tratamento para eventos 
enter e leave. 

O outro metodo de registro de evento especial e toggle!). Esse metodo vincula fun^oes de tratamen¬ 
to para o evento click. Voce especifica duas ou mais fun (joes de tratamento e a jQuery chama uma 
delas sempre que um evento click ocorre. Se voce chama toggle(f,g,h), por exemplo, a funijao f() e 
chamada para tratar do primeiro evento click, g() e chamada para tratar do segundo, h() e chamada 
para tratar do terceiro e f() e chamada novamente para tratar do quarto evento click. Mas tome 
cuidado ao usar toggle!): conforme vamos ver na Seqao 19.5.1, esse metodo tambem pode ser usado 
para exibir ou ocultar (isto e, alternar a visibilidade) os elementos selecionados. 

Vamos aprender sobre outras maneiras mais gerais de registrar rotinas de tratamento de evento na 
Seijao 19.4.4. E vamos finalizar esta seijao com uma maneira mais simples e conveniente de registrar 
rotinas de tratamento. 
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Lembre-se de que e possivel passar uma string de HTML para $() para criar os elementos descritos 
por essa string e que voce pode passar (como segundo argumento) um objeto de atributos a serem 
configurados nos elementos recem-criados. Esse segundo argumento pode ser qualquer objeto que 
voce passaria para o metodo attr(). Mas, alem disso, se qualquer uma das propriedades tiver o 
mesmo nome dos metodos de registro de evento listados anteriormente, o valor da propriedade sera 
entendido como funfao de tratamento e registrado como rotina de tratamento para o tipo de evento 
nomeado. Por exemplo: 

$("<img/>", { 

src: image_url, 

alt: image_description, 

className: "translucent_image", 

click: function() { $(this).css("opacity", "50%"); } 

}); 

19.4.2 Rotinas de tratamento de eventos da jQuery 

As fun^oes de tratamento de evento dos exemplos anteriores nao esperam um argumento e nao 
retornam valores. E muito comum escrever rotinas de tratamento de evento como essas, mas a 
jQuery invoca toda rotina de tratamento de evento com um ou mais argumentos e presta aten^ao ao 
valor de retorno de suas rotinas de tratamento. O mais importante a saber e que para toda rotina de 
tratamento de evento e passado um objeto evento da jQuery como primeiro argumento. Os cam- 
pos desse objeto fornecem detalhes (como as coordenadas do cursor do mouse) sobre o evento. As 
propriedades do objeto Event padrao foram descritas no Capitulo 17. A jQuery Simula esse objeto 
Event padrao, mesmo em navegadores (como o IE8 e anteriores) que nao o suportam. Os objetos 
evento da jQuery tern o mesmo conjunto de campos em todos os navegadores. Isso e explicado em 
detalhes na Sefao 19.4.3. 

Em geral, as rotinas de tratamento de evento sao chamadas apenas com o unico argumento do obje¬ 
to evento. Mas se voce dispara explicitamente um evento com triggerQ (consulte a SeQo 19.4.6), 
pode passar um array de argumentos extras. Se fizer isso, esses argumentos serao passados para a 
rotina de tratamento de evento apos o primeiro argumento do objeto evento. 

Independente de como e registrada, o valor de retorno de uma funQo de tratamento de evento 
da jQuery e sempre significativo. Se uma rotina de tratamento retorna false, tanto a aQo padrao 
associada ao evento quanto qualquer futura propagaQo do evento sao canceladas. Isto e, retornar 
false e o mesmo que chamar os metodos preventDefault() e stopPropagation() do objeto Event. 
Alem disso, quando uma rotina de tratamento de evento retorna um valor (que nao seja undefined), 
a jQuery armazena esse valor na propriedade result do objeto Event, onde ele pode ser acessado por 
rotinas de tratamento de evento chamadas subsequentemente. 


19.4.3 0 objeto Event da jQuery 

A jQuery oculta as diferen^as de implementaQo entre os navegadores definindo seu proprio objeto 
Event. Quando uma rotina de tratamento de evento da jQuery e chamada, sempre recebe um objeto 
Event da jQuery como primeiro argumento. O objeto Event da jQuery e fortemente baseado nos 
padroes do W3C, mas tambem codifica alguns padroes de evento de fato. A jQuery copia todos os 
campos a seguir do objeto Event nativo em todo objeto Event da jQuery (embora alguns deles sejam 
undefined para certos tipos de evento): 
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altKey ctrlKey 

ittrChange currentTarget 
detail 
eventPhase 
fromElement 


attrName 
bubbles 
button 
cancelable keyCodf 
charCode layerX 
clientX 
clientY 


newValue 

offsetX 

offsetY 


shiftKey 


originalTarget srcElement 


layerY 

metaKey 


pageX 
pageY 
prevValue 
relatedNode 
relatedTarget 


target 

toElement 

view 

wheelDelta 

which 


Alem dessas propriedades, o objeto Event tambem define os seguintes metodos: 

preventDefaultQ isDefaultPrevented() 

stopPropagation() isPropagationStopped() 

stopImmediatePropagation() isImmediatePropagationStoppedQ 


A maioria dessas propriedades e metodos de even to foi apresentada no Capftulo 17 e esta documen- 
tada na Parte IV, sob ref-Event. Alguns desses campos sao tratados de forma especial pela jQuery, 
para que tenham um comportamento uniforme nos varios navegadores. Eles estao descritos a seguir: 


metaKey 

Se o objeto evento nativo nao tern uma propriedade metaKey, a jQuery configura isso com o 
mesmo valor da propriedade ctrlKey. No MacOS, a tecla Command configura a propriedade 
metaKey. 


pageX, pageY 

Se o objeto evento nativo nao define essas propriedades, mas define as coordenadas da janela 
de visualizaQo do cursor do mouse em clientX e clientY, a jQuery calcula as coordenadas do 
cursor do mouse no documento e as armazena em pageX and pageY. 

target, currentTarget, relatedTarget 

A propriedade target e o elemento do documento no qual o evento ocorreu. Se o objeto even¬ 
to nativo tern um no de texto como alvo, em vez disso a jQuery informa o objeto Element 
container. currentTarget e o elemento no qual a rotina de tratamento de evento que esta em 
execuQo foi registrada. Isso sempre deve ser igual a this. 

Se currentTarget nao e igual a target, voce esta tratando de um evento que borbulhou para 
cima do elemento em que ocorreu e pode ser util testar o elemento target com o metodo is () 
(Se?ao 19.1.2): 

if ($(event.target).is("a")) return; // Ignora eventos que comecam em links 

relatedTarget e o outro elemento envolvido em eventos de transiQo, como mouseover e mou- 
seout. Para eventos mouseover, por exemplo, a propriedade relatedTarget especifica o elemen¬ 
to que o cursor do mouse deixou ao ser movido sobre target. Se o objeto evento nativo nao 
define relatedTarget, mas define toElement e fromElement, relatedTarget e configurada a partir 
dessas propriedades. 

timeStamp 

A hora em que o evento ocorreu, na representa^ao em milissegundos retornada pelo metodo 
Date.getTime(). A jQuery configura o proprio campo para contornar um erro de longa data 
do Firefox. 
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which 

A jQuery normaliza essa propriedade de evento nao padronizada de modo que ela especifique 
qual botao do mouse ou tecla do teclado foi pressionado durante o evento. Para eventos de tecla- 
do, se o evento nativo nao define which, mas define charCode ou keyCode, which sera configurada 
com qualquer uma dessas propriedades que esteja definida. Para eventos de mouse, se which nao 
esta definida, mas a propriedade button esta, which e configurada com base no valor de button. 
0 significa que nao ha botao pressionado. 1 significa que o botao esquerdo esta pressionado, 2 
significa que o botao do meio esta pressionado e 3 significa que o botao direito esta pressionado. 
(Note que alguns navegadores nao geram eventos de mouse para cliques do botao direito.) 

Alem disso, os seguintes campos do objeto Event da jQuery sao adi^oes especificas da biblioteca que 
em alguns momentos voce pode considerar uteis: 

data 

Se dados adicionais foram especificados quando a rotina de tratamento de evento foi registrada 
(consulte a Se^ao 19.4.4), eles se tornaram disponfveis para a rotina de tratamento como o 
valor desse campo 

handler 

Uma referenda a furnjao de tratamento de evento que esta sendo chamada no momento 
result 

O valor de retorno da rotina de tratamento mais recentemente chamada para esse evento, 
ignorando as rotinas de tratamento que nao retornam valor 

originalEvent 

Uma referenda ao objeto Event nativo gerado pelo navegador 

19.4.4 Registro avangado de rotina de tratamento de evento 

Vimos que a jQuery define muitos metodos simples para registrar rotinas de tratamento de evento. 
Cada um deles simplesmente chama um metodo bind () mais complexo para vincular uma rotina de 
tratamento a um tipo de evento nomeado a cada um dos elementos do objeto jQuery. Usar bind() 
diretamente permite usar recursos de registro de evento avan^ados que nao estao disponfveis por 
meio dos metodos mais simples . 

Em sua forma mais simples, bind() espera uma string de tipo de evento como primeiro argumento 
e uma funQo de tratamento de evento como segundo. Os metodos simples de registro de evento 
utilizam essa forma de bind ( ). A chamada $ (' p'). click (f), por exemplo, e equivalente a: 
$('p').bind('click', f); 

bind () tambem pode ser chamado com tres argumentos. Nessa forma, o tipo de evento e o primeiro 
argumento e a funQo de tratamento e o terceiro. Voce pode passar qualquer valor entre esses dois e 
a jQuery vai configurar a propriedade data do objeto Event com o valor que for especificado antes 


4 A jQuery usa o termo “vincular” {bind, em ingles) para o registro de rotina de tratamento de evento. ECMAScript 5 e 
varios frameworks JavaScript definem um metodo bind() em funjoes (Sefao 8.7.4) e usam o termo para a associaQo de 
fimfoes com objetos nos quais devem ser invocadas. A versao do metodo Function. bind () em jQuery e uma funpio utilitaria 
chamada jQuery.proxy() e voc£ pode ler sobre ela na Sepio 19.7. 




Capftulo 19 A biblioteca jQuery 531 


que ele chame a rotina de tratamento. As vezes e util passar dados adicionais para suas rotinas de 
tratamento dessa maneira, sem ter de usar closures. 

Existem ainda outros recursos avantjados de bind(). Se o primeiro argumento for uma lista de tipos 
de evento separados por espacjos, entao a fun<jao de tratamento sera registrada para cada um dos 
tipos de evento nomeados. A chamada $( 'a') .hover(f) (consulte a Se^ao 19.4.1), por exemplo, e o 
mesmo que: 

JCa'J.bindCmouseenter mouseleave', f); 

Outro recurso importante de bind() e que ele permite especificar um espa?o de nomes (ou espa<jos 
de nomes) para suas rotinas de tratamento de evento quando voce as registra. Isso permite definir 
grupos de rotinas de tratamento e e util se voce quer depois disparar ou registrar novamente as roti¬ 
nas de tratamento em um espa?o de nomes especffico. Os espa<jos de nomes de rotina de tratamento 
sao especialmente uteis para programadores que estao escrevendo bibliotecas ou modulos de codigo 
jQuery reutilizaveis. Os espa<jos de nomes de evento sao parecidos com os seletores de classe CSS. 
Para vincular uma rotina de tratamento de evento a um espa?o de nomes, acrescente um ponto-final 
e o nome do espa?o de nomes na string de tipo de evento: 

// Vincula f como rotina de tratamento de mouseover no espaco de nomes "myMod" a todos os 
// elementos <a> 

$(' a').bind('mouseover.myMod', f); 

E possivel ate atribuir uma rotina de tratamento a varios espa?os de nomes, como segue: 

// Vincula f como rotina de tratamento de mouseout nos espacos de nomes "myMod" e 
// "yourMod" 

$(' a').bind('mouseout.myMod.yourMod', f); 

O ultimo recurso de bind() e que o primeiro argumento pode ser um objeto que mapeia nomes de 
evento em fun (joes de tratamento. Para usar o metodo hover () como exemplo novamente, a chama¬ 
da $('a').hover(f,g) e o mesmo que: 

$('a').bind({mouseenter:f, mouseleave:g}); 

Quando essa forma de bind() e usada, os nomes de propriedade no objeto passado podem ser strings 
de tipos de evento separadas por espacos e pode incluir espacos de nomes. Se voce especifica um 
segundo argumento apos o primeiro argumento de objeto, esse valor e usado como argumento de 
dados para cada um dos vinculos do evento. 

A jQuery tern outro metodo de registro de rotina de tratamento de evento. O metodo one() e chama- 
do e funciona exatamente como bind(), exceto que o registro da rotina de tratamento de evento sera 
anulado automaticamente, apos ser chamada. Isso significa, conforme o nome do metodo implica, 
que as rotinas de tratamento de evento registradas com one() nunca serao disparadas mais de uma vez. 

Um recurso que bind() e one() nao tern e a capacidade de registrar rotinas de captura de evento, 
como acontece com addEventListenerQ (Seijao 17.2.3). O IE (ate o IE9) nao suporta rotinas de 
captura e a jQuery nao tenta simular esse recurso. 

19.4.5 Anulando o registro de rotinas de tratamento de eventos 

Depois de registrar uma rotina de tratamento de evento com bind() (ou com qualquer um dos me- 
todos mais simples de registro de evento), voce pode anular seu registro com unbindQ para evitar 
que seja disparada por futuros eventos. (Note que unbind () so anula o registro de rotinas de trata- 
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memo de evento registradas com bind() e metodos jQuery relacionados. O registro de rotinas de 
tratamento passadas para addEventListenerQ ou para o metodo attachEvent() do IE nao e anulado 
e as rotinas de tratamento definidas por atributos de elemento como onclick e onmouseover nao sao 
removidas.) Sem argumentos, unbind () anula o registro de todas as rotinas de tratamento de evento 
(para todos os tipos de evento) de todos os elementos do objeto jQuery: 

$('*').unbindQ; // Remove todas as rotinas de tratamento de evento jQuery de todos os 
// elementos! 

Com um argumento de string, todas as rotinas de tratamento do tipo de evento nomeado (ou tipos, 
se a string nomear mais de um) sao desvinculadas de todos os elementos do objeto jQuery: 

// Desvincula todas as rotinas de tratamento de mouseover e mouseout em todos os 
// elementos <a> 

$('a').unbind("mouseover mouseout"); 

Essa e uma estrategia pesada e nao deve ser usada em codigo modular, pois o usuario de seu modulo 
pode estar utilizando outros modulos que registrant suas proprias rotinas de tratamento para os mesmos 
tipos de evento nos mesmos elementos. No entanto, se seu modulo registrou rotinas de tratamento de 
evento usando espa^os de nomes, voce pode usar essa versao de um so argumento de unbind () para anu- 
lar o registro apenas das rotinas de tratamento em seu espai;o de nomes (ou espa^os de nomes): 

// Desvincula todas as rotinas de tratamento de mouseover e mouseout no espaco de nomes 
// "myMod" 

$('a').unbind("mouseover.myMod mouseout.myMod"); 

// Desvincula rotinas de tratamento para qualquer tipo de evento no espaco de nomes myMod 
$('a').unbind(".myMod"); 

// Desvincula rotinas de tratamento de evento click que estao nos espaqos de nomes "nsi" e 
// "ns2" 

$('a').unbind("click.nsl.ns2"); 

Se quiser ter o cuidado de desvincular apenas as rotinas de tratamento de evento que voce mesmo re¬ 
gistrou e nao tiver utilizado espa^os de nomes, deve manter uma referenda para as fun^oes de trata¬ 
mento de evento e usar a versao de dois argumentos de unbind (). Nessa forma, o primeiro argumen¬ 
to e uma string de tipo de evento (sem espa^os de nomes) e o segundo e uma fun^ao de tratamento: 
$('#mybutton').unbind('click', myClickHandler); 

Quando chamado dessa maneira, unbind () anula o registro da funQo de tratamento de evento espe- 
cificada para eventos do tipo (ou tipos) especificado de todos os elementos do objeto jQuery. Note 
que as rotinas de tratamento de evento podem ser desvinculadas usando-se essa versao de dois argu¬ 
mentos de unbind () mesmo quando foram registradas com um valor de dados extra, usando a versao 
de tres argumentos de bindQ. 

Voce tambem pode passar um unico argumento objeto para unbindQ. Nesse caso, unbindQ e chama¬ 
do recursivamente para cada propriedade do objeto. O nome da propriedade e usado como string de 
tipo de evento e o valor da propriedade e usado como funijao de tratamento: 

$('a').unbind({ // Remove rotinas de tratamento de mouseover e mouseout especificas 
mouseover: mouseoverHandler, 
mouseout: mouseoutHandler 

Hi 

Por fim, ha mais uma maneira de chamar unbindQ. Se voce passa um objeto Event da jQuery, ele 
desvincula a rotina de tratamento de evento para a qual esse evento foi passado. Chamar unbind(ev) 
e equivalente a unbind(ev.type, ev.handler). 
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19.4.6 Disparando eventos 

As rotinas de tratamento de evento que voce registra sao chamadas automaticamente quando o 
usuario utiliza o mouse ou o teclado ou quando ocorrem outros tipos de eventos. As vezes, contu- 
do, e util disparar eventos manualmente. O modo simples de fazer isso e chamar um dos metodos 
de registro de evento simples (como clickQ ou mouseover ()) sem argumento. Assim como muitos 
metodos jQuery servem como getter e como setter, esses metodos de evento registrant uma rotina de 
tratamento quando chamados com um argumento e as disparam quando chamados sem argumen- 
tos. Por exemplo: 

$("#my_form").submit(); // Age como se o usuario tivesse clicado no botao Submit 

O metodo submit () na linha anterior sintetiza um objeto Event e dispara qualquer rotina de tra¬ 
tamento de evento que tenha sido registrada para o evento submit. Se nenhuma dessas rotinas de 
tratamento de evento retornar false ou chamar o metodo preventDefaultQ do objeto Event, o for- 
mulario sera realmente enviado. Note que os eventos que borbulham vao borbulhar mesmo quando 
disparados manualmente dessa forma. Isso significa que disparar um evento em um conjunto de ele- 
mentos selecionados tambem pode disparar rotinas de tratamento nos ascendentes desses elementos. 

E importante notar que os metodos de disparo de evento da jQuery vao disparar qualquer rotina de 
tratamento registrada com os metodos de registro de evento da jQuery e tambem as rotinas de tra¬ 
tamento definidas nos atributos HTML ou propriedades de Element, como onsubmit. Mas voce nao 
pode disparar manualmente rotinas de tratamento de evento registradas com addEventl_istener() 
ou attachEventQ (contudo, essas rotinas de tratamento ainda serao chamadas quando ocorrer um 
evento real). 

Note tambem que o mecanismo de disparo de eventos da jQuery e sfncrono - nao ha fila de even¬ 
tos envolvida. Quando voce dispara um evento, as rotinas de tratamento sao chamadas imediata- 
mente, antes que o metodo que causou o disparo que voce chamou retorne. Se voce dispara um 
evento click e uma das rotinas de tratamento disparadas dispara um evento submit, todas as rotinas 
de tratamento de submit correspondentes sao chamadas antes que a proxima rotina de tratamento 
de “click” seja chamada. 

Metodos como submit () sao convenientes para vincular e disparar eventos, mas assim como a jQuery 
define um metodo bind() mais geral, define tambem um metodo trigger () mais geral. Normalmen- 
te, voce chama trigger () com uma string de tipo de evento como primeiro argumento e ele dispara 
as rotinas de tratamento registradas para eventos desse tipo em todos os elementos do objeto jQuery. 
Assim, a chamada de submit () anterior e equivalente a: 

$("#my_form").trigger("submit"); 

Ao contrario do que acontece com os metodos bind () e unbind (), voce nao pode especificar mais de 
um tipo de evento nessa string. Contudo, assim como bind () e unbindQ, pode especificar espapas de 
nomes de evento para disparar somente as rotinas de tratamento definidas nesse espapa de nomes. Se 
quiser disparar apenas rotinas de tratamento de evento que nao tem espapa de nomes, anexe um pon- 
to de exclamapio no tipo de evento. As rotinas de tratamento registradas por meio de propriedades 
como onclick sao consideradas como nao tendo espapa de nomes: 

$("button").trigger("click.nsl"); // Dispara rotinas de tratamento de click em um espa^o 
// de nomes 

$("button").trigger("click!"); // Dispara rotinas de tratamento de click em nenhum 

// espaco de nomes 
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Em vez de passar uma string de tipo de evento como primeiro argumento para trigger(), tambem se 
pode passar um objeto Event (ou qualquer objeto que tenha uma propriedade type). A propriedade 
type sera usada para determinar o tipo de rotinas de tratamento que serao disparadas. Se voce especi- 
ficou um objeto Event da jQuery, esse objeto sera passado para as rotinas de tratamento disparadas. 
Se especificou um objeto puro, um novo objeto Event da jQuery sera criado e as propriedades do 
objeto que passou serao adicionadas a ele. Essa e uma maneira facil de passar dados adicionais para 
rotinas de tratamento de evento: 

// A rotina de tratamento de onclick de buttoni dispara o mesmo evento em button2 
$('#buttoni').click(function(e) { $('#button2'). triggerQ); }); 

// Adiciona uma propriedade extra no objeto evento ao disparar um evento 
$('#buttonl').trigger({type:'click ', synthetic:true}); 

// Esta rotina de tratamento testa essa propriedade extra para distinguir real de 
// synthetic 

$('#buttoni').click(function(e) { if (e.synthetic) {...}; }); 

Outro modo de passar dados adicionais para rotinas de tratamento de evento ao dispara-las manual- 
mente e usar o segundo argumento de triggerQ. O valor passado como segundo argumento para 
trigger() vai se tornar o segundo argumento de cada uma das rotinas de tratamento de evento dis¬ 
paradas. Se voce passar um array como segundo argumento, cada um de seus elementos sera passado 
como argumento para as rotinas de tratamento disparadas: 

$( '#buttonl') .trigger(''click", true); // Passa um unico argumento extra 

$('#buttonl').triggerC'click", [x,y,z]); // Passa tres argumentos extras 

Em certos momentos, talvez voce queira disparar todas as rotinas de tratamento para determina- 
do tipo de evento, independente de a qual elemento do documento essas rotinas de tratamento 
estejam vinculadas. Voce poderia selecionar todos os elementos com $('*') e entao chamar tri- 
gger() no resultado, mas isso seria muito ineficiente. Em vez disso, para disparar um evento 
globalmente, chame a funfao utilitaria jQuery.event.triggerQ. Essa funQo recebe os mesmos 
argumentos que o metodo trigger () e dispara rotinas de tratamento de evento eficientemente 
por todo o documento, para o tipo de evento especificado. Note que os “eventos globais” dispa- 
rados dessa forma nao borbulham e que, com essa tecnica, sao disparadas apenas as rotinas de 
tratamento registradas com metodos jQuery (e nao rotinas de tratamento de evento registradas 
com propriedades DOM, como onclick). 

Depois de chamar rotinas de tratamento de evento, triggerQ (e os metodos de conveniencia que o 
chamam) executa a a<jao padrao que estiver associada ao evento disparado (supondo que as rotinas 
de tratamento de evento nao retornaram false nem chamaram preventDefaultQ no objeto evento). 
Por exemplo, se voce disparar um evento submit em um elemento <form>, triggerQ vai chamar o 
metodo submitQ desse formulario, e se voce disparar um evento focus em um elemento, triggerQ 
vai chamar o metodo focus() desse elemento. 

Se quiser chamar rotinas de tratamento de evento sem executar a a?ao padrao, use triggerHandlerQ 
em vez de triggerQ . Esse metodo funciona exatamente como trigger( ), exceto que primeiro chama 
os metodos preventDefaultQ e cancelBubbleQ do objeto Event. Isso significa que o evento synthetic 
nao borbulha nem executa a aQo padrao associada a ele. 
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19.4.7 Eventospersonalizados 

O sistema de gerenciamento de eventos da jQuery foi projetado em torno dos eventos padrao ge- 
rados pelos navegadores Web, como cliques de mouse e pressionamentos de tecla. Mas ele nao esta 
preso a esses eventos e voce pode usar qualquer string como nome de tipo de evento. Com bind () 
voce pode registrar rotinas de tratamento para esse tipo de “evento personalizado” e com trigger () 
pode fazer com que essas rotinas de tratamento sejam chamadas. 

Esse tipo de chamada indireta de rotinas de tratamento de evento personalizadas se mostra muito 
util para escrever codigo modular e implementar um modelo publicaQo/assinatura ou o padrao 
Observer. Muitas vezes, ao usar eventos personalizados, voce pode achar util dispara-los globalmente 
com a furnjao jQuery.event.trigger (), em vez de usar o metodo triggerQ: 

// Ouando o usuario clica no botao "logoff", transmite um evento personalizado 
// para qualquer observador interessado que precise salvar seu estado e entao 
// navegar para a pagina de logoff. 

$("#logoff").click(function() { 

$.event.trigger("logoff"); // Transmite um evento 
window.location = "logoff.php"; // Navega para uma nova pagina 

}); 

Vamos ver, na SeQo 19.6.4, que os metodos Ajax da jQuery transmitem eventos personalizados 
como esse para notificar ouvintes interessados. 


19.4.8 Eventos dinamicos 

O metodo bind() vincula rotinas de tratamento de evento a elementos especificos do documento, 
exatamente como fazem addEventListenerQ e attachEventQ (consulte o Capftulo 17). Mas os apli- 
cativos Web que usam jQuery em geral criam novos elementos dinamicamente. Se tivessemos usado 
bind() para vincular uma rotina de tratamento de evento a todos os elementos <a> do documento e 
depois criassemos novo conteudo de documento com novos elementos <a>, esses novos elementos 
nao teriam as mesmas rotinas de tratamento de evento que os antigos e nao se comportariam da 
mesma maneira. 

A jQuery trata desse problema com “eventos dinamicos”. Para usar eventos dinamicos, utilize os me¬ 
todos delegateQ e undelegate(), em vez de bind() e unbindQ. delegateQ normalmente e chamado 
em $(document) e recebe uma string seletora jQuery, uma string de tipo de evento jQuery e uma fun- 
9ao de tratamento de evento jQuery. Ele registra uma rotina de tratamento interna no documento 
ou na janela (ou em qualquer elemento que estiver no objeto jQuery). Quando um evento do tipo 
especificado borbulha ate essa rotina de tratamento interna, ele determina se o destino do evento (o 
elemento em que o evento ocorreu) corresponde a string seletora. Caso positivo, ele chama a funQo 
de rotina de tratamento especificada. Assim, para tratar de eventos mouseover em elementos <a> 
antigos e recem-criados, voce poderia registrar uma rotina de tratamento como segue: 
$(document).delegate("a", "mouseover", linkHandler); 

Ou entao, poderia usar bind() nas partes estaticas de seu documento e depois usar delegate () para 
tratar das partes que mudam dinamicamente: 

// Rotinas de tratamento de evento estaticas para links estaticos 
$("a").bind("mouseover", linkHandler); 
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// Rotinas de tratamento de evento dinamicas para as partes do documento que sao 
// atualizadas dinamicamente 

$(".dynamic").delegate("a", "mouseover", linkHandler); 

Assim como o metodo bind () tem uma versao de tres argumentos que permite especificar o valor da 
propriedade data do objeto evento, o metodo delegateQ tem uma versao de quatro argumentos que 
permite fazer o mesmo. Para usar essa versao, passe o valor dos dados como terceiro argumento e a 
fiin^ao de tratamento como o quarto. 

E importante entender que os eventos dinamicos dependem da borbulha de eventos. Quando um 
evento borbulha para o objeto documento, ja pode ter passado por varias rotinas de tratamento de 
evento estaticas. E se qualquer uma dessas rotinas de tratamento chamou o metodo cancelBubbleQ 
do objeto Event, a rotina de tratamento de evento dinamica nunca sera chamada. 

A jQuery define um metodo chamado liveQ que tambem pode ser usado para registrar eventos 
dinamicos. liveQ e um pouco mais dificil de entender do que delegate(), mas tem a mesma assi- 
natura de dois ou tres argumentos que bind() tem e e mais usado na pratica. As duas chamadas de 
delegateQ mostradas anteriormente tambem poderiam ser escritas como segue, usando liveQ: 

$("a”).liveC'mouseover", linkHandler); 

$("a", $(".dynamic")).liveC'mouseover", linkHandler); 

Quando o metodo liveQ e chamado em um objeto jQuery, os elementos desse objeto nao sao usa- 
dos realmente. Em vez disso, o que importa e a string seletora e o objeto contexto (o primeiro e o se- 
gundo argumentos de $()) que foram usados para criar o objeto jQuery. Os objetos jQuery tornam 
esses valores disponiveis por meio de suas propriedades context e selector (consulte a Se^ao 19.1.2). 
Normalmente, voce chama $() com apenas um argumento e o contexto e o documento corrente. 
Assim, para um objeto jQuery x, as duas linhas de codigo a seguir fazem a mesma coisa: 
x.live(type,handler); 

$(x.context).delegateQ.selector, type, handler); 

Para anular o registro de rotinas de tratamento de evento dinamicas, use dieQ ou undelegateQ. 
dieQ pode ser chamado com um ou dois argumentos. Com apenas um argumento de tipo de even¬ 
to, ele remove todas as rotinas de tratamento de evento dinamicas que correspondam ao seletor e ao 
tipo de evento. E com um tipo de evento e um argumento furnjao de tratamento, ele remove apenas 
a rotina de tratamento especificada. Alguns exemplos: 

$('a').die('mouseover'); // Remove todas as rotinas de tratamento 

// dinamicas para mouseover em elementos <a> 
$('a').die('mouseover', linkHandler); // Remove apenas uma rotina de tratamento 
// dinamica especifica 

undelegateQ e como dieQ, mas separa mais explicitamente o contexto (os elementos nos quais as 
rotinas de tratamento de evento internas sao registradas) e a string seletora. As chamadas de dieQ 
anteriores poderiam ser escritas como segue: 

$(document).undelegate('a'); // Remove todas as rotinas de tratamento 

// dinamicas para elementos <a> 

$(document).undelegate('a', 'mouseover'); // Remove rotinas de tratamento de 

// mouseover dinamicas 

$(document).undelegate('a', 'mouseover', linkHandler); // Uma rotina de tratamento especifica 

Por fim, undelegate () tambem pode ser chamado sem um argumento. Nesse caso, ele anula o registro 
de todas as rotinas de tratamento de evento dinamicas que sao delegadas dos elementos selecionados. 
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19.5 Efeitosanimados 

O Capftulo 16 mostrou como escrever scripts de estilos CSS de elementos do documento. Con- 
figurando a propriedade CSS visibility, por exemplo, voce pode fazer elementos aparecerem e 
desaparecerem. A Segao 16.3.1 demonstrou como os scripts CSS podem ser usados para produzir 
efeitos visuais animados. Em vez de apenas fazer um elemento desaparecer, por exemplo, poderfa- 
mos reduzir o valor de sua propriedade opacity durante um perfodo de meio segundo para que ele 
fosse desaparecendo rapidamente, em lugar de apenas deixar de existir. Esse tipo de efeito visual ani- 
mado produz uma experiencia mais agradavel para os usuarios e e facil consegui-los com a jQuery. 

A jQuery define metodos simples, como fadelnQ e fadeOutf), para efeitos visuais basicos. Alem de 
metodos de efeitos simples, ela define um metodo animate( ) para produzir animates personalizadas 
mais complexas. As subsegoes a seguir explicam os metodos de efeitos simples e o metodo mais geral 
animateQ. Primeiramente, contudo, vamos descrever algumas caracterfsticas gerais da estrutura de 
animagao da jQuery. 

Toda animagao tern uma duragao que especifica por quanto tempo o efeito deve durar. Isso e defi- 
nido como um numero de milissegundos ou usando-se uma string. A string “fast” significa 200ms. 
A string “slow” significa 600ms. Se voce especificar uma string de duragao que a jQuery nao reco- 
nhece, vai obter uma duragao padrao de 400ms. Novos nomes de duragao podem ser definidos, 
adicionando-se novos mapeamentos de string para numero em jQuery. fx. speeds: 

jQuery.fx.speeds["medium-fast"] = 300; 
jQuery.fx.speeds["medium-slow"] = 500; 

Os metodos de efeito da jQuery normalmente recebem a duragao do efeito como um primeiro argu- 
mento optional. Se voce omite o argumento duragao, em geral obtem os 400ms padrao. Contudo, 
alguns metodos produzem um efeito instantaneo inanimado quando se omite a duragao: 

$("#message").fadelnQ; // Faz um elemento aparecer gradualmente durante 400ms 

$("#message").fadeOut("fast"); // 0 faz desaparecer gradualmente durante 200ms 


Desabilitando animates 

Os efeitos visuais animados se tornaram a norma em muitos sites, mas nem todos os usuarios gostam 
deles: alguns acham que atrapalham e outros sentem enjoo. Usuarios deficientes podem achar que as ani¬ 
mates interferem na tecnologia auxiliar, como leitores de tela, e usuarios com hardware antigo podem 
achar que eles exigem poder de processamento demais. Como uma cortesia para seus usuarios, voce em 
geral deve manter suas animates simples e moderadas, e tambem dar a opto de desabilita-las comple- 
tamente. A jQuery torna facil desabilitar todos os efeitos globalmente: basta configurar jQuery. fx. off 
como true. Isso tern o efeito de mudar a duragao de cada animagao para Oms, fazendo-as se comportar 
como alteragoes instantaneas e inanimadas. 

Para permitir que os usuarios finais desabilitem os efeitos, voce pode usar codigo como este em seus 
scripts: 

$(".stopmoving").click(function() { jQuery.fx.off = true; }); 

Entao, se o web designer incluir um elemento com dasse"stopmoving"na pagina, o usuario podera dicar 
nele para desabilitar as animagdes. 
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Os efeitos da jQuery sao assincronos. Quando voce chama um metodo de animaQo como fadeln(), 
ele retorna imediatamente e a anima?ao e feita “em segundo piano”. Como os metodos de anima^ao 
retornam antes que a anima^ao esteja terminada, o segundo argumento (tambem opcional) de mui- 
tos metodos de efeito da jQuery e uma funQo que sera chamada quando o efeito estiver concluido. 
A funijao nao recebe argumento algum, mas o valor de this e configurado como o elemento do do- 
cumento que foi animado. A fun^ao callback uma vez para cada elemento selecionado: 

// Faz um elemento aparecer gradualmente de forma rapida e, quando estiver visivel, exibe 
// algum texto nele. 

$("#message").fadeln("fast", function() { $(this).text("Hello World"); }); 

Passar uma fun$ao callback para um metodo de efeito permite executar a?oes no final de um efei¬ 
to. Note, entretanto, que isso nao e necessario quando se quer simplesmente executar varios efeitos 
em sequencia. Por padrao, as an imagoes da jQuery sao enfileiradas (a Se?ao 19.5.2.2 mostra como 
anular esse padrao). Se voce chama um metodo de anima?ao em um elemento que ja esta sendo 
animado, a nova animafao nao comefa imediatamente, mas e adiada ate que a animafao atual 
termine. Por exemplo, voce pode fazer um elemento piscar antes que apare^a gradualmente de 
forma permanente: 

$("#blinker").fadeln(ioo).fadeOut(lOO).fadeln(lOO).fadeOut(lOO).fadelnQ; 

Os metodos de efeito da jQuery sao declarados para aceitar argumentos de dura^ao e retorno de 
chamada opcionais. Tambem e possivel chamar esses metodos com um objeto cujas propriedades 
especificam op^oes de animaQo: 

// Passa a duracao e o retorno de chamada como propriedades de objeto, em vez de argumentos 
$("#message").fadeln({ 
duration: "fast", 

complete: function() { $(this).text("Hello World"); } 

}); 

Mais comumente, a passagem de um objeto composto por objetos de anima?ao e feita com o meto¬ 
do geral animateQ, mas tambem e possivel fazer isso com os metodos de efeito mais simples. O uso 
de um objeto op^oes permite configurar outras op^oes avanfadas para controlar enfileiramento e 
abrandamento, por exemplo. As op^oes disponiveis estao explicadas na SeQo 19.5.2.2. 

19.5.1 Efeitos simples 

A jQuery define nove metodos de efeitos simples para ocultar e exibir elementos. Eles podem ser 
divididos em tres grupos, baseados no tipo de efeito que realizam: 

fadeln(), fadeOut(), fadeTo() 

Esses sao os efeitos mais simples: fadelnQ e fadeOutQ simplesmente animam a propriedade 
CSS opacity para exibir ou ocultar um elemento. Ambos aceitam argumentos de dura?ao e 
retorno de chamada opcionais. fadeToQ e ligeiramente diferente: ele espera um argumento 
de opacidade final e anima a alterafao da opacidade atual do elemento ate esse final. Para 
o metodo fadeToQ, a dura?ao (ou objeto op<;6es) e exigida como primeiro argumento e a 
opacidade final e exigida como segundo argumento. A furnjao callback e um terceiro argu¬ 
mento opcional. 
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show(), hide()j toggle() 

O metodo fadeOut() listado anteriormente torna os elementos invisiveis, mas mantem o espa- 
50 para eles no layout do documento. Em contraste, o metodo hide() remove os elementos do 
layout como se a propriedade CSS display fosse configurada como none. Quando chamados 
sem argumentos, hide() e show() simplesmente ocultam ou exibem imediatamente os elemen¬ 
tos selecionados. Contudo, com um argumento dura^ao (ou objeto op^oes), eles animam o 
processo de oculta^ao ou exibiqao. hide() reduz as propriedades width e height de um elemento 
para 0, ao mesmo tempo que reduz a propriedade opacity do elemento para 0. show() inverte 
o processo. 

toggle () muda o estado de visibilidade dos elementos em que e chamado: se estao ocultos, ele 
chama show(), e se estao visi'veis, chama hide(). Assim como em show() e hide(), voce deve 
passar uma dura^ao ou um objeto op^oes para toggle () a fim de obter um efeito animado. 
Passar true para toggleQ e o mesmo que chamar show() sem argumentos e passar false e o 
mesmo que chamar hide() sem argumentos. Note tambem que, se voce passa dois ou mais 
argumentos de funijao para toggle (), ele registra retinas de tratamento de evento, conforme 
descrito na Se^ao 19.4.1. 

slideDownQ, slideUpQ, slideToggle() 

slideUp() oculta os elementos do objeto jQuery, animando suas alturas para 0 e depois con- 
figurando a propriedade CSS display como “none”. slideDownQ inverte o processo para tor- 
nar novamente visfvel um elemento oculto. slideToggleQ alterna a visibilidade de um item 
usando uma anima^ao de deslizar para cima ou para baixo. Cada um dos tres metodos aceita 
os argumentos de dura^ao e retorno de chamada opcionais (ou o argumento objeto op^oes). 

Aqui esta um exemplo que chama metodos de cada um desses grupos. Lembre-se de que as anima¬ 
tes da jQuery sao enfileiradas por padrao; portanto, essas an imagoes sao feitas uma apos a outra: 

// Faz todas as imagens desaparecer gradualmente e depois as exibe, desliza para cima e 
// entao para baixo 

$("img") .fade0ut().show(300).slideUp().slideToggle(); 

Varios plug-ins da jQuery (consulte a SeQo 19.9) adicionam mais metodos de efeito na biblioteca. 
A biblioteca jQuery UI (SeQo 19.10) de intera?ao com o usuario contem um conjunto de efeitos 
especialmente abrangente. 

19.5.2 Animates personalizadas 

O metodo animateQ pode ser usado para produzir efeitos animados mais gerais do que estao dispo- 
rn'veis com os metodos de efeitos simples. O primeiro argumento de animate!) especifica o que vai 
ser animado e os argumentos restantes especificam como animar. O primeiro argumento e obrigato- 
rio: deve ser um objeto cujas propriedades especificam atributos CSS e seus valores finais. animate!) 
anima as propriedades CSS de cada elemento, desde seu valor atual ate o valor final especificado. 
Assim, por exemplo, o efeito slideUpQ descrito anteriormente tambem pode ser obtido com codigo 
como o seguinte: 

// Reduz a 0 a altura de todas as imagens 
$("img").animate({ height: 0 }); 
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Como segundo argumento optional, voce pode passar um objeto opfoes para animateQ: 

$(''#sprite'') .animate({ 
opacity: .25, 
font-size: 10 

% { 

duration: 500, 
complete: function() { 
this.text("Goodbye") 

} 

»J 

Em vez de passar um objeto op^oes como segundo argumento, animate!) tambem permite especi- 
ficar tres das op^oes mais usadas como argumentos. Voce pode passar a duraQo (como numero ou 
string) como segundo argumento. Pode especificar o nome de uma fun^ao de abrandamento como 
terceiro argumento. (As fimfoes de abrandamento vao ser explicadas em breve.) E pode especificar 
uma funqtio callback como quarto argumento. 

No caso mais geral, animate () aceita dois argumentos objeto. O primeiro especifica o que vai ser 
animado e o segundo especifica como vai ser animado. Para se entender completamente como se faz 
an imagoes com jQuery, existem mais detalhes sobre os dois objetos que voce deve saber. 


// Anima a opacidade ate .25 

// Anima o tamanho da fonte ate 10 pixels 

// A animacao dura 1/2 segundo 
// Chama esta fun<;ao ao terminar 
// Muda o texto do elemento. 


19.5.2.1 0 objeto propriedades da animado 

O primeiro argumento de animate () deve ser um objeto. Os nomes de propriedade desse objeto 
devem ser nomes de atributo CSS e os valores dessas propriedades devem ser os valores finais 
para os quais a animacao vai mudar. Somente propriedades numericas podem ser animadas: nao 
e possivel animar cores, fontes ou propriedades enumeradas, como display. Se o valor de uma 
propriedade e um numero, sao pressupostos pixels. Se o valor e uma string, voce pode especifi¬ 
car unidades. Se voce omitir as unidades, novamente serao pressupostos pixels. Para especificar 
valores relatives, prefixe a string com “+=” para aumentar o valor ou com para diminuir. 
Por exemplo: 

$("p").animate({ 

"margin-left": "+=.5in", // Aumenta o recuo do paragrafo 

opacity: "-=. 1 " // E diminui sua opacidade 

}); 

Observe o uso das aspas no nome de propriedade “margin-left” no objeto literal anterior. O hifen 
nesse nome de propriedade significa que esse nao e um identificador valido em JavaScript, de modo 
que deve ser colocado entre aspas aqui. A jQuery tambem permite usar a alternativa marginLeft, 
evidentemente. 

Alem dos valores numericos (com unidades opcionais e prefixos “+=” e existem tres outros 

valores que podem ser usados em objetos animacao da jQuery. O valor “hide” salva o estado atual da 
propriedade e depois anima essa propriedade em direQo a 0. O valor “show” anima uma proprieda¬ 
de CSS em direQo ao seu valor salvo. Se uma animacao usar “show”, a jQuery vai chamar o metodo 
show() quando a animacao terminar. E se uma animacao usar “hide”, a jQuery vai chamar hide() 
quando a animacao terminar. 
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Voce tambem pode usar o valor “toggle” para exibir ou ocultar, dependendo da configuragao atual 
do atributo. Um efeito “slideRight” (como o metodo slideUp(), mas animando a largura do elemen- 
to) pode ser produzido como segue: 

$("img").animate({ 
width: "hide", 
borderLeft: "hide", 
borderRight: "hide", 
paddingLeft: "hide", 
paddingRight: "hide" 

}); 

Substitua os valores da propriedade por “show” ou “toggle” para produzir efeitos de deslizamento 
lateral analogos a slideDownQ e slideToggleQ. 

19.5.2.2 0 objeto op0es de animado 

O segundo argumento de animate () e um objeto opcional contendo opgoes que especificam como 
a animagao e feita. Voce ja viu duas das opgoes mais importantes. A propriedade duration especifica 
a duragao da animagao em milissegundos ou como a string “fast” ou “slow” ou qualquer nome que 
voce tenha definido em jOuery. fx.speeds. 

Outra opgao que voce ja viu e a propriedade complete: ela especifica uma fungao que sera chamada 
quando a animagao estiver concluida. Uma propriedade semelhante, step, especifica uma funpio 
que e chamada a cada passo ou quadro da animapio. O elemento que esta sendo animado e o valor 
de this e o valor atual da propriedade que esta sendo animada e passado como primeiro argumento. 

A propriedade queue do objeto opgoes especifica se a animapio deve ser enfileirada - se deve ser 
adiada ate que as animates pendentes tenham terminado. Todas as animates sao enfileiradas por 
padrao. Para desabilitar o enfileiramento, configure a propriedade queue como false. As animates 
nao enfileiradas comegam imediatamente. As animagoes enfileiradas subsequentes nao sao adiadas 
por an imagoes nao enfileiradas. Considere o codigo a seguir: 

$("img").fadeln(500) 

.animate({"width":"+=100"}, {queue:false, duration: 1000 }) 

.fade0ut(500); 

Os efeitos fadeln() e fadeOutQ sao enfileirados, mas a chamada de animate() (que anima a pro¬ 
priedade width por 1000ms), nao. A animapio da largura comepi ao mesmo tempo que o efeito 
fadelnQ. O efeito fadeOutQ comepi assim que o efeito fadelnQ termina: ele nao espera a animapio 
da largura terminar. 


Fun^oes de abrandamento 

A maneira obvia mas simploria de fazer animagoes envolve um mapeamento linear entre o tempo e o 
valor que esta sendo animado. Se estamos em 100ms de uma animagao de 400ms, por exemplo, a ani- 
magao esta 25% concluida. Se estamos animando a propriedade opacity de 1,0 a 0,0 (por uma chamada 
de fadeOutQ, talvez) em uma animagao linear, a opacidade deve estar em 0,75 nesse ponto. Contudo, 
verifica-se que os efeitos visuais sao mais agradaveis se nao sao lineares. Assim, a jQuery interpoe uma 
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"fungao de abrandamento"que faz o mapeamento de uma porcentagem de condusao baseada no tempo 
ate a porcentagem de efeito desejada. A jQuery chama a fungao de abrandamento com urn valor baseado 
no tempo entre 0 e 1. Ela retorna outro valor entre 0 e 1 e a jQuery calcula o valor da propriedade CSS com 
base nesse valor calculado. De modo geral, se espera que as fungoes de abrandamento retornem 0 quan- 
do o valor 0 e passado e 1 quando e passado o valor 1, e claro, mas eles podem ser nao lineares entre esses 
dois valores e essa nao linearidade faz parecer que a animagao acelera e desacelera. 

A fungao de abrandamento padrao da jQuery e uma senoide: ela comega lenta, em seguida acelera, 
depoisfica lenta novamente para"abrandar"a animagao ate seu valor final. A jQuery da nomes para suas 
fungoes de abrandamento. A fungao padrao e chamada "swing" e a jQuery tambem implementa uma 
fungao linear chamada "linear". Voce pode adicionar suas proprias fungoes de abrandamento no objeto 
jQuery.easing: 

jQuery.easing["squareroot"] = Math.sqrt; 

A biblioteca jQuery Ul e urn plug-in conhecido simplesmente como "jQuery Easing Plugin"definem uma 
amplo conjunto de fungoes de abrandamento adicionais. 


As opgoes de animagao restantes envolvem fungoes de abrandamento. A propriedade easing do 
objeto opgoes especifica o nome de uma fungao de abrandamento. Por padrao, a jQuery usa a fun¬ 
gao senoidal, a qual chama de “swing”. Se quiser que suas animagoes sejam lineares, use um objeto 
opgoes como o seguinte: 

$("img").animateffwidth”:”+=100"}, {duration: 500, easing:"linear"}); 

Lembre-se de que as opgoes duration, easing e complete tambem podem ser especificadas por argu- 
mentos de animateQ, em vez de se passar um objeto opgoes. Portanto, a animagao anterior tambem 
poderia ser escrita como segue: 

$("img").animate({ , 'width":''+=100''}, 500, "linear"); 

Por fim, a estrutura de animagao da jQuery permite ate especificar diferentes fungoes de abranda¬ 
mento para as diferentes propriedades CSS que voce queira animar. Existem duas maneiras diferen¬ 
tes de conseguir isso, demonstradas pelo codigo a seguir: 

// Oculta imagens, assim como o metodo hide(), mas anima o tamanho delas linearmente 
// enquanto a opacidade esta sendo animada com a funcao de abrandamento padrao "swing” 

// Um modo de fazer isso: 

// Usar a opgao specialEasing para especificar funcoes de abrandamento personalizadas 
$("img").animate({ width:"hide", height:"hide", opacity:"hide" }, 

{ specialEasing: { width: "linear", height: "linear" }}); 

// Outro modo de fazer isso: 

// Passar arrays [target value, easing function] no primeiro argumento objeto. 

$("img").animate({ 

width: ["hide", "linear"], height: ["hide", "linear"], opacity:"hide" 
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19.5.3 Cancelando, atrasando e enfileirando efeitos 

A jQuery define mais alguns metodos de animaQo e relacionados as filas que voce deve conhecer. 
O metodo stop() e o primeiro: ele interrompe qualquer animaQo que esteja em execu^ao nos ele- 
mentos selecionados. stop() aceita dois argumentos booleanos opcionais. Se o primeiro argumento 
for true, a fila da anima?ao sera apagada para os elementos selecionados: isso vai cancelar qualquer 
anima^ao pendente e tambem vai interromper a atual. O padrao e false: se esse argumento e omiti- 
do, as animates enfileiradas nao sao canceladas. O segundo argumento especifica se as propriedades 
CSS que estao sendo animadas devem ser deixadas como estao no momento ou se devem ser con- 
figuradas com seus valores de destino finais. Passar true as configura com seus valores finais. Passar 
false (ou omitir o argumento) as deixa com seus valores atuais, quaisquer que sejam. 

Quando as animates forem disparadas por eventos do usuario, talvez voce queira cancelar qualquer 
animaQo atual ou enfileirada, antes de iniciar uma nova. Por exemplo: 

// As imagens se tornam opacas quando o mouse fica sobre elas. 

// Cuidado para nao ficarmos enfileirando animacoes em eventos de mouse! 

$("img").bind({ 

mouseover: functionQ { $(this).stopQ.fadeTo(300, 1.0); }, 
mouseout: function() { $(this).stopQ.fadeTo(B00, 0.5); } 

}); 

O segundo metodo relacionado a animaQo que vamos abordar aqui e delay (). Ele simplesmente 
adiciona um atraso cronometrado na fila de anima?ao: passe uma duraQo em milissegundos (ou 
uma string de dura^ao) como primeiro argumento e um nome de fila como segundo argumento 
optional (o segundo argumento normalmente nao e necessario: vamos falar sobre nomes de fila, a 
seguir). delay () pode ser usado em animates compostas como a seguinte: 

// Desaparece gradual e rapidamente ate a metade, espera, em seguida desliza para cima 
$("img").fadeTo(i00, 0.5).delay(200). slideUpQ; 

No exemplo de metodo stopQ anterior, usamos eventos mouseover e mouseout para animar a opa- 
cidade das imagens. Podemos refinar esse exemplo adicionando um pequeno atraso antes do initio 
da anima^ao. Desse modo, se o mouse se mover rapidamente sobre uma imagem, sem parar, nao vai 
ocorrer uma animaQo que atrapalhe: 

$("img").bind({ 

mouseover: functionQ { $(this).stop(true).delay(lOO).fadeTo(300, 1.0); }, 
mouseout: functionQ { $(this).stop(true).fadeTo(300, 0.5); } 

}); 

Os ultimos metodos relacionados a animaQo sao aqueles que fornecem acesso de baixo nivel ao 
mecanismo de enfileiramento da jQuery. As filas da jQuery sao listas de funijoes a serem executadas 
em sequencia. Cada fila e associada a um elemento do documento (ou a objetos Document ou Win¬ 
dow) e as filas de cada elemento sao independentes das filas de outros elementos. Uma nova funqao 
pode ser adicionada na fila com o metodo queueQ. Quando sua firn^ao atingir o initio da fila, vai 
ser automaticamente retirada da fila e chamada. Quando sua funijao e chamada, o valor de this e o 
elemento com o qual ela esta associada. Sua funQo vai receber outra como unico argumento. Quan¬ 
do sua funijao fiver concluido sua operaQo, deve chamar a funQo que foi passada a ela. Isso executa 
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a proxima operafao da fila e, se voce nao chamar a firnfao, a fila vai parar e as fimfoes enfileiradas 
nunca serao chamadas. 

Vimos que e possfvel passar uma funfao callback para metodos de efeito da j Query, para executar al- 
gum tipo de afao depois que o efeito termina. Voce pode obter o mesmo efeito enfileirando sua funfao: 
// Faz um elemento aparecer gradualmente, espera, configura algum texto nele e anima sua 

$("#message").fadeln().delay(200).queue(function(next) { 

$(this).text(''Hello World"); // Exibe algum texto 

next(); // Executa o proximo item da fila 

}).animate({borderWidth: "+=10px;"}); // Aumenta sua borda 

O argumento funfao para fimfoes enfileiradas e um novo recurso da jQuery 1.4. Em codigo escrito 
para versoes anteriores da biblioteca, as fun foes enfileiradas tiram a proxima funfao da fila “manual- 
mente”, chamando o metodo dequeue(): 

$(this).dequeue(); // Em vez de next() 

Se nao ha nada na fila, chamar dequeue() nao faz nada. Caso contrario, remove uma firnfao do inicio 
da fila e a chama, configurando o valor de this e passando a funfao descrita anteriormente. 

Existem ainda mais algumas maneiras pesadas de manipular a fila. clearOueueQ limpa a fila. Passar 
um array de fimfoes para queue(), em vez de uma unica funfao, substitui a fila pelo novo array de 
funfoes. E chamar queue () sem uma firnfao e sem um array de fun foes retorna a fila atual como um 
array. Alem disso, a jQuery define versoes dos metodos queue () e dequeue () como fimfoes utilitarias. 
Se quiser adicionar a firnfao f na fila de um elemento e, pode usar o metodo ou a firnfao: 

$(e).queue(f); // Cria um objeto jQuery contendo e, e chama o metodo queue 

jQuery.queue(e,f); // Apenas chama a funfao utilitaria jQuery.queue() 

Por fim, note que queue!), dequeue!) e clearOueueQ recebem todas um nome de fila opcional como 
primeiro argumento. Os metodos de efeitos e animafao da jQuery usam uma fila chamada “fx” e 
essa e a fila usada se voce nao especifica um nome de fila. O mecanismo de fila da jQuery e util 
quando voce precisa executar operafoes assincronas sequencialmente: em vez de passar uma firnfao 
callback para cada operafao assincrona, para que ela possa disparar a proxima firnfao na sequencia, 
voce pode usar uma fila para gerenciar a sequencia. Basta passar um nome de fila que nao seja “fx”. 
E lembre-se de que fimfoes enfileiradas nao sao executadas automaticamente. Voce precisa chamar 
dequeue!) explicitamente para executar a primeira e cada operafao deve retirar a proxima da fila 
quando terminar. 

19.6 Ajax com jQuery 

Ajax e o nome popular das tecnicas de programafao de aplicativo Web que utilizam scripts HTTP 
(consulte o Capitulo 18) para carregar dados quando necessario, sem fazer a pagina atualizar. Como 
as tecnicas Ajax sao muito uteis nos aplicativos Web modernos, a jQuery contem utilitarios Ajax 
para simplified-las. A jQuery define um metodo utilitario de alto nfvel e quatro fimfoes utilitarias 
de alto nivel. Esses utilitarios de alto nfvel sao todos baseados em uma unica firnfao de baixo nfvel 
poderosa, jQuery.ajaxQ. As subsefoes a seguir descrevem primeiro os utilitarios de alto nfvel e, em 
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seguida, abordam a funQo jQuery.ajax() em detalhes. Para entender completamente o funciona- 
mento dos utilitarios de alto nivel, voce precisa compreender a funijao jQuery.ajax(), mesmo que 
nunca precise utiliza-la explicitamente. 

19.6.1 0 metodo load() 

O metodo load() e o mais simples de todos os utilitarios da jQuery: passe um URL e ele carrega o 
conteudo desse URL de forma assincrona e depois insere esse conteudo em cada um dos elementos 
selecionados, substituindo qualquer conteudo que ja esteja la. Por exemplo: 

// Carrega e exibe o relatorio de status mais recente a cada 60 segundos 
setInterval(function() { $("#stats").load("status_report.html"); }, 60000); 

Tambem vimos o metodo load() na SeQo 19.4.1, onde foi usado para registrar uma rotina de tra- 
tamento para eventos load. Se o primeiro argumento desse metodo e uma fun^ao, em vez de uma 
string, ele se comporta como um metodo de registro de rotina de tratamento de evento e nao como 
um metodo Ajax. 

Se quiser exibir apenas uma parte do documento carregado, adicione um espa?o no URL e depois 
dele coloque um seletor jQuery. Quando o URL tiver carregado, o seletor especificado sera usado 
para selecionar as partes do HTML carregado a serem exibidas: 

// Carrega e exibe a parte da previsao do tempo referente a temperatura 
$( '#temp') .loadCweather_report.html ^temperature"); 

Note que o seletor no final desse URL e muito parecido com um identificador de fragmento (a parte 
hash do URL, descrita na Sefao 14.2). Contudo, se quiser que a jQuery insira apenas a parte (ou 
partes) selecionada do documento carregado, o espa^o e obrigatorio. 

O metodo load() aceita dois argumentos opcionais, alem do URL obrigatorio. O primeiro sao os 
dados a anexar no URL ou para enviar junto com a requisiQo. Se voce passa uma string, ela e ane- 
xada no URL (apos um ? ou &, conforme necessario). Se voce passa um objeto, ele e convertido em 
uma string de pares nome=valor separados por sinais de E comercial e enviado junto com a requi¬ 
site. (Os detalhes da conversao de objeto para string do Ajax estao no quadro da Secjao 19.6.2.2). 
Normalmente, o metodo load() faz uma requisite HTTP GET, mas se voce passa um objeto da¬ 
dos, ele faz uma requisRao POST em vez disso. Aqui estao dois exemplos: 

// Carrega a previsao do tempo para um codigo postal especificado 
$( '#temp') .loadCus_weather_report.html", "zipcode=02134"); 

// Aqui, usamos em vez disso um objeto como dados e especificamos graus em Fahrenheit 
$('#temp').loadCus_weather_report.html", { zipcode:02134, units:'F' }); 

Outro argumento optional de load() e uma fun to callback que sera invocada quando a requisite 
Ajax terminar com ou sem sucesso e (em caso de sucesso) depois que o URL tiver sido carregado e 
inserido nos elementos selecionados. Se voce nao especificar qualquer dado, pode passar essa funQo 
callback como segundo argumento. Caso contrario, ela deve ser o terceiro argumento. A funQo call¬ 
back especificada sera chamada uma vez como metodo de cada um dos elementos no objeto jQuery 
e vai receber tres argumentos para cada chamada: o texto completo do URL carregado, uma string 
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de codigo de status e o objeto XMLHttpRequest usado para carregar o URL. O argumento status e 
um codigo de status da jQuery e nao HTTP, e sera uma string como “success”, “error” ou “timeout”. 


Codigos de status Ajax da jQuery 

Todos os utilitarios Ajax da jQuery, induindo o metodo load(), chamam fungoes callback para forne- 
cer notificagao assincrona do sucesso ou da falha da requisigao. 0 segundo argumento dessas fungoes 
callback e uma string com um dos seguintes valores: 

"success" 

Indica que a requisigao foi concluida com sucesso. 

"notmodified" 

Esse codigo indica que a requisigao foi concluida normalmente, mas que o servidor enviou uma res- 
posta HTTP 304"Not Modified", indicando que o URL solicitado nao mudou desde a ultima solicitagao. 
Esse codigo de status so ocorre se voce configura a opgao ifModified como true. (Consulte a Segao 
19.6.3.1.) A jQuery 1.4 considera o codigo de status "notmodified" um sucesso, mas as versoes ante- 
riores o consideram um erro. 

"error" 

Indica que a requisigao nao foi concluida com sucesso, devido a um erro HTTP de algum tipo. Para 
obter mais detalhes, voce pode verificar o codigo de status HTTP no objeto XMLHttpRequest, que 
tambem e passado para cada callback. 

"timeout" 

Se uma requisigao Ajax nao e concluida dentro do intervalo de tempo-limite escolhido, a fungao callback 
de erro e chamada com esse codigo de status. Por padrao, as requisigoes Ajax da jQuery nao atingem 
um tempo-limite; voce so vai ver esse codigo de status se configurar a opgao timeout (Segao 19.6.3.1). 

"parsererror" 

Esse codigo de status indica que a requisigao HTTP foi concluida com sucesso, mas que a jQuery 
nao conseguiu analisa-la do modo esperado. Esse codigo de status ocorre se o servidor envia um 
documento XML malformado ou um texto JSON malformado, por exemplo. Note que esse codigo de 
status e "parsererror" e nao"parseerror". 


19.6.2 Fungoes utilitarias Ajax 

Os outros utilitarios Ajax de alto nivel da jQuery sao fungoes, nao metodos, e sao chamadas di- 
retamente por meio de jQuery ou $ e nao um objeto jQuery. jQuery.getScriptQ carrega e executa 
arquivos de codigo JavaScript. jQuery.getJSONQ carrega um URL, o analisa como JSON e passa o 
objeto resultante para a callbackespecificada. Essas duas fungoes chamam jQuery.get(), que e uma 
fungao de busca de URL de uso mais geral. Por fim, jQuery.post() funciona como jQuery.get(), 
mas faz uma requisigao HTTP POST, em vez de GET. Assim como o metodo load(), todas essas 
fungoes sao assfncronas: elas retornam para suas chamadoras antes que qualquer coisa seja carregada 
e notificam sobre os resultados chamando uma fungao callback especificada. 
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19.6.2.1 jQuery.getScript() 

A fimto jQuery .getScriptQ recebe o URL de um arquivo de codigo JavaScript como primeiro 
argumento. Ela carrega esse codigo de forma assincrona e entao o executa no escopo global. Pode 
fiincionar com scripts de mesma origem e de origens diferentes: 

// Carrega dinamicamente um script de algum outro servidor 
jQuery.getScript("http://example.com/js/widget.js"); 

Voce pode passar uma fun to callback como segundo argumento. Se fizer isso, a jQuery vai chamar 
essa funfao uma vez apos o codigo ser carregado e executado. 

// Carrega uma biblioteca e a utiliza quando tiver carregado 
jQuery.getScript("js/jquery.my_plugin.js"j -function() { 

$('div').my_plugin(); // Usa a biblioteca que carregamos 

}); 

jOuery.getScriptQ normalmente usa um objeto XMLHttpRequest para buscar o texto do script a 
ser executado. Mas para requisites entre dominios (quando o script e enviado por um servidor que 
nao aquele que enviou o documento atual), a jQuery carrega o script com um elemento <script> 
(consulte a Se$ao 18.2). Em caso de mesma origem, o primeiro argumento de sua fun to callba¬ 
ck e o texto do script, o segundo argumento e o codigo de status “success” e o terceiro e o objeto 
XMLHttpRequest usado para buscar o texto do script. O valor de retorno de jQuery.getScriptQ 
tambem e o objeto XMLHttpRequest, nesse caso. Para requisites de varias origens, nao ha um 
objeto XMLHttpRequest e o texto do script nao e capturado. Nesse caso, a fun to callback e cha- 
mada com seu primeiro e terceiro argumentos undefined e o valor de retorno de jQuery.getScriptQ 
tambem e undefined. 

A funQo callback passada para jQuery.getScriptQ e chamada somente se a requisite e concluida 
com sucesso. Se for necessario ser notificado de erros e tambem de sucesso, voce precisara da fimto 
de nfvel mais baixo jQuery.ajaxQ. O mesmo vale para as tres outras fun<;6es utilitarias descritas 
nesta seto. 

19.6.2.2 jQuery.getJSONO 

jQuery.getDSONQ e como jQuery.getScriptQ: busca texto e entao o processa de modo especial, 
antes de chamar a callback especificada por voce. Em vez de executar o texto como um script, 
jQuery.getDSONQ o analisa como JSON (usando a fimto jQuery.parseDSONQ: consulte a Set° 
19.7). jQuery.getDSONQ so tern utilidade quando recebe um argumento de callback. Se o URL for 
carregado com sucesso e se seu conteudo for analisado como JSON com sucesso, o objeto resul- 
tante sera passado como primeiro argumento para a fimto callback. Assim como acontece com 
jQuery.getScriptQ, o segundo e o terceiro argumentos da callback sao o codigo de status “success” 
e o objeto XMLHttpRequest: 

// Supoe que data.json contem o texto: '{"x" : 1 , "y":2}' 
jQuery.getDSON("data.json", function(data) { 

// Agora data e o objeto {x:l, y:2} 

}); 

Ao contrario de jQuery.getScriptQ, jQuery.getDSONQ aceita um argumento de dados opcional, 
como aquele passado para o metodo loadQ. Se voce passa dados para jQuery.getDSONQ, eles devem 
ser o segundo argumento e a fimto callback deve ser o terceiro. Se voce nao passa dados, a fimto 
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callback pode ser o segundo argumento. Se os dados sao uma string, ela e anexada no URL, apos ? 
ou &. Se os dados sao um objeto, ele e convertido em uma string (consulte o quadro) e depois ane¬ 
xada no URL. 


Passando dados para utilitarios Ajax da jQuery 

A maioria dos metodos Ajax da jQuery aceita um argumento (ou uma opgao) que especifica dados para 
enviar ao servidor, junto com o URL Normalmente, esses dados assumem a forma de pares nome=valor 
codificados no URL, separados uns dos outros por simbolos de E comercial. (Esse formato de dados e co- 
nhecido como tipo MIME"application/x-www-form-urlencoded". Pode considera-lo analogo ao JSON: um 
formato para converter objetos JavaScript simples em strings e vice-versa.) Para requisites HTTP GET, 
essa string de dados e anexada ao URL. Para requisites POST, ela e enviada como corpo da requisigao, 
apos o envio de todos os cabegalhos HTTP. 


Uma maneira de obter uma string de dados nesse formato e chamar o metodo serialize () de um objeto 
jQuery que contenha formularios ou elementos de formulario. Para enviar um formulario HTML usando o 
metodo load(), por exemplo, voce poderia usar codigo como o seguinte: 


$("#submit_button").click(function(event) { 

$(this.form).load( // Substitui o formulario carregando... 

this.form.action, // seu url 

$(this.form).serialize()); // com os dados do formulario anexados 
event.preventDefault(); // Nao faz o envio de formulario padrao 

this.disabled = "disabled' 1 ; // Impede envios multiplos 

}); 


Se voce configurar o argumento (ou opgao) de dados de uma fungao Ajax da jQuery como um objeto, 
em vez de uma string, normalmente (com uma excegao, descrita a seguir) a jQuery vai converter esse 
objeto em uma string automaticamente, chamando jQuery.param(). Essa fungao utilitaria trata proprie- 
dades de objeto como pares nome=valor e convene o objeto {x:i,y: "hello"}, por exemplo, na string 
"x=i&y=hello". 


Na jQuery 1.4, jQuery. param() manipula objetos JavaScript mais complicados. Se o valor de uma pro- 
priedade de objeto for um array, cada elemento desse array tera seu proprio par nome/ valor na string re- 
sultante e o nome da propriedade tera colchetes anexados. E se o valor de uma propriedade e um objeto, 
os nomes de propriedade desse objeto aninhado sao colocados entre colchetes e anexados no nome de 
propriedade externo. Por exemplo: 

$.param({a:[l,2,B]}) // Retorna "a[]=l&a[]=2&a[]=3" 

$.param({o:{x:l,y:true}}) // Retorna "o[x]=l&o[y]=true" 

$.param({o:{x:{y:[l,2]»» // Retorna "o[x][y][]=l&o[x][y][]=2" 

Para compatibilidade com as versoes 1.3 e anteriores da jQuery, voce pode passar true como segundo 
argumento para jQuery. param() ou configurar a opgao traditional como true. Isso vai impedira seria- 
lizagao avangada de propriedades cujos valores sao arrays ou objetos. 

Ocasionalmente, talvez voce queira passar um objeto Document (ou algum outro objeto que nao deva ser 
convertido automaticamente) como corpo de uma requisigao POST. Nesse caso, pode configurar a opgao 
contentType para especificar o tipo de seus dados e configurar a opgao processData como false, a fim 
de impedir que a jQuery passe seu objeto dado para jQuery. param (). 




Capftulo 19 A biblioteca jQuery 549 


Se o URL ou a string de dados passada para jQuery.getDSONQ content a “=?” no final da string ou 
antes de um E comercial, isso e aceito como especificando uma requisigao JSONP. (Consulte a Segao 
18.2 para uma explicagao sobre JSONP.) A jQuery vai substituir o ponto de interrogagao pelo nome 
de uma fungao callback que ela cria e, entao, jQuery.getDSONQ vai se comportar como se estivesse 
sendo solicitado um script, em vez de um objeto JSON. Isso nao fimciona para arquivos de dados 
JSON estaticos: so funciona com scripts do lado do servidor que suportam JSONP. Entretanto, 
como as requisites JSONP sao tratadas como scripts, isso significa que dados formatados como 
JSON podem ser solicitados entre dominios. 

19.6.2.3 jQuery.get() ejQuery.post() 

jOuery.get() e jQuery. post() buscam o conteudo do URL especificado, passando os dados especi- 
ficados (se houver), e passam o resultado para a callback especificada. jQuery.get() faz isso usando 
uma requisigao HTTP GET e jQuery. post() usa uma requisigao POST, mas fora isso essas duas 
fimgoes utilitarias sao iguais. Esses dois metodos recebem os mesmos tres argumentos que jQuery. 
get ] SON (): o URL solicitado, uma string de dados ou objeto optional e uma fungao callback tecnica- 
mente opcional, mas quase sempre utilizada. A fungao callback e invocada com os dados retornados 
como seu primeiro argumento, a string “success” como segundo e o objeto XMLHttpRequest (se 
houve um) como terceiro: 

// Solicita texto do servidor e o exibe em um dialogo de alerta 

jQuery.get("debug.txt", alert); 

Alem dos tres argumentos descritos anteriormente, esses dois metodos aceitam um quarto argu¬ 
mento opcional (passado como terceiro argumento, caso os dados sejam omitidos) especificando o 
tipo de dados que estao sendo solicitados. Esse quarto argumento afeta o modo como os dados sao 
processados antes de serem passados para sua callback. O metodo load( ) usa o tipo “html”, jQuery. 
getScript() usa o tipo “script” e jQuery.getlSONQ usa o tipo “json”. No entanto, jQuery.get() e 
jQuery.post () sao mais flexiveis do que aqueles utilitarios de proposito especial, e voce pode especifi- 
car qualquer um desses tipos. Os valores validos para esse argumento, assim como o comportamento 
da jQuery quando se omite o argumento, estao explicados no quadro. 


Tipos de dados Ajax da jQuery 

Voce pode passar qualquer um dos seis tipos a seguir como argumento para jQuery.get () ou jQuery. 
post (). Alem disso, conforme vamos ver a seguir, pode passar um desses tipos para jQuery. a j ax () usan¬ 
do a opgao datatype: 

Retorna a resposta do servidor como texto puro, sem processamento. 

"html" 

Esse tipo funciona exatamente como "text": a resposta e texto puro. 0 metodo load() usa esse tipo e 
insere o texto retornado no proprio documento. 
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"xml" 

£ suposto que o URL se refere a dados formatados como XML e a jQuery usa a propriedade 
responseXML do objeto XMLHttpRequest, em vez da propriedade responseText. 0 valor passado 
para a callback e um objeto Document representando o documento XML, em vez de uma string con- 
tendo o texto do documento. 

"script" 

£ suposto que o URL faz referenda a um arquivo JavaScript e o texto retornado e executado como 
um script, antes de ser passado para a callback. jQuery.getScript() usa esse tipo. Quando o tipo e 
"script", a jQuery pode manipular requisites entre domfnios usando um elemento <script>, em vez 
de um objeto XMLHttpRequest. 

"json" 

£ suposto que o URL faz referenda a um arquivo de dados formatados como JSON. 0 valor passado 
para a callback e o objeto obtido pela analise do conteudo do URL feito com jOuery. parseJS0N() 
(Segao 19.7). jOuery .get JSONQ usa esse tipo. Se o tipo e"json"e o URL ou a string de dados content 
"=?”, o tipo e convertido para"jsonp". 

"jsonp" 

£ suposto que o URL se refere a um script no lado do servidor que suporta o protocolo JSONP, para 
passar dados formatados como JSON como argumento para uma fungao especificada pelo cliente. 
(Consulte a Segao 18.2 para mais informagdes sobre JSONP.) Esse tipo passa o objeto analisado para 
a fungao callback. Como as requisigoes JSONP podem ser feitas com elementos <script>, esse tipo 
pode ser usado para fazer requisigoes entre dominios, assim como acontece com o tipo "script". Quan¬ 
do voce usa esse tipo, seu URL ou string de dados normalmente deve incluir um parametro como 
"&jsonp=?" ou "&callback=?". A jQuery vai substituiro pontode interrogagao pelo nomede uma 
fungao callback gerada automaticamente. (Mas consulte as opgoes jsonp e jsonpCallback na Segao 
19.6.3.3 para ver alternativas.) 

Se voce nao especifica um desses tipos ao chamar jOuery.get(), jQuery. post() ou jQuery.ajax(), a 
jQuery examina o cabegalho Content-Type da resposta HTTP. Se esse cabegalho content a string "xml", 
e passado um documento XML para a callback. Caso contrario, se o cabegalho content a string "json", os 
dados sao analisados como JSON e o objeto analisado e passado para a callback. Caso contrario, se o cabe¬ 
galho content a string "javascript", os dados sao executados como um script. Caso contrario, os dados sao 
tratados como texto puro. 


19.6.3 A fungao jQuery.ajax() 

Todos os utilitarios Ajax da jQuery acabam chamando jQuery .a jax() - a fungao mais complicada de 
toda a biblioteca. jQuery. ajax () aceita apenas um argumento: um objeto opgoes cujas propriedades 
especificam muitos detalhes sobre como a requisigao Ajax deve ser feita. Uma chamada para jQuery. 
getScript(url,callback), por exemplo, e equivalente a esta chamada de jQuery.ajax(): 
jQuery.ajax({ 

type: "GET", // 0 metodo da requisigao HTTP. 

url: url, // 0 URL dos dados a buscar. 

data: null, // Nao adiciona quaisquer dados no URL. 
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datatype: "script", // Executa a resposta como um script quando o obtivermos. 

success: callback // Chama esta funcao ao terminar. 

}); 

Voce pode configurar essas cinco opgoes fundamentals com jQuery.get () e jQuery. post (). Contudo, 
jQuery.ajaxQ suporta muitas outras opgoes, caso voce a chame diretamente. As opgoes (incluindo as 
cinco basicas mostradas anteriormente) estao explicadas em detalhes a seguir. 

Antes de nos aprofundarmos nas opgoes, note que voce pode configurar padroes para qualquer uma 
delas, passando um objeto opgoes para jQuery.ajaxSetupQ: 
jQuery.ajaxSetup({ 

timeout: 2000, // Cancela todos as requisites Ajax apos 2 segundos 

cache: false // Desmonta a cache do navegador, adicionando um timestamp no URL 

}); 

Apos a execugao do codigo anterior, as opgoes de timeout e cache especificadas serao usadas por todas 
as requisites Ajax (incluindo as de alto nfvel, como jQuery.get() e o metodo loadQ) que nao espe- 
cifiquem seus proprios valores para essas opgoes. 

Ao ler sobre as muitas opgoes e fun goes callback da jQuery nas segoes a seguir, talvez voce ache util 
se referir aos quadros sobre codigo de status Ajax e as strings de tipos de dados da jQuery, na Segao 
19.6.1 ena Segao 19.6.2.3. 


Ajax na jQuery 1.5 

A jQuery 1.5, que foi langada quando este livro estava indo para a grafica, apresenta um modulo Ajax 
reescrito, com varios novos recursos convenientes. 0 mais importante e que agora jQuery. a jax() e todas 
as fungoes utilitarias Ajax descritas anteriormente retornam um objeto jqXHR. Esse objeto Simula a API 
XMLHttpRequest, mesmo para requisites (como aquelas feitas com $. getScript ()) que nao utilizam um 
objeto XMLHttpRequest. Alem disso, o objeto jqXHR define os metodos success (), errorQ que podem 
ser usados para registrar fungoes callback para serem chamadas quando a requisigao for bem-sucedida ou 
falhar. Assim, em vez de passar uma callback para jQuery .get (), por exemplo, voce poderia em vez disso 
passa-la para o metodo success () do objeto jqXHR retornado por essa fungao utilitaria: 
jQuery.get("data.txt") 

.success(function(data) { console.log("Cot", data); }) 

•success(function(data) { process(data); }); 


19.6.3.1 Optescomuns 

As opgoes de jQuery.ajax()mais usadas sao: 
type 

Especifica o metodo da requisigao HTTP. O padrao e “GET”. “POST” e outro valor normal- 
mente usado. Voce pode especificar outros metodos de requisigao HTTP, como “DELETE” 
e “PUT”, mas nem todos os navegadores os suportam. Note que essa opgao tern nome incor- 
reto: ela nao tern nada a ver com o tipo de dados da requisite ou da resposta, “method” seria 
um nome melhor. 
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O URL a ser buscado. Para requisites GET, a opto data sera anexada a esse URL. A jQuery 
pode adicionar parametros no URL para requisites JSONP e quando a opto cache e false. 


data 

Dados a serem anexados no URL (para requisites GET) ou enviados no corpo da requisite 
(para requisites POST). Pode ser uma string ou um objeto. Os objetos normalmente sao 
convertidos em strings, conforme descrito no quadro da Seto 19.6.2.2, mas veja uma exceto 
na opto processData. 

dataType 

Especifica o tipo de dados esperados na resposta e como esses dados devem ser processados 
pela jQuery. Os valores validos sao “text”, “html”, “script”, “json”, “jsonp” e “xml”. O signi- 
ficado desses valores foi explicado no quadro da Se^ao 19.6.2.3. Esta opto nao tern valor 
padrao. Quando nao especificada, a jQuery examina o cabe^alho Content-Type da resposta para 
determinar o que vai fazer com os dados retornados. 

contentType 

Especifica o cabe^alho HTTP Content-Type da requisite. O padrao e “application/ x-www- 
-form-urlencoded”, que e o valor normal usado pelos formularios HTML e pela maioria dos 
scripts do lado do servidor. Se voce tiver configurado type como “POST” e quer enviar texto 
puro ou um documento XML como corpo da requisite, tambem precisa configurar esta opto. 

timeout 

Um tempo-limite, em milissegundos. Se esta opto estiver configurada e a requisite nao tiver 
terminado dentro do limite de tempo especificado, a requisite sera cancelada e a callback 
error sera chamada com status “timeout”. O tempo-limite padrao e 0, ou seja, as requisites 
continuam ate terminarem e nunca sao canceladas. 

cache 

Para requisites GET, se esta opto estiver configurada como false, a jQuery vai adicionar um 
parametro _= no URL ou vai substituir um parametro existente por esse nome. O valor desse 
parametro e configurado com a hora atual (no formato de milissegundos). Isso anula o uso de 
cache baseada no navegador, pois o URL sera diferente a cada vez que a requisite for feita. 

ifModified 

Quando esta opto e configurada como true, a jQuery registra os valores dos cabe^alhos de 
resposta Last-Modified e If-None-Match de cada URL que solicita e entao configura esses cabe- 
falhos em qualquer requisite subsequente pelo mesmo URL. Isso instrui o servidor a enviar 
uma resposta HTTP 304 “Not Modified”, caso o URL nao tenha mudado desde a ultima vez 
que foi solicitado. Por padrao, esta opto nao e configurada e a jQuery nao configura nem 
registra esses cabe^alhos. 

A jQuery transforma uma resposta HTTP 304 no codigo de status “notmodified”. O status 
“notmodified” nao e considerado um erro e esse valor e passado para a callback success, em 
vez do codigo de status normal “success”. Assim, se voce configurar a opto ifModified, deve 
verificar o codigo de status em sua callback - se o status for “notmodified”, o primeiro argu- 
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memo (os dados da resposta) sera indefinido. Note que nas versoes da jQuery antes da 1.4, o 
codigo HTTP 304 era considerado um erro e o codigo de status “notmodified” era passado 
para a callback error, em vez da callback success. Consulte o quadro na Sepio 19.6.1 para mais 
informafoes sobre codigos de status Ajax da jQuery. 

global 

Esta oppio especifica se a jQuery deve disparar eventos que descrevem o andamento da requi- 
sipio Ajax. O padrao e true; configure esta oppio como false para desabilitar todos os eventos 
relacionados a Ajax. (Consulte a Sepio 19.6.4 para ver detalhes completos sobre eventos.) O 
nome desta oppio confunde: chama-se “global” porque a jQuery normalmente dispara seus 
eventos globalmente e nao em um objeto especffico. 

19.6.3.2 Fun^oes callbacks 

As op<poes a seguir especificam funfoes a serem chamadas em varios estagios durante a requisipio Ajax. 

A oppio success ja e conhecida: e a funpio callback passada para metodos como jQuery.getlSONQ. 

Note que a jQuery tambem envia notificapio sobre o andamento de uma requisipio Ajax como 

eventos (a nao ser que voce tenha configurado a oppio global como false). 

context 

Esta op?ao especifica o objeto a ser usado como contexto - o valor de this - para chamadas 
das varias fun pies callback. Esta oppio nao tern valor default e, se for deixada sem configura- 
pio, as funijoes callback sao chamadas no objeto op^oes que as contem. Configurar a oppio 
context tambem afeta o modo como os eventos Ajax sao disparados (consulte a Sepio 19.6.4). 
Se ela for configurada, o valor deve ser um objeto Window, Document ou Element no qual 
eventos possam ser disparados. 

beforeSend 

Esta oppio especifica uma funpio callback que sera chamada antes que a requisipio Ajax seja 
enviada para o servidor. O primeiro argumento e o objeto XMLHttpRequest e o segundo 
e o objeto opples da requisipio. A callback beforeSend da aos programas a oportunidade de 
configurar cabepilhos HTTP personalizados no objeto XMLHttpRequest. Se essa funQo callback 
retornar false, a requisiQo Ajax sera cancelada. Note que as requisites “script” e “jsonp” 
entre dominios nao usam um objeto XMLHttpRequest e nao disparam a callback beforeSend. 


Esta op?ao especifica a funpio callback a ser chamada quando uma requisiQo Ajax for con- 
cluida com sucesso. O primeiro argumento sao os dados enviados pelo servidor. O segundo 
argumento e o codigo de status jQuery e o terceiro e o objeto XMLHttpRequest usado para 
fazer a requisipio. Conforme explicado na Sepio 19.6.2.3, o tipo do primeiro argumento 
depende da oppio dataType ou do cabepilho Content-Type da resposta do servidor. Se o tipo e 
“xml”, o primeiro argumento e um objeto Document. Se o tipo e “json” ou “jsonp”, o primei¬ 
ro argumento e o objeto resultante da analise da resposta formatada como JSON feita pelo 
servidor. Se o tipo foi “script”, a resposta e o texto do script carregado (contudo, esse script 
ja tera sido executado; portanto, a resposta normalmente pode ser ignorada nesse caso). Para 
outros tipos, a resposta e simplesmente o texto do recurso solicitado. 
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O codigo de status do segundo argumento normalmente e a string “success”, mas se voce 
tiver configurado a opto ifModified, esse argumento podera ser “notmodified”. Nesse caso, 
o servidor nao envia uma resposta e o primeiro argumento e indefinido. As requisites entre 
domfnios de tipo “script” e “jsonp” sao feitas com um elemento <script>, em vez de XMLHt- 
tpRequest; portanto, para esses pedidos, o terceiro argumento sera indefinido. 

error 

Esta opto especifica a firnto callback a ser chamada se a requisite Ajax nao for bem-suce- 
dida. O primeiro argumento dessa callback e o objeto XMLHttpRequest da requisite (se ele 
usou um). O segundo argumento e o codigo de status jQuery. Pode ser “error” para um erro 
de HTTP, “timeout” para um tempo-limite e “parsererror” para um erro ocorrido durante 
a analise da resposta do servidor. Se um documento XML ou objeto JSON nao estiver bem 
formado, por exemplo, o codigo de status sera “parsererror”. Nesse caso, o terceiro argumento 
da callback error sera o objeto Error lanqado. Note que as requisites com dataType “script” 
que retornam codigo JavaScript invalido nao causam erros. Qualquer erro no script e ignorado 
silenciosamente e e chamada a callback success, em vez da callback error. 

complete 

Esta opto especifica uma fun to callback a ser chamada quando a requisite Ajax estiver 
concluida. Todo pedido Ajax ou e bem-sucedido e chama a callback success ou falha e chama 
a firnto callback error. A jQuery chama a callback complete depois de chamar success ou 
error. O primeiro argumento da callback complete e o objeto XMLHttpRequest e o segundo 
e o codigo de status. 

19.6.3.3 Op^oes incomuns e ganchos 

As opfoes Ajax a seguir nao sao muito usadas. Algumas especificam opfoes que voce provavelmente 

nao vai configurar e outras fornecem ganchos de personalizato para aqueles que precisam modificar 

o tratamento padrao da jQuery para requisites Ajax. 

async 

Os scripts de requisites HTTP sao assincronos por sua propria natureza. Contudo, o objeto 
XMLHttpRequest oferece a opto de bloquear ate que a resposta seja recebida. Configure 
essa opto como false se quiser que a jQuery bloqueie. Configurar essa opto nao altera o 
valor de retorno de jQuery.ajax(): a firnto sempre retorna o objeto XMLHttpRequest, caso 
tenha utilizado um. Para requisites sfneronas, voce pode extrair a resposta do servidor e o co¬ 
digo de status HTTP do objeto XMLHttpRequest ou pode especificar uma callback complete 
(como faria para uma requisite assincrona), caso queira a resposta analisada e o codigo de 
status da jQuery. 

dataFilter 

Esta opto especifica uma firnto para filtrar ou pre-processar os dados retornados pelo servi¬ 
dor. O primeiro argumento serao os dados brutos do servidor (ou como uma string ou como 
um objeto Document para requisites XML) e o segundo sera o valor da opto dataType. Se 
essa firnto for especificada, deve retornar um valor, e esse valor sera usado no lugar da res¬ 
posta do servidor. Note que a firnto dataFilter e chamada antes da analise de JSON ou da 
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execute do script. Note tambem que dataFilter nao e chamada para requisites “script” e 
“jsonp” de varias origens. 

jsonp 

Quando a opto dataType e configurada como “jsonp”, a opto url ou data normalmente in- 
clui um parametro como “jsonp=?”. Se a jQuery nao encontra esse parametro no URL ou nos 
dados, ela insere um, usando esta opto como nome do parametro. O valor padrao desta op¬ 
to e “callback”. Configure essa opto se estiver usando JSONP com um servidor que espera 
um nome de parametro diferente e ainda nao tiver codificado esse parametro em seu URL ou 
em seus dados. Consulte a SeQo 18.2 para mais informates sobre JSONP. 

jsonpCallback 

Para requisites com dataType “jsonp” (ou tipo “json”, quando o URL inclui um parametro 
JSONP como “jsonp=?”), a jQuery deve alterar o URL para substituir o ponto de interrogate 
pelo nome da funto empacotadora para a qual o servidor vai passar seus dados. Normalmente, 
a jQuery sintetiza um nome de fimto exclusivo com base na hora atual. Configure essa opto 
se quiser substituir a fimto da jQuery pela sua propria. Contudo, se voce fizer isso, vai impedir 
que a jQuery chame as funfoes de retorno success e complete e que dispare seus eventos normais. 

processData 

Quando voce configura a opto data como um objeto (ou passa um objeto como segun- 
do argumento para jQuery.get () e metodos relacionados), normalmente a jQuery converte 
esse objeto em uma string no formato padrao HTML “application/x-www-form-urlencoded” 
(consulte o quadro na Seto 19.6.2.2). Se quiser evitar essa etapa (como quando voce quer 
passar um objeto Document como corpo de uma requisite POST), configure essa opto 
como false. 

scriptCharset 

Para requisites “script” e “jsonp” de varias origens que usam um elemento <script>, esta 
opto especifica o valor do atributo charset desse elemento. Ela nao tern efeito algum para 
requisites baseadas em XMLHttpRequest normais. 

traditional 

A jQuery 1.4 alterou ligeiramente o modo como os objetos dados eram serializados em strin¬ 
gs “application/ x-www-form-urlencoded” (consulte o quadro na Se^ao 19.6.2.2 para ver os 
detalhes). Configure esta opto como true caso precise que a jQuery reverta para seu antigo 
comportamento. 

username, password 

Se uma requisite exige autenticato baseada em senha, especifique o nome de usuario e a 
senha usando essas duas optes. 


Esta opto especifica uma funto fabrica para obter um XMLHttpRequest. Ela e chamada 
sem argumentos e deve retornar um objeto que implemente a API XMLHttpRequest. Este 
gancho de nivel muito baixo permite a voce criar seu proprio wrapper em torno de XMLHtt¬ 
pRequest, adicionando recursos ou instrumentato em seus metodos. 
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19.6.4 EventosAjax 

A Se^ao 19.6.3.2 explicou que jQuery.ajaxQ tem quatro op^oes de funijao callback: beforeSend, 
success, error e complete. Alem de chamar essas fun (joes callback especificadas individualmente, as 
fun<joes Ajax da jQuery tambem disparam eventos personalizados em cada um dos mesmos estagios 
em uma requisite Ajax. A tabela a seguir mostra as opijoes de callback e os eventos correspondentes: 


Callback 

Tipo de evento 

Metodo de registro de rotina de tratamento 

beforeSend 

"ajaxSend” 

ajaxSendQ 

success 

“ajaxSuccess” 

ajaxSuccessQ 

error 

“ajaxError” 

ajaxErrorQ 

complete 

“ajaxComplete” 

ajaxCompleteQ 


“ajaxStart” 

ajaxStartQ 


“ajaxStop” 

ajaxStopQ 


Voce pode registrar rotinas de tratamento para esses eventos Ajax personalizados usando o meto- 
do bind () (Seijao 19.4.4) e a string de tipo de evento mostrada na segunda coluna ou usando os 
metodos de registro de evento mostrados na terceira coluna. ajaxSuccessQ e os outros metodos 
funcionam exatamente como clickQ, mouseoverQ e outros metodos de registro de evento simples 
da Se<jao 19.4.1. 

Como os eventos Ajax sao eventos personalizados, gerados pela jQuery e nao pelo navegador, o 
objeto Event passado para a rotina de tratamento nao contem muitos detalhes uteis. Entretanto, 
os eventos ajaxSend, ajaxSuccess, ajaxError e ajaxComplete sao todos disparados com argumentos 
adicionais. As rotinas de tratamento para esses eventos serao todas invocadas com do is argumentos 
extras apos o evento. O primeiro argumento extra e o objeto XMLHttpRequest e o segundo e o ob¬ 
jeto op<joes. Isso significa, por exemplo, que uma rotina de tratamento para o evento ajaxSend pode 
adicionar cabeijalhos personalizados em um objeto XMLHttpRequest, exatamente como acontece 
com a callback beforeSend. O evento ajaxError e disparado com um terceiro argumento extra, alem 
dos dois que acabamos de descrever. Esse ultimo argumento da rotina de tratamento e o objeto Error 
(se houver) que foi lantjado quando o erro ocorreu. Surpreendentemente, esses eventos Ajax nao 
recebem codigo de status da jQuery. Se a rotina de tratamento para um evento ajaxSuccess precisar 
distinguir “success” de “notmodified”, por exemplo, vai ter de examinar o codigo de status HTTP 
bruto no objeto XMLHttpRequest. 

Os dois ultimos eventos listados na tabela anterior sao diferentes dos outros, mais obviamente por- 
que nao tem funijoes callback correspondentes, e tambem porque sao disparados sem argumentos 
extras. ajaxStart e ajaxStop sao dois eventos que indicam o inicio e o fim de atividade de rede relacio- 
nada a Ajax. Quando a jQuery nao esta fazendo requisites Ajax e uma nova requisitjao e iniciada, 
ela dispara um evento ajaxStart. Se outras requisites comeijam antes que essa primeira termine, 
essas novas requisites nao causam um novo evento ajaxStart. O evento ajaxStop e disparado quan¬ 
do a ultima requisite Ajax pendente e concluida e a jQuery nao esta mais executando qualquer 
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atividade de rede. Esse par de eventos pode ser util para mostrar e ocultar algum tipo de animapio 
“Carregando...”. ou l'cone de atividade de rede. Por exemplo: 

$("#loading_animation").bind({ 

ajaxStart: functionQ { $(this).showQ; }, 
ajaxStop: functionQ { $(this).hide(); } 

}); 

Essas retinas de tratamento de evento ajaxStart e ajaxStop podem ser vinculadas a qualquer elemen- 
to do documento: a jQuery as dispara globalmente (Sepio 19.4.6) e nao em um elemento especffico. 
Os outros quatro eventos Ajax, ajaxSend, ajaxSuccess, ajaxError e ajaxComplete, em geral tambem 
sao disparados globalmente, de modo que voce pode vincular retinas de tratamento a qualquer ele¬ 
mento. Contudo, se voce configurer a op^ao context em suachamadade jQuery.ajax(), esses quatro 
eventos vao ser disparados no elemento contexto e nao globalmente. 

Por fim, lembre-se de que e possfvel impedir que a jQuery dispare qualquer evento relacionado a 
Ajax, configurando a oppio global como false. Apesar de seu nome confuso, configurar global 
como false impede que a jQuery dispare eventos em um objeto context e tambem que dispare 
eventos globalmente. 

19.7 Fun0es utilitarias 

A biblioteca jQuery define varias fun pies utilitarias (assim como duas propriedades) que talvez voce 
ache uteis em seus programas. Conforme vamos ver na lista a seguir, varias dessas funptes agora tern 
equivalentes em ECMAScript 5 (ES5). As fun pies da jQuery sao anteriores a ES5 e funcionam em 
redos os navegadores. Em ordem alfabetica, as funptes utilitarias sao: 
jQuery.browser 

A propriedade browser nao e uma funpio, mas um objeto que voce pode usar para farejar clientes 
(Sepio 13.4.5). Esse objeto tera a propriedade msie configurada como true se o navegador for o IE. 
A propriedade mozilla sera true se o navegador for o Firefox ou outre relacionado. A propriedade 
webkit sera true para Safari e Chrome, e a propriedade opera sera true para o Opera. Alem dessa pro¬ 
priedade especifica do navegador, a propriedade version content o numero da versao do navegador. 
E melhor evitar farejar clientes quando possfvel, mas voce pode usar essa propriedade para contornar 
erros especfficos de navegador com codigo como o seguinte: 

if ($.browser.mozilla && parselnt($.browser.version) < 4) { 

// Contorna um hipotetico erro do Firefox aqui... 

} 

jQuery.contains() 

Esta funpio espera dois elementos do documento como seus argumentos. Ela retorna true se o 
primeiro elemento content o segundo e, caso contrario, retorna false. 

jQuery.each() 

Ao contrario do metodo eachQ, que itera somente em objetos jQuery, a funpio utilitaria 
jQuery. each() itera pelos elementos de um array ou pelas propriedades de um objeto. O pri¬ 
meiro argumento e o array ou objeto a ser iterado. 
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O segundo argumento e a fun 910 a ser chamada para cada elemento do array ou propriedade 
do objeto. Essa fun910 sera chamada com dois argumentos: o indice ou nome do elemento do 
array ou propriedade do objeto, e o valor do elemento do array ou propriedade do objeto. O 
valor de this para a fun^ao e igual ao segundo argumento. Se a fun 910 retorna false, jQuery. 
each() retorna imediatamente, sem concluir a iteraqao. jQuery.each () sempre retorna seu pri- 
meiro argumento. 

jOuery.each() enumera propriedades de objeto com um la<jo for/in normal, de modo que to- 
das as propriedades enumeraveis sao iteradas, mesmo as propriedades herdadas. jOuery.each() 
enumera elementos de array em ordem numerica pelo indice e nao pula as propriedades inde- 
finidas de arrays esparsos. 

jOuery.extend() 

Esta fun^ao espera objetos como seus argumentos. Ela copia as propriedades do segundo 
objeto e dos objetos subsequentes no primeiro objeto, sobrepondo todas as propriedades de 
mesmo nome no primeiro argumento. Esta fun^ao pula qualquer propriedade cujo valor seja 
undefined ou null. Se e passado apenas um objeto, as propriedades desse objeto sao copia- 
das no proprio objeto jOuery. O valor de retorno e o objeto no qual as propriedades foram 
copiadas. Se o primeiro argumento e o valor true, e feita uma copia profunda ou recursiva: 
o segundo argumento e estendido com as propriedades do terceiro objeto (e de todos os 
subsequentes). 

Esta fun910 e util para clonar objetos e para mesclar objetos op^oes com conjuntos de padroes: 
var clone = jOuery.extend({}, original); 

var options = jOuery.extend({}, default_options, user_options); 
jOuery.globalEval() 

Esta funqao executa uma string de codigo JavaScript no contexto global, como se fosse o con- 
teudo de um elemento <script>. (Na verdade, a jQuery implementa essa fun 910 criando um 
elemento <script> e inserindo-o temporariamente no documento.) 

jQuery.grep() 

Esta funfao e como o metodo ES 5 filterQ do objeto Array. Ela espera um array como pri¬ 
meiro argumento, uma funqao predicado como segundo e chama o predicado uma vez para 
cada elemento do array, passando o valor e o indice do elemento. jQuery.grep() retorna um 
novo array contendo apenas os elementos do array de argumentos para os quais o predicado 
retornou true (ou outro valor verdadeiro). Se voce passa true como terceiro argumento para 
jQuery.grep(), ela inverte o sentido do predicado e retorna um array de elementos para os 
quais o predicado retornou false ou outro valor falso. 

jQuery.inArray() 

Esta fun910 e como o metodo ES 5 indexOf () do objeto Array. Ela espera um valor arbitrario 
como primeiro argumento, um array (ou objeto semelhante a um array) como segundo e 
retorna o primeiro indice do array em que o valor aparece ou -1, caso o array nao contenha 
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jQuery.isArray() 

Retorna true se o argumento e um objeto Array nativo. 
jQuery.isEmptyObject 

Retorna true se o argumento nao tem propriedades enumeraveis. 
jQuery.isFunction() 

Retorna true se o argumento e um objeto Function nativo. Note que, no IE8 e anteriores, meto- 
dos de navegador como Window.alert () e Element.attachEvent() nao sao funples nesse sentido. 

jQuery.isPlainObject() 

Retorna true se o argumento e um objeto “puro”, em vez de uma instancia de algum tipo mais 
especializado ou classe de objetos. 

jQuery.makeArray() 

Se o argumento e um objeto semelhante a um array, esta funpio copia os elementos desse objeto 
em um novo array (verdadeiro) e retorna esse array. Se o argumento nao e semelhante a um array, 
esta funpio simplesmente retorna um novo array com o argumento como seu unico elemento. 

jQuery.map() 

Esta funpio e como o metodo ES5 map( ) do objeto Array. Ela espera um array ou objeto se¬ 
melhante a um array como primeiro argumento e uma fun910 como segundo. Ela passa cada 
elemento do array, junto com o fndice desse elemento, para a funpio e retorna um novo array 
que reune os valores retornado pela funpao. jQuery.map() difere do metodo ES5 map() de duas 
maneiras. Se sua funpao de mapeamento retornar null, esse valor nao sera inclufdo no array 
resultante. E se sua funpao de mapeamento retornar um array, os elementos desse array serao 
adicionados no resultado, em vez do array em si. 

jQuery.merge() 

Esta funpao espera dois arrays ou objetos semelhantes a um array. Ela anexa os elementos do 
segundo no primeiro e retorna o primeiro. O primeiro array e modificado, o segundo, nao. 
Note que essa funpio pode ser usada para clonar um array de forma rasa, como segue: 
var clone = jOuery.merge([], original); 

jQuery.parse3SON() 

Esta funpio analisa uma string formatada como JSON e retorna o valor resultante. Ela lanpi 
uma excepao quando recebe entrada malformada. A jQuery usa a funpao padrao DSON.par- 
se() nos navegadores que a definem. Note que a jQuery define apenas uma funpao de analise 
JSON e nao uma funpio de serial izapao JSON. 

jQuery.proxy() 

Esta funpao e parecida com o metodo ES5 bind() (Sepao 8.7.4) do objeto Function. Ela recebe 
uma funpao como primeiro argumento, um objeto como segundo e retorna uma nova funpao 
que chama a funpio como metodo do objeto. Ela nao faz aplicapao parcial de argumentos, 
como acontece com o metodo bind(). 
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jQuery.proxy () tambem pode ser chamada com um objeto como seu primeiro argumento 
e um nome de propriedade como segundo. O valor da propriedade nomeada deve ser uma 
funfao. Chamada dessa maneira, a funQo jQuery.proxy(o, n) retorna o mesmo que jQuery. 
proxy(o[n],o). 

jOuery.proxy () se destina a ser usada com o mecanismo de vinculo de rotina de tratamento 
de evento da jQuery. Se voce vincular uma funQo que se tornou proxy, pode desvincula-la 
usando a fun^ao original. 

jQuery.support 

Esta e uma propriedade parecida com jQuery. browser, mas destinada a teste de recurso porta- 
vel (Se^ao 13.4.3), em vez de teste de navegador mais sensivel. O valor de jQuery. support e um 
objeto cujas propriedades sao todas valores booleanos que especificam a presen^a ou ausencia 
de recursos do navegador. A maior parte dessas propriedades de jQuery.support sao detalhes 
de baixo nivel utilizados internamente pela jQuery. Elas podem ter interesse para escritores de 
plug-ins, mas de modo geral nao sao liteis para escritores de aplicativos. Uma exce^ao e jQuery. 
support.boxModel: essa propriedade e true se o navegador usa o modelo CSS padrao “context- 
-box” e e false no IE6 e no IE7 no modo Quirks (consulte a SeQo 16.2.3.1). 

jQuery.trim() 

Esta funpio e como o metodo trim() acrescido de strings em ES5. Ela espera uma string como 
seu unico argumento e retorna uma copia dessa string com espa^os em branco a direita e a 
esquerda removidos. 

19.8 Seletores jQuery e metodos de sele^ao 

Ao longo deste capitulo, estivemos usando a funpio de selepio da jQuery, $(), com seletores CSS 
simples. Agora e hora de estudarmos a gramatica de seletor da jQuery em profundidade, junto com 
varios metodos para refinar e aumentar o conjunto de elementos selecionados. 

19.8.1 Seletores jQuery 

A jQuery suporta um subconjunto bastante completo da gramatica de seletor definida pela versao 
preliminar do padrao CSS3 Selectors, com a inclusao de algumas pseudoclasses nao padronizadas, 
mas muito liteis. Os seletores CSS basicos foram descritos na Sepio 15.2.5. Repetimos esse material 
aqui e tambem acrescentamos explicates sobre os seletores mais avanpidos. Lembre-se de que esta 
sepio documenta seletores da jQuery. Muitos desses seletores (mas nao todos) tambem podem ser 
usados em folhas de estilos CSS. 

A gramatica de seletor tern tres camadas. Sem duvida, voce ja viu o tipo de seletores mais simples. 
“#test” seleciona um elemento com atributo id “test”, “blockquote” seleciona todos os elementos 
<blockquote> do documento e “div.note” seleciona todos os elementos <div> com atributo class 
“note”. Seletores simples podem ser agrupados em “combina$oes de seletor”, como “div.note>p” e 
“blockquote i”, separando-os com um caractere de combina?ao. E seletores simples e combina^oes 
de seletores podem ser agrupados em listas separadas com virgulas. Esses grupos de seletores sao o 
tipo mais geral de seletor que passamos para $ (). Antes de explicarmos as combina^oes de seletores e 
os grupos de seletores, precisamos explicar a sintaxe dos seletores simples. 
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19.8.1.1 Seletores simples 

Um seletor simples comeqra (explfcita ou implicitamente) com uma especiftcaqao de tipo de tag. Se 
voce estivesse interessado apenas em elementos <p>, por exemplo, seu seletor simples come^aria com 
“p”. Se quiser selecionar elementos sem considerar seus nomes de tag, use o curinga Se um sele¬ 
tor nao comefa com um nome de tag ou com um curinga, o curinga flea implfcito. 

O nome de tag ou curinga especifica um conjunto inicial de elementos do documento que sao 
candidatos a seleQo. A parte do seletor simples que vem apos essa especificaQo de tipo consiste em 
zero ou mais filtros. Os filtros sao aplicados da esquerda para a direita, na ordem em que aparecem, 
e cada um reduz o conjunto de elementos selecionados. ATabela 19-1 lista os filtros suportados 
pela jQuery. 


Tabela 19-1 Filtros seletores da jQuery 

Filtro Significado 


#identificacao 


[atr] 

[atr=val] 

[atr\=val] 

[atr A =va.Z] 

[atr$=val] 

[atr*=va.Z] 

[atr~=va.Z] 


[atr|=va.Z] 

animated 
:button 

:checkbox 

:checked 

:contains(texto) 


rdisabled 


Corresponde ao elemento com atributo id identificacao. Os documentos HTML validos nunca 
tem mais de um elemento com a mesma identificacao, de modo que esse filtro normalmente e usado 
como seletor independente. 

Corresponde aos elementos cujo atributo class (quando interpretado como uma lista de palavras 
separadas por espa^os) indui a palavra classe. 

Corresponde aos elementos que tern um atributo atr (independente de seu valor). 

Corresponde aos elementos que tern um atributo atr cujo valor e val. 

Corresponde aos elementos que nao tern atributo atr ou cujo atributo atr nao e igual a val 
(extensao da jQuery). 

Corresponde aos elementos cujo atributo atr tem um valor que corner com val. 

Corresponde aos elementos cujo atributo atr tem um valor que termina com val. 

Corresponde aos elementos cujo atributo atr tem um valor que content val. 

Corresponde aos elementos cujo atributo atr, quando interpretado como uma lista de 
palavras separadas por espaqts, indui a palavra val. Assim, o seletor "div.note" e o mesmo que 
"div[dass~=notej". 

Corresponde aos elementos cujo atributo atr tem um valor que corner com val e opcionalmente 
e seguido por um hifen e qualquer outro caractere. 

Corresponde aos elementos que estao correntemente sendo animados pela jQuery. 

Corresponde a elementos ebutton type=" button "> exinput type="button"> 
(extensao da jQuery). 

Corresponde a elementos <input type="checkbox"> (extensao da jQuery). Esse filtro e mais 
eficiente quando explicitamente prefixado com a tag input:"input:checkbox". 

Corresponde aos elementos de entrada que estao marcados. 

Corresponde aos elementos que content otexto especificado (extensao da jQuery). Os parenteses 
desse filtro delimitam o texto - nao sao exigidas aspas. 0 texto dos elementos que estao sendo filtrados 
e determinado com suas propriedades textContent ou innerText - esse e otexto bruto do 
documento, com tags e comentarios retirados. 

Corresponde aos elementos desabilitados. 


(Continual 







562 Parte II JavaScript do lado do cliente 


Tabela19-1 Filtros seletores dajQuery (Continuatfo) 


Filtro 

Significado 

: empty 

^enabled 

Corresponde aos elementos que nao tem filhos, induindo conteudo sem texto. 

Corresponde aos elementos que nao estao desabilitados. 

=eq(n) 

Corresponde apenas ao n-esimo elemento da lista de coincidendas indexada em zero, na ordem do 
documento (extensao da jQuery). 

Corresponde aos elementos com Indices pares na lista. Como o primeiro elemento tem Indice 0, isso na 
verdade corresponde ao primeiro, terceiro e quinto (etc.) elementos (extensao da jQuery). 

:file 

Correspondeaelementoscinput type="file"> (extensaodajQuery). 

:first 

Corresponde apenas ao primeiro elemento da lista. 0 mesmo que : eq (o) (extensao da jQuery). 

:first-child 

Corresponde apenas aos elementos que sao o primeiro filho de seus pais. Note que isso e 
completamente diferente de : first. 

; gt(«) 

Corresponde aos elementos na lista de coincidentes, na ordem do documento, cujo indice baseado em 
zero e maior do que n (extensao da jQuery). 

:has(sel) 

Corresponde aos elementos que tem urn descendente coincidente com o seletor aninhado sel. 

Corresponde a qualquer elemento de cabeplho: <hi>, <h2>, <h3>, <h4>, <h5> ou <h6> 

(extensao dajQuery). 

:hidden 

Corresponde a qualquer elemento que nao esteja visivel na tela: em termos gerais, aqueles elementos 
cujosvalores de offsetWidth eoffsetHeight saoO. 

:1 ' lge 

Corresponde aos elementos < input type=” image" >. Note que isso nao corresponde a 
elementos <img> (extensao dajQuery). 

:input 

Corresponde a elementos de entrada do usuario: <input>, <textarea>, <select> e 
<button> (extensao da jQuery). 

:last 

Corresponde ao ultimo elemento na lista de coincidendas (extensao dajQuery). 

:last-child 

Corresponde a qualquer elemento que seja o ultimo filho de seu pai. Note que isso nao e o mesmo que 
:last. 

: lt(n) 

Corresponde a todos os elementos na lista de coincidentes, na ordem do documento, cujo Indice 
baseado em zero e menor do que n (extensao da jQuery). 

:not(sel) 

:nth(n) 

:nth-child(n) 

Corresponde aos elementos que nao corresponderam ao seletor aninhado sel. 

Sinonimode :eq(n) (extensaodajQuery). 

Corresponde aos elementos que sao o n-esimo filho de seus pais, n pode ser urn niimero, a palavra 
"even” a palavra "odd" ou uma formula. Use:nth-child(even)para selecionar elementos 
que sao o segundo e o quarto (etc.) na lista de filhos de seus pais. Use : nth - child (odd) para 
selecionar elementos que sao o primeiro, terceiro, etc. 

De forma mais geral, n pode ser uma formula da forma xn ou xn+y, onde x ey sao inteiros e n e a 
letra n literal. Assim, nth - child (3n+i) seleciona o primeiro, quarto e setimo (etc.) elementos. 

Note que esse filtro usa indices baseados em urn, de modo que urn elemento que e o primeiro filho 
de seu pai e considerado impar e e correspondido por 3n+i e nao 3n. Compare isso com os filtros 
: even e : odd, que filtram de acordo com a posigao baseada em zero de urn elemento na lista de 
correspondencias. 

:odd 

Corresponde aos elementos com indices impares (baseados em zero) na lista. Note que os elementos 1 e 

3 sao o segundo e quarto elementos coincidentes, respectivamente (extensao da jQuery). 


(Continual 
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Tabela 19-1 Filtros seletores da jQuery (Continua$ao) 


:only-child 

Corresponde aos elementos que sao filhos unicos de seus pais. 

:parent 

Corresponde aos elementos que sao pais. Isso e o oposto de : empty (extensao da jQuery). 

:password 

Corresponde aos elementos <input type="password"> (extensao da jQuery). 

:radio 

Corresponde aos elementos <input type="radio"> (extensao da jQuery). 

:reset 

Corresponde aos elementos < input type="reset "> e < button type="reset" > 

(extensao da jQuery). 

selected 

Corresponde aos elementos <option> que estao selecionados. Use : checked para caixasde 
seleqio e botoes de opgao (extensao da jQuery). 

:submit 

Correspondeaoselementoscinput type="submit">ecbutton type="submit"> 
(extensao da jQuery). 

:text 

Corresponde aos elementos <input type="text"> (extensao da jQuery). 

rvisible 

Corresponde a todos os elementos atualmente visiveis: em termos gerais, aqueles que tern valores de 
of f setWidth e of f setHeight diferentes de zero. Isso e o oposto de : hidden. 


Observe que alguns dos filtros listados na Tabela 19-1 aceitam argumentos dentro de parenteses. O 
seletor a seguir, por exemplo, seleciona os paragrafos que sao o primeiro ou cada terceiro filho subse- 
quente de seus pais, desde que contenham a palavra “JavaScript” e nao contenham um elemento <a>. 
p :nth -child(3n+l): text (JavaScript): not (:has(a)) 

Normalmente, os filtros funcionam mais eficientemente se prefixados com um tipo de tag. Em 
vez de simplesmente usar “:radio” para selecionar botoes de op$ao, por exemplo, e melhor usar 
“input:radio”. A excerjao sao os filtros de identificafao, que sao mais eficientes quando atuam sozi- 
nhos. O seletor “#address” normalmente e mais eficiente do que o mais explicito “form#address”, 
por exemplo. 

19.8.1.2 Combina^oesde seletor 

Seletores simples podem ser combinados com operadores especiais ou “combinadores” para repre- 
sentar relates entre elementos na arvore de documentos. A Tabela 19-2 lista as combina^oes de 
seletor suportadas pela jQuery. Sao as mesmas combina?6es de seletor suportadas pela CSS3. 

Tabela 19-2 Combinagoes de seletor da jQuery 

Combina^ao Significado 

A B Seleciona elementos do documento que correspondem ao seletor B e sao descendentes de elementos que correspondent 

ao seletor A. Note que o caractere combinador para essa combina^ao e simplesmente um espa;o em branco. 

A > B Seleciona elementos do documento que correspondem ao seletor Be que sao filhos diretos de elementos que 

correspondem ao seletor A. 

A + B Seleciona elementos do documento que correspondem ao seletor B e vem imediatamente apos (ignorando nos de texto 

e comentarios) os elementos que correspondem ao seletor A. 

A - B Seleciona elementos do documento correspondentes a B e que sao elementos irmaos que vem apos os elementos 

correspondentes a A. 
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Aqui estao alguns exemplos de combina^oes de seletor: 

"blockquote i" // Corresponde a um elemento <i> dentro de um <blockquote> 

”ol > li" // Um elemento <li> como filho direto de um <ol> 

"#output + *" // 0 irmao apos o elemento com id="output" 

"div.note > hi + p" // Um <p> apos um <hl> dentro de um <div class="note"> 


Note que as combina^oes de seletor nao estao limitadas a do is deles: tres ou mais seletores tambem 
sao permitidos. As combina^oes de seletor sao processadas da esquerda para a direita. 


19.8.1.3 Grupos de seletores 

Um grupo de seletores, que e o tipo de seletor que passamos para $() (ou usamos em uma folha de 
estilo), e simplesmente uma lista de um ou mais seletores simples ou combina^oes de seletor sepa- 
radas com vfrgulas. Um grupo de seletores corresponde a todos os elementos que coincidem com 
qualquer uma das combina^oes de seletor do grupo. Para nossos propositos aqui, mesmo um seletor 
simples pode ser considerado uma combina?ao de seletores. Aqui estao alguns exemplos de grupos 
de seletores: 


"hi, h2, h 3 " 

"#pi, #p2, #p 3 " 
"div.note, p.note" 
"body>pjdiv.note>p" 


// 


Corresponde a 
Corresponde a 
Corresponde a 
<p> filhos de 


elementos <hi>, <h 2 > e <h 3 > 
elementos com identificaqao pi, p2 e p3 
elementos <div> e <p> com class="note" 
<body> e <div class="note"> 


Note que a sintaxe de seletor da CSS e da j Query usa parenteses para alguns dos filtros nos seletores 
simples, mas nao permite o uso mais geral de parenteses para agrupamento. Voce nao pode colocar 
um grupo de seletores ou combinaQo de seletores entre parenteses e tratar isso como um seletor 
simples, por exemplo: 

(hi, h2, h 3 )+p // Invalido 

hl+p, h2+p, h 3 +p // Escreva isto, em seu lugar 


19.8.2 Metodos de sele^ao 

Alem da gramatica de seletor suportada por $ (), a jQuery define varios metodos de seleqao. A maioria 
dos metodos jQuery que vimos ate aqui neste capitulo executa alguma a^ao nos elementos selecio- 
nados. Os metodos de seleQo sao diferentes: eles alteram o conjunto de elementos selecionados por 
refinando-os, aumentando-os ou apenas usando-os como ponto de partida para uma nova seleQo. 

Esta seQo descreve esses metodos de seleQo. Voce vai notar que muitos deles oferecem a mesma 
fiincionalidade da propria gramatica de seletor. 

O modo mais simples de refinar uma seleQo e pela posiQo dentro da seleQo. first () retorna um 
objeto jQuery contendo apenas o primeiro elemento selecionado e last() retorna um objeto jQuery 
contendo apenas o ultimo elemento. Geralmente, o metodo eq() retorna um objeto jQuery con¬ 
tendo o unico elemento selecionado no indice especificado. (Na jQuery 1.4 sao permitidos indices 
negativos e eles contam a partir do fim da seleQo.) Note que esses metodos retornam um objeto 
jQuery com um unico elemento. Isso e diferente da indexafao de array normal, que retorna um 
unico elemento sem qualquer objeto jQuery empacotado: 
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var paras = $("p"); 
paras.first() 
paras.last() 
paras.eq(l) 
paras.eq(-2) 
paras[l] 


// Seleciona apenas o primeiro elemento <p> 
// Seleciona apenas o ultimo <p> 

// Seleciona o segundo <p> 

// Seleciona o penultimo <p> 

// 0 segundo elemento <p> 


O metodo geral para refinar uma sele^ao pela posi^ao e slice(). O metodo slice () da jQuery 
funciona como o metodo Array.sliceQ: ele aceita um indice inicial e um final (com os indices ne¬ 
gatives medidos a partir do fim do array) e retorna um objeto jQuery contendo elementos do indice 
inicial ate (mas nao incluindo) o indice final. Se o indice final e omitido, o objeto retornado inclui 
todos os elementos no indice inicial ou depois dele: 


$("p").slice(2j5) // Seleciona o 3 s , 4 a e 5 a elementos <p> 

$("div").slice(-3) // Os tres ultimos elementos <div> 


-filter () e um metodo de filtragem de seleQo de uso geral e pode ser chamado de tres maneiras 
diferentes: 


• Se voce passa uma string seletora para filter(), ele retorna um objeto jQuery contendo ape¬ 
nas os elementos selecionados que tambem correspondem a esse seletor. 

• Se voce passa outro objeto jQuery para filterQ, ele retorna um novo objeto jQuery contendo 
a interseQo dos dois objetos jQuery. Voce tambem pode passar um array de elementos ou 
mesmo um linico elemento do documento para filterQ. 

• Se voce passa uma funqao predicado para filter (), essa firnfao e chamada para cada elemento 
coincidente e filterQ retorna um objeto jQuery contendo apenas os elementos para os quais 
o predicado retornou true (ou qualquer valor verdadeiro). A funijao predicado e chamada com 
o elemento como seu valor de this e o indice do elemento como argumento. (Consulte tam¬ 
bem jQuery.grepQ na Seq:ao 19.7.) 

$("div").filterQ.note") // 0 mesmo que $("div.note”) 

$("div").filter($(".note")) // 0 mesmo que $("div.note") 

$("div").filter(function(idx) { return idx%2==0 }) // 0 mesmo que $("div:even”) 

O metodo not() e exatamente como filterQ, exceto que inverte o sentido do filtro. Se voce passa 
uma string seletora para not(), ele retorna um novo objeto jQuery contendo somente os elementos 
selecionados que nao correspondem ao seletor. Se voce passa um objeto jQuery, um array de elemen¬ 
tos ou um unico elemento, not() retorna todos os elementos selecionados, exceto os que voce tiver 
excluido explicitamente. Se voce passa uma firnfao predicado para not(), ela e chamada exatamente 
como acontece em filterQ, mas o objeto jQuery retornado inclui somente os elementos para os 
quais o predicado retorna false ou um valor falso: 

$("div").not("#header, #footer"); // Todos os elementos <div> exceto dois especiais 

Na jQuery 1.4, o metodo hasQ e outro modo de refinar uma seleQo. Se voce passa um seletor, ele 
retorna um novo objeto jQuery contendo apenas os elementos selecionados que tern um descen- 
dente correspondente ao seletor. Se voce passa um elemento do documento para hasQ, ele refina a 
seleQo para corresponder apenas aos elementos que sao ascendentes do elemento especificado: 
$("p").has("a[href]") // Paragrafos que incluem links 
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O metodo add() aumenta uma sele^ao, em vez de filtra-la ou refina-la. Voce pode chamar add() com 
qualquer argumento (que nao seja uma fun^ao) que passaria para $(). add() retorna os elementos 
originalmente selecionados, mais os elementos que seriam selecionados (ou criados) pelos argumen¬ 
ts, caso esses arguments fossem passados para $(). add() remove elements duplicados e classifica 
a sele^ao combinada para que os elements fiquem na ordem do document: 

// Maneiras equivalentes de selecionar todos os elementos <div> e <p> 

$C'diVj p") // Usa um grupo de seletores 

$(''div").add("p") // Passa um seletor para add() 

$(''div").add($("p")) // Passa um objeto jQuery para add() 

var paras = document.getElementsByTagName("p"); // Um objeto semelhante a um array 
$(''div").add(paras); // Passa um array de elementos para add() 


19.8.2.1 Usando uma sele^ao como contexto 

Os metodos filter!), add() e not() descritos anteriormente efetuam operates de intersefao, uniao 
e subtra^ao de conjuntos em sele?oes independentes. A jQuery define varios outros metodos de 
sele^ao que utilizam a sele^ao atual como contexto. Para cada element selecionado, esses metodos 
fazem uma nova selefao, usando o element selecionado como contexto ou ponto de partida, e 
entao retornam um novo objeto jQuery contendo a uniao dessas sele^oes. Assim como o metodo 
add(), as duplicatas sao removidas e os elementos sao classificados de modo que fiquem na ordem 
do document. 

O mais geral dessa categoria de metodos de selefao e -find (). Ele pesquisa os descendentes de cada 
um dos elementos atualmente selecionados em busca de elements que correspondam a string sele- 
tora especificada e retorna um novo objeto jQuery representando esse novo conjunto de descenden¬ 
tes coincidentes. Note que os elementos recentemente selecionados nao sao mesclados com a seleQo 
ja existente - eles sao retornados como um novo conjunto de elements. Note tambem que -find () 
nao e igual a filterQ, que simplesmente reduz o conjunto de elements atualmente selecionados 
sem selecionar novos elementos: 

$("div").findC'p”) // localiza elementos <p> dentro de <div>s. 0 mesmo que $("div p") 

Os outros metodos dessa categoria retornam novos objetos jQuery representando os filhos, irmaos 
ou pais de cada um dos elementos atualmente selecionados. A maioria aceita uma string seletora 
optional como argument. Sem seletor, eles retornam todos os filhos, irmaos ou pais apropriados. 
Com o seletor, eles filtram a lista para retornar apenas os coincidentes. 

O metodo childrenQ retorna os elementos filhos imediatos de cada element selecionado, filtrando- 
-os com um seletor opcional: 

// Localiza todos os elementos <span> que sao filhos diretos dos elementos com 
// identificacoes "header" e "footer". 0 mesmo que $("#header>span,#footer>span") 
$(''#headerj #footer").children("span") 

O metodo contents!) e semelhante a childrenQ, mas retorna todos os nos filhos, incluindo nos de 
text, de cada element. Alem disso, se qualquer um dos elementos selecionados e um <iframe>, 
contents!) retorna o objeto document do conteudo desse <iframe>. Note que contents!) nao aceita 



Capftulo 19 A biblioteca jQuery 567 


uma string seletora opcional - isso porque ele retorna nos do documento que nao sao elementos e as 
strings seletoras so descrevem nos de elemento. 

Os metodos next() e prev() retornam o proximo irmao e o anterior de cada elemento selecionado 
que tiver um. Se um seletor e especificado, o irmao e selecionado somente se corresponde ao seletor: 

$("hl").next("p") // 0 mesmo que $("hl+p") 

$("hl").prev() // Elementos irmaos antes dos elementos <hl> 

nextAll() e prevAll() retornam todos os irmaos apos e todos os irmaos antes (se houver algum) 
de cada elemento selecionado. E o metodo siblings() retorna todos os irmaos de cada elemento 
selecionado (os elementos nao sao considerados irmaos deles mesmos). Se um seletor e passado para 
qualquer um desses metodos, somente os irmaos que correspondem sao retornados: 

$("#footer").nextAll("p") // Todos os irmaos de <p> apos o elemento #footer 

$("#footer").prevAll() // Todos os irmaos antes do elemento #footer 

Na jQuery 1.4 e posteriores, os metodos nextUntilQ e prevllntil() recebem um argumento seletor 
e selecionam todos os irmaos apos ou anteriores ao elemento selecionado, ate ser encontrado um ir¬ 
mao que corresponda ao seletor. Se o seletor e omitido, esses metodos funcionam exatamente como 
nextAllQ e prevAllQ sem seletor. 

O metodo parent () retorna o pai de cada elemento selecionado: 

$("li").parent() // Pais de itens da lista, como elementos <ul> e <ol> 

O metodo parents!) retorna os ascendentes (ate o elemento <html>) de cada elemento selecionado. 
Tanto parent() como parents () aceitam um argumento de string seletora opcional: 
$("a[href]").parents("p") // Elementos <p> que contem links 

parentsUntilQ retorna os ascendentes de cada elemento selecionado ate o primeiro ascendente que 
corresponda ao seletor especificado. O metodo closest () exige uma string seletora e retorna o ascen¬ 
dente mais proximo (se houver) de cada elemento selecionado que corresponder ao seletor. Para esse 
metodo, um elemento e considerado ascendente de si mesmo. Na jQuery 1.4, voce tambem pode 
passar um elemento ascendente como segundo argumento para closest (), a fim de impedir que a 
jQuery suba na arvore de ascendentes alem do elemento especificado: 

$("a[href]").closest("div") // <div>s mais internos que contem links 

$("a[href]").parentsUntil(":not(div)") // Todos wrappers <div> diretamente em torno de <a> 

19.8.2.2 Revertendo uma sele^ao anterior 

Para facilitar o encadeamento de metodos, a maioria dos metodos de objeto da jQuery retorna o 
objeto em que sao chamados. Contudo, todos os metodos abordados nesta seQo retornam novos 
objetos jQuery. O encadeamento de metodos funciona, mas voce deve ter em mente que os metodos 
chamados posteriormente no encadeamento podem estar operando em um conjunto de elementos 
diferente daquele mais proximo ao infcio do encadeamento. 

Entretanto, a situaQo e um pouco mais complicada do que isso. Quando os metodos de seleQo 
descritos aqui criam e retornam um novo objeto jQuery, eles fornecem a esse objeto uma referenda 
interna para o objeto jQuery mais antigo do qual foi derivado. Isso cria uma lista encadeada ou pi- 
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lha de objetos jQuery. O metodo end() faz retiradas nessa pilha, retornando o objeto jQuery salvo. 
Chamar end() em um encadeamento de metodos restaura o conjunto de elementos coincidentes ao 
seu estado anterior. Considere o codigo a seguir: 

// Localiza todos os elementos <div> e entao localiza os elementos <p> dentro deles. 

// Realqa os elementos <p> e depois adiciona uma borda aos elementos <div>. 

// Primeiramente, sem encadeamento de metodos 
var divs = $("div"); 
var paras = divs.find("p"); 
paras.addClass("highlight"); 
divs.css("border", "solid black lpx"); 

// Aqui esta como poderiamos fazer isso com um encadeamento de metodos 
$("div”) .find(''p") .addClass("highlight") .end() .css("border”, "solid black lpx"); 

// Ou entao, podemos reordenar as operacoes e evitar a chamada de end() 

$("div").css("border", "solid black lpx").-find("p").addClass("highlight"); 

Se quiser definir o conjunto de elementos selecionados manualmente de um modo que seja compa- 
tfvel com o metodo end(), passe o novo conjunto de elementos como um array ou objeto semelhante 
a um array para o metodo pushStackQ. Os elementos especificados se tornam os novos elementos 
selecionados e o conjunto de elementos selecionados anterior e colocado na pilha, de onde podem 
ser restaurados com end(): 

var sel = $("div"); // Seleciona todos os elementos <div> 

sel.pushStack(document.getElementsByTagName("p")); // Modifica isso para todos os 
// elementos <p> 

sel.end(); // Restaura elementos <div> 

Agora que abordamos o metodo end() e a pilha de sele^ao que ele utiliza, ha um ultimo metodo 
que podemos abordar. andSelf() retorna um novo objeto jQuery que inclui todos os elementos da 
seleqao atual, mais todos os elementos (menos os duplicados) da seleQo anterior. andSelfQ funciona 
como o metodo add () e “addPrev” poderia ser um nome mais descritivo para ele. Como exemplo, 
considere a seguinte variante do codigo anterior: ela real^a elementos <p> e os elementos <div> que os 
contem; em seguida, adiciona uma borda nos elementos <div>: 

$("div”).findC'p”).andSelf(). // localiza <p>s em <div>s e mescla-os 

addClass("highlight"). // Realca todos eles 

end().end(). // Retira da pilha duas vezes, voltando para $("div") 

css("border", "solid black lpx");// Adiciona uma borda aos divs 

19.9 Estendendo a jQuery com plug-ins 

A jQuery foi escrita de modo a ser facil adicionar novas funcionalidades. Os modulos que adicionam 
nova funcionalidade sao denominados plug-ins e voce pode encontrar muitos deles no endere^o 
http://plugins.jquery. com. Os plug-ins da jQuery sao apenas arquivos de codigo JavaScript normais e, 
para utiliza-los em suas paginas Web, basta inclui-los com um elemento <script>, como voce faria 
com qualquer outra bibboteca JavaScript (os plug-ins devem ser incluidos apos a inclusao da propria 
jQuery, evidentemente). 
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E extremamente facil escrever suas proprias extensoes de jQuery. O segredo e saber que jQuery. f n e o 
objeto prototipo de todos os objetos jQuery. Se voce adiciona uma funijao nesse objeto, essa funQo 
se torna um metodo jQuery. Aqui esta um exemplo: 
jQuery.fn.println = -function() { 

// Une todos os argumentos separados com espaqos em uma string 
var msg = Array.prototype.join.call(arguments, " "); 

// Itera por cada elemento do objeto jQuery 
this.each(function() { 

// Para cada um, anexa a string como texto puro e depois anexa um <br/>. 
jOuery(this).append(document.createTextNode(msg)).append("<br/>"); 

}); 

// Retorna o objeto jQuery intacto para o encadeamento de metodos 
return this; 

h 



Com essa funQo jQuery.fn.println definida, podemos agora chamar um metodo printlnQ em 
qualquer objeto jQuery, como segue: 

$("#debug").println("x = ", x, y = ", y); 

E uma pratica comum adicionar novos metodos em jQuery.fn. Se voce se encontrar usando o me¬ 
todo each() para iterar “manualmente” pelos elementos de um objeto jQuery e efetuar algum tipo 
de operaqao neles, pergunte-se se nao faria sentido refatorar seu codigo de modo que a chamada de 
each() seja colocada em um metodo de extensao. Se voce seguir as praticas basicas de codificaQo 
modular ao escrever sua extensao e obedecer a algumas conven^oes especfficas da jQuery, podera 
chamar sua extensao de plug-in e compartilha-la com outros. As conven^oes para plug-in jQuery a 
serem conhecidas sao: 


Nao conte com o identificador $: a pagina envoltoria pode ter chamado jQuery.noConflict() 
e $() pode nao ser mais um sinonimo da funQo jOueryQ. Em plug-ins pequenos, como o 
mostrado anteriormente, voce pode apenas usar jQuery, em vez de $. Se estiver escrevendo uma 
extensao maior, e provavel que voce a empacote inteira dentro de uma unica funQo anonima 
para evitar a criaQo de variaveis globais. Se fizer isso, voce pode usar o idioma de passar a 
jQuery como um argumento para sua funQo anonima e receber esse valor em um parametro 
chamado $: 

(function($) { // Uma fun^ao anonima com um unico parametro chamado $ 

// Coloque o codigo de seu plugin aqui 

}(jOuery)); // Chama a funqao com o objeto jQuery como argumento 

Se seu metodo de extensao nao retorna seu proprio valor, certifique-se de retornar um objeto 
jQuery que possa ser usado em um encadeamento de metodos. Normalmente, esse sera apenas 
o objeto this e voce pode retorna-lo intacto. No exemplo anterior, o metodo terminou com 
a linha return this;. O metodo poderia ser um pouco menor (e menos legivel) seguindo-se 
outro idioma jQuery: retornando o resultado do metodo each(). Entao, o metodo printlnQ 
teria incluido o codigo return this, each (f unction () {...}); 

Se seu metodo de extensao tern mais de dois parametros ou op?6es de configuraQo, permita 
que o usuario passe opfoes na forma de objeto (como vimos no caso do metodo animateQ, na 
Secjao 19.5.2 e da funfao jQuery.ajaxQ, na Seqao 19.6.3). 
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• Nao polua o espa^o de nomes do metodo jQuery. Os plug-ins jQuery bem comportados de- 
finem o menor numero de metodos, em consonancia com uma API utilizavel. E comum os 
plug-ins jQuery definirem apenas um metodo em jQuery.fn. Esse metodo recebe uma string 
como primeiro argumento e interpreta essa string como nome de uma funfao para passar seus 
argumentos restantes. Quando voce consegue limitar seu plug-in a um unico metodo, o nome 
desse metodo deve ser igual ao nome do plug-in. Se precisar definir mais de um metodo, use o 
nome do plug-in como prefixo para cada um de seus nomes de metodo. 

• Se seu plug-in vincula rotinas de tratamento de evento, coloque todas essas rotinas em um espa- 
qo de nomes de evento (SeQo 19.4.4). Use o nome de seu plug-in como nome do namespace. 

• Se seu plug-in usa o metodo data() para associar dados a elementos, coloque todos os seus 
valores de dados em um unico objeto e armazene esse objeto como um unico valor, dando a 
ele o mesmo nome de seu plug-in. 

• Salve o codigo de seu plug-in em um arquivo com um nome da forma “jquery.plugin .js”, 
substituindo “plugin” pelo nome de seu plug-in. 

Um plug-in pode adicionar novas funqoes utilitarias na jQuery adicionando-as ao proprio objeto 
jQuery. Por exemplo: 

// Este metodo imprime seus argumentos (usando o metodo de plugin printlnQ) 

// no elemento com identifica^ao "debug". Se esse elemento nao existe, ele e criado 
// e adicionado no documento. 
jQuery.debug = functionQ { 

var elt = jOuery("#debug"); // Localiza o elemento #debug 

if (elt.length == 0) { // 0 cria, caso nao exista 

elt = jOuery("<div id='debug'><hl>Debugging Output</hlx/div>"); 
jOuery(document.body).append(elt); 

} 

elt.println.apply(elt, arguments); // Gera a saida dos argumentos nele 

}; 

Alem de definir novos metodos, tambem e possivel estender outras partes da biblioteca jQuery. Na 
Se<jao 19.5, por exemplo, vimos que e possivel adicionar novos nomes de dura^ao de efeito (alem 
de “fast” e “slow”) pelo acrescimo de propriedades em jQuery.fx.speeds e que e possivel acrescen- 
tar novas fun^oes de abrandamento adicionando-as em jQuery.easing. Os plug-ins podem esten¬ 
der ate o mecanismo de seletor CSS da jQuery! Voce pode adicionar novos filtros de pseudoclasse 
(como :first e : input) acrescentando propriedades no objeto jQuery.expr[':' ]. Aquiestaum exem¬ 
plo que define um novo filtro :draggable que retorna apenas os elementos que tern um atributo 
draggable=true: 

jQuery.expr[.draggable = function(e) { return e.draggable === true; }; 

Com esse seletor definido, podemos selecionar imagens que podem ser arrastadas com 
$("img:draggable"), em vez do mais prolixo $("img[draggable=true]"). 

Como voce pode ver no codigo anterior, uma funQo seletora personalizada recebe um elemento 
DOM candidato como seu primeiro argumento. Ela deve retornar true se o elemento coincidir com 
o seletor e false, caso contrario. Muitos seletores personalizados precisam apenas do argumento de 
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elemento unico, mas na verdade sao chamados com quatro argumentos. O segundo argumento e 
um mdice inteiro que fornece a posipio desse elemento em um array de elementos candidatos. Esse 
array e passado como quarto argumento e seu seletor nao deve modifica-lo. O terceiro argumento 
e interessante: e o array resultante de uma chamada do metodo RegExp.exec(). O quarto elemento 
desse array (no mdice 3) e o valor (se houver) dentro dos parenteses, apos o filtro de pseudoclasse. Os 
parenteses e quaisquer aspas internas sao retirados, restando apenas a string do argumento. Aqui, por 
exemplo, esta como voce poderia implementar uma pseudoclasse :data(x) que retorna true somente 
para argumentos que tern um atributo data-x (consulte a Sepio 15.4.3): 

jQuery.expr[':' ] .data = -function(element, index, match, array) { 

// Nota: o IE 7 e anteriores nao implementam hasAttribute() 
return element.hasAttribute("data-" + match[ 3 ]); 

}; 

19.10 A biblioteca jQuery Ul 

A jQuery se limita a fornecer DOM, CSS, tratamento de eventos e funcionalidades Ajax. Isso forne¬ 
ce uma base excelente para a construpio de abstra^oes de nivel mais alto, como widgets de interface 
com o usuario, sendo que a biblioteca jQuery UI faz exatamente isso. Uma abordagem completa da 
jQuery UI esta fora dos objetivos deste livro. O que podemos fazer aqui e oferecer uma visao geral 
simples. A biblioteca e sua documentapio podem ser encontradas no enderepj http:lljqueryui.com. 

Conforme o nome implica, a jQuery UI (do ingles, User Interface) define varios widgets de interface 
com o usuario: campos de entrada de preenchimento automatico, selecionadores para inserpio de da- 
tas, menus sanfona e guias para organizar informatjoes, controles deslizantes e barras de progresso para 
exibir mimeros visualmente e dialogos modais para comunicaQo urgente com o usuario. Alem desses 
widgets, a jQuery UI implementa “interaijoes” mais gerais que permitem facilmente tornar possivel 
arrastar, soltar, redimensionar, selecionar ou classificar qualquer elemento do documento. Por fim, a 
jQuery UI adiciona varios metodos de efeitos visuais novos (incluindo a capacidade de animar cores) 
aqueles oferecidos pela propria jQuery e tambem define muitas funples de abrandamento novas. 

Considere a jQuery UI como diversos plug-ins jQuery relacionados, empacotados em um unico 
arquivo JavaScript. Para usa-la, basta incluir o script jQuery UI em sua pagina Web, apos incluir o 
codigo jQuery. A pagina Download no enderep) http://jqueryui.com permite selecionar os compo- 
nentes que voce pretende usar e monta um pacote de download personalizado que pode reduzir os 
tempos de carregamento de pagina, comparado com a biblioteca jQuery UI completa. 

A jQuery UI esta repleta de temas e eles assumem a forma de arquivos CSS. Assim, alem de carregar 
o codigo JavaScript da jQuery UI em suas paginas Web, voce tambem vai ter de incluir o arquivo 
CSS de seu tema selecionado. O site da jQuery UI apresenta varios temas prontos e tambem uma 
pagina “ThemeRoller”, que permite personalizar e baixar seu proprio tema. 

Os widgets e as in temples da jQuery UI sao estruturados como plug-ins jQuery e cada um deles 
define um unico metodo jQuery. Normalmente, quando voce chama esse metodo em um elemento 
existente no documento, ele transforma esse elemento no widget. Por exemplo, para alterar um cam- 
po de entrada de texto de modo que ele apresente um widget selecionador de datas quando clicado 
ou quando receber o foco, basta chamar o metodo datepickerQ com codigo como este: 
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// Transforma elementos <input> com class="date" em widgets selecionadores de data 
$( "input, date") .datepickerQ; 

Para utilizar um widget jQuery UI completamente, voce deve saber de tres coisas: suas op^oes de 
configura^ao, seus metodos e seus eventos. Todos os widgets jQuery UI podem ser configurados e 
alguns tem muitas opfoes de configurafao. Voce pode personalizar o comportamento e a aparen- 
cia de seus widgets passando um objeto op^oes (como o objeto op^oes de animaQo passado para 
animateQ) para o metodo widget. 

Normalmente, os widgets jQuery UI definem pelo menos alguns “metodos” para interagir com 
o widget. Contudo, para evitar a proliferaQo de metodos jQuery, os widgets jQuery UI nao de¬ 
finem seu “metodos” como metodos reais. Cada widget tem apenas um metodo (como o metodo 
datepickerQ no exemplo anterior). Quando quer chamar um “metodo” do widget, voce passa o 
nome do “metodo” desejado para o unico metodo real definido pelo widget. Para desabilitar um 
widget selecionador de datas, por exemplo, voce nao chama um metodo disableDatepickerQ; em 
vez disso, chama datepickerf"disable"). 

Os widgets jQuery UI geralmente definem eventos personalizados que disparam em resposta a in- 
tera^ao do usuario. Voce pode vincular rotinas de tratamento para esses eventos personalizados ao 
metodo bindQ normal e em geral tambem pode especificar fun^oes de tratamento de evento como 
propriedades no objeto op^oes passado para o metodo widget. O primeiro argumento desses meto¬ 
dos de rotina de tratamento e um objeto Event, como sempre. Alguns widgets passam um segundo 
objeto “UI” como segundo argumento para a rotina de tratamento de evento. Esse objeto normal¬ 
mente fornece informafoes de estado sobre o widget. 

Note que a documenta?ao da jQuery UI as vezes descreve “eventos” que nao sao verdadeiros eventos 
personalizados e poderiam ser mais bem descritos como funijoes callback configuradas por meio 
do objeto op?6es de configura?ao. O widget selecionador de datas, por exemplo, suporta diversas 
fun^oes de retorno, as quais pode chamar varias vezes. Entretanto, essas funqoes nao tem a assinatura 
de rotina de tratamento de evento padrao e voce nao pode registrar rotinas de tratamento para esses 
“eventos” com bindQ. Em vez disso, voce especifica funijoes de retorno apropriadas ao configurar o 
widget em sua chamada inicial para o metodo datepickerQ. 



Capi'tulo 20 

Armazenamento no 
lado do diente 


Os aplicativos Web podem utilizar APIs de navegador para armazenar dados de forma local no com- 
putador do usuario. Esse armazenamento no lado do cliente fornece uma memoria para o navegador 
Web. Os aplicativos Web podem armazenar preferences do usuario, por exemplo, ou ate seu estado 
completo, para que possam retomar exatamente a partir de onde voce estava no final de sua ultima 
visita. O armazenamento no lado do cliente e separado por origem, de modo que as paginas de um 
site nao podem ler os dados armazenados pelas paginas de outro. Mas duas paginas do mesmo site 
podem compartilhar o armazenamento e utiliza-lo como mecanismo de comunica^ao. A entrada de 
dados em um formulario de uma pagina pode ser exibida em uma tabela de outra pagina, por exem¬ 
plo. Os aplicativos Web podem escolher a vida util dos dados que armazenam - os dados podem ser 
armazenados temporariamente para que sejam mantidos apenas ate que a janela feche ou o navega¬ 
dor seja encerrado, ou podem ser salvos no disco rigido e armazenados permanentemente, para que 
estejam dispom'veis meses ou anos depois. 

Existem varias formas de armazenamento do lado do cliente: 


Web Storage 

Web Storage e uma API originalmente definida como parte de HTML5, mas que foi desmem- 
brada como uma especifica^ao independente. Essa especifica^ao ainda e preliminar (draft), 
mas esta parcialmente implementada (e de forma a operar em conjunto) em todos os nave- 
gadores atuais, incluindo o IE8. Essa API consiste nos objetos localStorage e sessionStorage, 
que sao basicamente arrays associativos persistentes que mapeiam chaves de string em valores 
de string. E muito facil usar Web Storage. A API e conveniente para armazenar grandes volu¬ 
mes de dados (mas nao enormes) e esta disponivel em todos os navegadores atuais, mas nao 
e suportada pelos mais antigos. localStorage e sessionStorage sao abordados na Se^ao 20.1. 

Cookies 

Os cookies sao um antigo mecanismo de armazenamento no lado do cliente, projetado para 
uso por scripts do lado do servidor. Uma complicada API JavaScript torna possivel escrever 
scripts de cookies no lado do cliente, mas eles sao dificeis de usar e so servem para armazenar 
pequenos volumes de dados textuais. Alem disso, qualquer dado armazenado como cookie 
e sempre transmitido para o servidor com toda requisi^ao HTTP, mesmo que o dado so in- 
teresse para o cliente. Os cookies continuam a ter interesse para os programadores do lado 
do cliente, pois todos os navegadores, antigos e novos, os suportam. Contudo, uma vez que 
a Web Storage esteja universalmente disponivel, os cookies vao voltar a sua funfao original 
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como mecanismo de armazenamento no lado do cliente para scripts do lado do servidor. Os 
cookies sao abordados na Segao 20.2. 

userData do IE 

A Microsoft implementa seu proprio mecanismo patenteado de armazenamento no lado do 
cliente, conhecido como “userData”, no IE5 e posteriores. A API userData permite o armaze¬ 
namento de volumes medios de strings de dados e pode ser usada como uma alternativa a Web 
Storage nas versoes do IE antes do IE8. A API userData e abordada na Segao 20.3. 

Aplicativos Web off-line 

HTML5 define uma API “Offline Web Applications” que permite colocar na cache as paginas 
Web e seus recursos associados (scripts, arquivos CSS, imagens, etc.). Esse armazenamento no 
lado do cliente e para os proprios aplicativos Web e nao apenas para seus dados, e permite que 
esses aplicativos instalem a si mesmos para que estejam disponfveis mesmo quando nao houver 
conexao com a Internet. Os aplicativos Web off-line sao abordados na Segao 20.4. 


Os desenvolvedores que precisam trabalhar com volumes de dados realmente grandes gostam 
de usar bancos de dados, e os navegadores mais recentes co megaram a integrar funcionalidade 
de banco de dados no lado do cliente. Safari, Chrome e Opera contem uma API no lado do 
cliente para um banco de dados SQL. Contudo, o esforgo de padronizagao dessa API fracassou 
e e improvavel que seja implementada pelo Firefox ou pelo IE. Uma API de banco de dados 
alternativa esta sendo padronizada sob o nome “Indexed Database API”. Trata-se de uma API 
para um banco de dados de objetos simples, sem linguagem de consulta. As duas APIs de 
banco de dados do lado do cliente sao assfncronas e exigem o uso de rotinas de tratamento 
de evento, o que as torna um tanto complicadas. Elas nao estao documentadas neste capftulo, 
mas consulte a Segao 22.8 para uma visao geral e um exemplo da API IndexedDB. 

API Filesystem 

Vimos no Capftulo 18 que os navegadores modernos suportam um objeto File que permite 
carregar arquivos selecionados pelo usuario por meio de um objeto XMLHttpRequest. Mi- 
nutas de padroes relacionados definem uma API para obter um sistema de arquivos local pri- 
vativo e para ler e gravar arquivos nesse sistema. Essas APIs emergentes sao descritas na Segao 
22.7. Quando elas estiverem mais amplamente implementadas, os aplicativos Web poderao 
usar os tipos de mecanismos de armazenamento baseado em arquivos ja conhecidos por mui- 
tos programadores. 


Armazenamento, seguranca e privacidade 

Os navegadores Web frequentemente se oferecem para lembrar de senhas para voce, e as armazenam 
com seguranca na forma criptografada no disco. Mas nenhuma das formas de armazenamento de dados 
no lado do cliente descritas neste capitulo envolve criptografia: tudo que voce salva fica no disco rigido do 
usuario na forma nao criptografada. Portanto, os dados armazenados ficam acessiveis a usuarios curiosos 
que compartilham o acesso ao computador e a software mal-intencionado (como um spyware) que possa 
existir no computador. Por isso, nenhuma forma de armazenamento no lado do cliente deve ser utilizada 
para senhas, numeros de conta bancaria ou outras informagoes sigilosas. Lembre-se: apenas porque um 
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usuario digita algo em um campo de formulario ao interagir com seu site nao significa que ele quer uma 
copia desse valor armazenada no disco. Considere um numero de cartao de credito como exemplo. Essa e 
uma informagao sigilosa que as pessoas mantem oculta em suas carteiras. Se voce salva essa informagao 
usando persistence no lado do diente, e quase como se escrevesse o numero de cartao de credito em um 
lembrete adesivo e o colocasse no tedado do usuario. 

Alem disso, lembre-se de que muitos usuarios da Web desconfiam de sites que utilizam cookies ou outros 
mecanismos de armazenamento no lado do cliente para fazer qualquer coisa que se assemelhe a"rastrea- 
mento". Tente usar os mecanismos de armazenamento discutidos neste capitulo para melhorar a experien¬ 
ce do usuario em seu site; nao os utilize como mecanismo de coleta de dados que invada a privacidade. 
Se sites demais abusarem do armazenamento no lado do cliente, os usuarios vao desabilita-lo ou limpa-lo 
frequentemente, o que anularia o proposito e incapacitaria os sites que dependem disso. 


20.1 localStorage e sessionStorage 

Os navegadores que implementam a versao draft da especificagao “Web Storage” definem duas pro- 
priedades no objeto Window: localStorage e sessionStorage. Ambas se referem a um objeto Storage 
- um array associative persistente que mapeia chaves de string em valores de string. O funcionamen- 
to dos objetos Storage e muito parecido com o dos objetos JavaScript normais: basta configurar uma 
propriedade do objeto com uma string e o navegador armazena essa string para voce. A diferenga 
entre localStorage e sessionStorage tern a ver com vida util e escopo: por quanto tempo os dados sao 
salvos e a quern estao acessfveis. 

A vida util e o escopo de Storage sao explicados com mais detalhes a seguir. Primeiramente, contu- 
do, vamos ver alguns exemplos. O codigo a seguir usa localStorage, mas tambem funcionaria com 
sessionStorage: 

var name = localStorage.username; // Consulta um valor armazenado. 

name = localStorage["username"]; // Notacao de array equivalente 

if (iname) { 

name = prompt("What is your name? 1 '); // Faz uma pergunta ao usuario. 

localStorage.username = name; // Armazena a resposta do usuario. 

} 

// Itera por todos os pares nome/valor armazenados 

for(var name in localStorage) { // Itera por todos os nomes armazenados 

var value = localStoragejname]; // Pesquisa o valor de cada um 

} 

Os objetos Storage tambem definem metodos para armazenar, recuperar, iterar e excluir dados. Esses 
metodos sao abordados na Segao 20.1.2. 

A versao draft da especificagao Web Storage diz que devemos ser capazes de armazenar dados estru- 
turados (objetos e arrays), assim como valores primitivos e tipos internos, como datas, expressoes 
regulares e ate objetos File. No entanto, quando este livro estava sendo escrito, os navegadores so 
permitiam o armazenamento de strings. Se quiser armazenar e recuperar outros tipos de dados, voce 
mesmo vai ter de codifica-los e decodifica-los. Por exemplo: 

// Se voce armazena um numero, ele e convertido automaticamente em uma string. 

// Nao se esqueca de analisa-lo, ao recupera-lo do armazenamento. 
localStorage.x = 10 ; 
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var x = parselnt(localStorage.x); 

// Converte um objeto Date em uma string ao configurar e analisa-o, ao obter 

localStorage.lastRead = (new DateQ).toUTCStringQ; 

var lastRead = new Date(Date.parse(localStorage.lastRead)); 

// JSON tende a resultar em uma codificacao conveniente para qualquer estrutura primitiva 
// ou de dados 

localStorage.data = JSON.stringify(data); // Codifica e armazena 

var data = JSON.parse(localStorage.data); // Recupera e decodifica. 

20.1.1 Vida util e escopo do armazenamento 

A diferenfa entre localStorage e sessionStorage envolve a vida util e o escopo do armazenamento. 
Os dados armazenados por meio de localStorage sao permanentes: eles nao expiram e continuam 
armazenados no computador do usuario ate que um aplicativo Web os exclua ou o usuario pe?a para 
que o navegador (por meio de alguma interface com o usuario especifica do navegador) os exclua. 

localStorage tern como escopo a origem do documento. Conforme explicado na Se<jao 13.6.2, a 
origem de um documento e definida por seu protocolo, nome de host e porta, de modo que cada 
um dos URLs a seguir tern uma origem diferente: 

http://www.example.com // Protocolo: http; nome de host: www.example.com 

https://www.example.com // Protocolo diferente 

http://static.example.com // Nome de host diferente 

http://www.example.com:8000 // Porta diferente 

Todos os documentos com a mesma origem compartilham os mesmos dados de localStorage (inde- 
pendente da origem dos scripts que realmente acessam localStorage). Eles podem ler os dados uns 
dos outros e podem sobrescrever os dados uns dos outros. Mas documentos com origens diferentes 
nunca podem ler nem sobrescrever os dados uns dos outros (mesmo que ambos estejam executando 
um script do mesmo servidor externo). 

Note que o escopo de localStorage tambem e o fornecedor do navegador. Se voce visita um site 
usando Firefox e depois o visita novamente usando Chrome (por exemplo), os dados armazenados 
durante a primeira visita nao estarao acessfveis durante a segunda visita. 

Os dados armazenados por meio de sessionStorage tern vida util diferente dos dados armazenados 
por meio de localStorage: eles tern a mesma vida util que a janela de nivel superior ou guia do 
navegador em que o script que os armazenou esta sendo executado. Quando a janela ou guia e fe- 
chada permanentemente, os dados armazenados por meio de sessionStorage sao excluidos. (Note, 
entretanto, que os navegadores modernos tern a capacidade de reabrir guias fechadas recentemente 
e restaurar a ultima sessao de navega^ao, de modo que a vida util dessas guias e da sessionStorage 
associada pode ser mais longa do que parece.) 

Assim como localStorage, o escopo de sessionStorage e a origem do documento, de modo que 
documentos com origens diferentes nunca vao compartilhar sessionStorage. Mas o escopo de 
sessionStorage tambem e definido de acordo com a janela. Se um usuario tern duas guias do na¬ 
vegador exibindo documentos da mesma origem, essas duas guias tern dados de sessionStorage 
separados: os scripts em execu^ao em uma guia nao podem ler nem sobrescrever os dados gravados 
por scripts na outra guia, mesmo que as duas guias estejam visitando exatamente a mesma pagina e 
executando exatamente os mesmos scripts. 
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Note que esse escopo baseado na janela de sessionStorage so serve para janelas de rn'vel superior. Se 
uma guia do navegador contem dois elementos <iframe> e esses quadros contem dois documentos 
com a mesma origem, esses dois documentos em quadros vao compartilhar sessionStorage. 

20.1.2 APIdearmazenamento 

localStorage e sessionStorage sao frequentemente usados como se fossem objetos JavaScript normais: 
configure uma propriedade para armazenar uma string e consulte a propriedade para recupera-la. 
Mas esses objetos tambem definem uma API mais formal baseada em metodos. Para armazenar um 
valor, passe o nome e o valor para setltem(). Para recuperar um valor, passe o nome para getltemQ. 
Para excluir um valor, passe o nome para removeItem(). (Na maioria dos navegadores, o operador 
delete tambem pode ser usado para remover um valor, exatamente como voce faria para um objeto 
normal, mas essa tecnica nao funciona no IE8.) Para excluir todos os valores armazenados, chame 
clear() (sem argumentos). Por fim, para enumerar os nomes de todos os valores armazenados, use a 
propriedade length e passe niimeros de 0 a length- 1 parao metodo key(). Aqui estao alguns exemplos 
usando localStorage. O mesmo codigo funcionaria usando sessionStorage em seu lugar: 
localStorage.setltem("x", l); // Armazena um numero com o nome "x" 

localStorage.getltem("x"); // Recupera um valor 

// Enumera todos os pares nome/valor armazenados 
for(var i = 0; i < localStorage.length; i++) { 
var name = localStorage.key(i); 
var value = localStorage.getltem(name); 

} 

localStorage.removeItem("x"); // Exclui o item "x" 

localStorage.clearQ; // Exclui tambem todos os outros itens 

Embora em geral seja mais conveniente armazenar e recuperar valores configurando e consultando 
propriedades, existem ocasioes em que se quer usar esses metodos. Primeiramente, o metodo clear() 
nao tern um equivalente e e a unica maneira de excluir todos os pares nome/valor em um objeto 
Storage. Da mesma forma, o metodo removeItem() e a unica maneira portavel de excluir um unico 
par nome/valor, pois o IE8 nao permite utilizar o operador delete dessa maneira. 

Se os fornecedores de navegador implementarem totalmente a especifica^ao e permitirem que ob¬ 
jetos e arrays sejam armazenados em um objeto Storage, vai haver outro motivo para usar metodos 
como setltemQ e getltemQ. Os valores de objeto e array normalmente sao mutaveis, de modo que 
um objeto Storage e obrigado a fazer uma copia quando voce armazena um valor, a fim de que todas 
as altera^oes subsequentes no valor original nao tenham qualquer efeito sobre o valor armazenado. O 
objeto Storage tambem e obrigado a fazer uma copia quando voce recupera um valor, a fim de que as 
altera^oes feitas no valor recuperado nao tenham qualquer efeito sobre o valor armazenado. Quando 
esse tipo de copia e feita, usar a API baseada em propriedades pode ser confuso. Considere o codigo 
(hipotetico, ate que os navegadores suportem valores estruturados) a seguir: 

localStorage.o = {x:l}; // Armazena um objeto que tern uma propriedade x 

localStorage.o.x = 2; // Tenta configurar a propriedade do objeto armazenado 

localStorage.o.x // => 1: x esta intacto 

A segunda linha do codigo anterior quer configurar uma propriedade do objeto armazenado, mas 
em vez disso, recupera uma copia do objeto, configura uma propriedade nesse objeto copiado e, en- 


// 0 comprimento fornece o n® de pares 
// Obtem o nome do par i 
// Obtem o valor desse par 
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tao, descarta a copia. O objeto armazenado permanece intacto. Haveria menos chance de confusao 
se usassemos getltem() aqui: 

localStorage.getItem("o").x = 2; // Nao esperamos que isso armazene o valor 2 

Por fim, outro motivo para usar a API Storage explfcita baseada em metodos e que podemos si- 
mular essa API em cima de outros mecanismos de armazenamento nos navegadores que ainda 
nao suportam a especifica^ao Web Storage. As sefoes a seguir implementam a API Storage usando 
cookies e userData do IE. Se voce usa a API baseada em metodos, pode escrever codigo que utilize 
localStorage quando estiver disponivel e recorrer a um dos outros mecanismos de armazenamento 
nos outros navegadores. Seu codigo poderia comepr como segue: 

// Descobre que memoria estou usando 
var memory = window.localStorage || 

(window.UserDataStorage && new UserDataStorageQ) || 
new CookieStorageQ; 

// Em seguida, pesquisa minha memoria 
var username = memory.getltem("username"); 

20.1.3 Eventos de armazenamento 

Quando os dados armazenados em localStorage ou sessionStorage mudam, o navegador dispara um 
evento de armazenamento em todos os outros objetos Window nos quais esses dados estao visiveis 
(mas nao na janela que fez a alteraQo). Se um navegador tern duas guias abertas para paginas de 
mesma origem e uma dessas paginas armazena um valor em localStorage, a outra guia recebe um 
evento de armazenamento. Lembre-se de que o escopo de sessionStorage e a janela de nivel superior, 
de modo que os eventos armazenamento so sao disparados por altera^oes de sessionStorage quando 
existem quadros envolvidos. Note tambem que os eventos armazenamento so sao disparados quando 
o armazenamento muda realmente. Configurar um item existente armazenado com seu valor atual 
ou remover um item que nao existe no armazenamento nao dispara um evento. 

Registre uma rotina de tratamento de eventos de armazenamento com addEventListener() (ou 
attachEvent() no IE). Na maioria dos navegadores, voce tambem pode configurar a propriedade 
onstorage do objeto Window, mas quando este livro estava sendo escrito, o Firefox nao suportava 
essa propriedade. 

O objeto evento associado a um evento de armazenamento tern cinco propriedades importantes 
(elas nao sao suportadas pelo IE8, infelizmente): 

key 

O nome ou chave do item que foi configurado ou removido. Se o metodo clear () foi chama- 
do, essa propriedade sera null. 

newValue 

Contem o novo valor do item, ou null, se removeltemQ foi chamado. 
oldValue 

Contem o valor antigo de um item existente que mudou ou foi excluido, ou null se um novo 
item foi inserido. 
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storageArea 

Esta propriedade sera igual a localStorage ou a propriedade sessionStorage do objeto Window 
de destino. 


url 

O URL (como uma string) do documento cujo script fez a alteragao no armazenamento. 

Por fim, note que localStorage e o evento de armazenamento podem servir como mecanismo de 
transmissao por meio do qual um navegador envia uma mensagem para todas as janelas que estao vi- 
sitando o mesmo site. Se um usuario pede para que um site pare de fazer animates, por exemplo, o 
site pode armazenar essa preferencia em localStorage para que possa respeitar isso em visitas futuras. 
E por armazenar a preferencia, ele gera um evento que permite as outras janelas que estao exibindo o 
mesmo site tambem respeitem o pedido. Como outro exemplo, imagine um aplicativo de edigao de 
imagens baseado na Web que permite ao usuario exibir paletas de ferramenta em janelas separadas. 
Quando o usuario seleciona uma ferramenta, o aplicativo usa localStorage para salvar o estado atual 
e para notificar as outras janelas de que uma nova ferramenta foi selecionada. 

20.2 Cookies 

Um cookie e um pequeno volume de dados nomeados, armazenados pelo navegador Web e asso- 
ciados a uma pagina Web ou site em especial. Os cookies foram projetados originalmente para 
programagao no lado do servidor e, no nivel mais baixo, sao implementados como uma extensao 
do protocolo HTTP. Os dados de um cookie sao transmitidos automaticamente entre o navegador 
Web e o servidor Web, de modo que scripts do lado do servidor podem ler e gravar valores de cookie 
armazenados no cliente. Esta segao demonstra como os scripts do lado do cliente tambem podem 
manipular cookies usando a propriedade cookie do objeto Document. 


Por que "cookie?" 

0 nome "cookie" nao tem muito significado, mas nao e usado a toa. No inicio da historia da com- 
putagao, o termo "cookie" ou "magic cookie" era usado para se referir a um pequeno volume de da¬ 
dos, especialmente dados privilegiados ou sigilosos, semelhantes a uma senha, que verificavam uma 
identidade ou permitiam um acesso. Em JavaScript, os cookies sao usados para salvar estado e po¬ 
dem estabelecer um tipo de identidade para um navegador Web. Entretanto, em JavaScript eles nao 
usam qualquer tipo de criptografia e nao sao seguros (embora transmiti-los por meio de uma conexao 
https; ajude). 


A API para manipular cookies e muito antiga, ou seja, e suportada universalmente. Infelizmente, a 
API tambem e muito enigmatica. Nao ha metodos envolvidos: os cookies sao consultados, confi- 
gurados e exclufdos pela leitura e gravagao da propriedade cookie do objeto Document, usando-se 
strings especialmente formatadas. A vida util e o escopo de cada cookie podem ser especificados 
individualmente com atributos do cookie. Esses atributos tambem sao especificados com strings 
especialmente formatadas, configuradas na mesma propriedade cookie. 
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As subsegoes a seguir explicam os atributos de cookie que especificam vida util e escopo e, em segui- 
da, demonstram como configurar e consultar valores de cookie em JavaScript. A segao termina com 
um exemplo que implementa a API Storage em cima de cookies. 


Determinando se os cookies estao habilitados 

Os cookies ficaram com uma reputagao ruim para muitos usuarios da Web devido ao uso inescrupuloso 
por terceiros - cookies associados a imagens em uma pagina Web, em vez da pagina Web em si. Os cookies 
de terceiros permitem a uma empresa de propaganda, por exemplo, monitorar um usuario cliente de um 
site para outro, sendo que as implicagoes sobre a privacidade dessa pratica podem fazer com que alguns 
desabilitem os cookies em seus navegadores Web. Antes de usar cookies em seu codigo JavaScript, talvez 
voce queira primeiro verificar se eles estao habilitados. Na maioria dos navegadores, isso pode ser feito 
verificando-se a propriedade navigator. cookieEnabled. Se for true, os cookies estao habilitados e se for 
false, estao desabilitados (embora cookies nao persistentes que duram apenas pela sessao de navegagao 
atual ainda possam estar habilitados). Essa nao e uma propriedade padrao e se voce descobrir que ela esta 
indefinida no navegador em que seu codigo esta sendo executado, deve testar o suporte para cookies 
tentando gravar, ler e exduir um cookie de teste, usando as tecnicas explicadas a seguir. 


20.2.1 Atributos de cookie: vida util e escopo 

Alem de um nome e um valor, cada cookie tern atributos opcionais que controlam sua vida util e 
seu escopo. Os cookies sao transientes por default; os valores que armazenam duram enquanto a 
sessao do navegador Web durar, mas sao perdidos quando o usuario encerra o navegador. Note que 
essa vida util e sutilmente diferente de sessionStorage: o escopo dos cookies nao e uma unica janela 
e sua vida util padrao e igual ao processo do navegador inteiro e nao de uma janela. Se quiser que 
um cookie dure alem de uma sessao de navegagao, informe ao navegador por quanto tempo (em 
segundos) voce gostaria de manter o cookie, especificando um atributo max-age. Se voce especificar 
uma vida util, o navegador vai armazenar os cookies em um arquivo e vai exclui-los somente quan¬ 
do expirarem. 

A visibilidade do cookie tern escopo imposto pela origem do documento (como acontece com 
localStorage e sessionStorage) e tambem pelo caminho do documento. Esse escopo pode ser con- 
figurado por meio dos atributos de cookie caminho e dominio. Por default, um cookie e associado 
e esta acessivel a pagina Web que o criou e a todas as outras paginas Web no mesmo diretorio ou 
qualquer subdiretorio desse diretorio. Se a pagina Web http://www.example.com/catalog/index.html 
cria um cookie, por exemplo, esse cookie tambem esta visivel para http://www.example.com/catalog/ 
order.html e para http://www.example.com/catalog/widgets/index.html, mas nao para http://www.exam- 
ple. com/about, html. 

Muitas vezes, esse comportamento de visibilidade padrao e exatamente o que se quer. As vezes, con- 
tudo, voce quer usar valores de cookie em todo o site, independente da pagina que criou o cookie. 
Por exemplo, se o usuario digita seu enderego de correspondence em uma pagina de um formulario, 
talvez voce queira salvar esse enderego para usar como default na proxima vez que ele retornar a pa¬ 
gina e tambem como default em um formulario totalmente nao relacionado em outra pagina, onde 
ele e solicitado a digitar um enderego para cobranga. Para permitir essa utilizagao, voce especifica um 
caminho para o cookie. 
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Entao, qualquer pagina Web do mesmo servidor Web cujo URL comece com o prefixo de caminho 
que voce especificou, pode compartilhar o cookie. Por exemplo, se um cookie conflgurado por 
http://www.example.com/catalog/widgets/index.html tem seu caminho conflgurado como “/catalog”, 
esse cookie tambem e visivel para http://www.example.com/catalog/order.html. Ou entao, se o cami¬ 
nho e conflgurado como o cookie e visivel para qualquer pagina no servidor Web http://www. 
example.com. 

Configura o caminho de um cookie como “/” fornece um escopo como o de localStorage e tam¬ 
bem especifica que o navegador deve transmitir o nome e o valor do cookie para o servidor quando 
solicitar qualquer pagina Web no site. Note que o atributo caminho do cookie nao deve ser tratado 
como qualquer tipo de mecanismo de controle de acesso. Se uma pagina Web quer ler os cookies de 
alguma outra pagina do mesmo site, pode simplesmente carregar essa outra pagina em um <iframe> 
oculto e ler os cookies do documento que esta no quadro. A politica da mesma origem (Se<jao 
13.6.2) impede que esse tipo de detec^ao de cookie acontepi entre sites, mas ele e perfeitamente 
valido para documentos do mesmo site. 

Por default, o escopo dos cookies e a origem do documento. No entanto, sites grandes talvez quei- 
ram compartilhar cookies entre subdominios. Por exemplo, o servidor em order.example.com talvez 
precise ler valores de cookie configurados em catalog.example.com. E af que o atributo dornmio entra 
em a^ao. Se um cookie criado por uma pagina em catalog.example.com configura seu atributo cami¬ 
nho como “/” e seu atributo dornmio como “.example.com”, esse cookie esta disponfvel para todas 
as paginas Web de catalog.example.com, orders.example.com e qualquer outro servidor no dornmio 
example.com. Se o atributo dornmio nao esta conflgurado para um cookie, o padrao e o nome de host 
do servidor Web que content a pagina. Note que nao e possfvel configurar o dornmio de um cookie 
como um que nao seja o de seu servidor. 

O ultimo atributo de cookie e um valor booleano chamado secure que especifica como os valores de 
cookie sao transmitidos pela rede. Por default, os cookies sao inseguros, ou seja, sao transmitidos 
por uma conexao HTTP insegura normal. Contudo, se um cookie e marcado como secure, ele 
e transmitido somente quando o navegador e o servidor estao conectados via HTTPS ou outro 
protocolo seguro. 

20.2.2 Armazenando cookies 

Para associar um valor de cookie transiente ao documento atual, basta configurar a propriedade 
cookie com uma string da forma: 

Por exemplo: 

document.cookie = "version=" + encodeURIComponent(document.lastModified); 

Na proxima vez que voce ler a propriedade cookie, o par nome/valor armazenado estara incluido 
na lista de cookies do documento. Os valores de cookie nao podem conter pontos e virgulas, vfr- 
gulas ou espapts em branco. Por isso, talvez voce queira usar a funpio global basica de JavaScript 
encodeURIComponent () para codificar o valor antes de armazena-lo no cookie. Se fizer isso, vai ter de 
usar a funpio decodeURIComponentQ correspondente quando ler o valor do cookie. 

Um cookie escrito com um par nome/valor simples dura pela sessao de navegapio na Web atual, mas 
e perdido quando o usuario encerra o navegador. Para criar um cookie que possa durar entre sessoes 
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de navegador, especifique sua vida util (em segundos) com um atributo max-age. Isso pode ser feito 
configurando-se a propriedade cookie com uma string da forma: 
nome=valoi; max-age=segundos 

A fun^ao a seguir configura um cookie com um atributo max-age opcional: 

// Armazena o par nome/valor como cookie, codificando o valor com 
// encodeURIComponentQ para fazer o escape de pontos e virgulas, virgulas e espaqos. 

// Se daysToLive e um numero, configura o atributo max-age de modo que o cookie 
// expire apos o numero especificado de dias. Passe 0 para excluir um cookie, 
function setCookie(name, value, daysToLive) { 

var cookie = name + "=" + encodellRIComponent(value); 
if (typeof daysToLive === "number") 

cookie += max-age=" + (daysToLive*60*60*24); 
document.cookie = cookie; 

} 

Da mesma forma, os atributos path, domain e secure de um cookie podem ser configurados ane- 
xando-se strings com o formato a seguir no valor do cookie, antes que esse valor seja gravado na 
propriedade cookie: 

; path=caminbo 
; domain =domlnio 
; secure 

Para mudar o valor de um cookie, configure seu valor novamente, usando os mesmos nome, cami- 
nho e dominio, junto com o novo valor. Voce pode alterar a vida util de um cookie ao mudar seu 
valor, especificando um novo atributo max-age. 

Para excluir um cookie, configure-o novamente usando os mesmos nome, caminho e dominio, espe¬ 
cificando um valor arbitrario (ou vazio) e um atributo max-age igual a 0. 

20.2.3 Lendo cookies 

Ao se usar a propriedade cookie em uma expressao JavaScript, o valor que ela retorna e uma string 
contendo todos os cookies que se aplicam ao documento atual. A string e uma lista de pares nome = 
valor separados uns dos outros por um ponto e virgula e um espa^o. O valor do cookie nao inclui os 
atributos que podem estar configurados para o cookie. Para usar a propriedade document.cookie, nor- 
malmente voce deve chamar o metodo split () a fim de decompo-la nos pares nome=valor individuals. 

Uma vez que tenha extraido o valor de um cookie da propriedade cookie, voce deve interpretar esse 
valor com base no formato ou na codifica^ao utilizada pelo criador do cookie. Voce poderia, por 
exemplo, passar o valor do cookie para decodellRIComponentQ e depois para JSON.parseQ. 

O Exemplo 20-1 define uma fun^ao getCookie( ) que analisa a propriedade document. cookie e retorna 
um objeto cujas propriedades especificam o nome e os valores dos cookies do documento. 

Exemplo 20-1 Analisando a propriedade document.cookies 

// Retorna os cookies do documento como um objeto de pares nome/valor. 

// Presume que os valores de cookie sao codificados com encodeURIComponent(). 
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function getCookiesQ { 
var cookies = {}; 
var all = document.cookie; 

if (all === "") 
return cookies; 
var list = all.split("; "); 
for(var i = 0; i < list.length; i++) { 
var cookie = list[i]; 
var p = cookie.indexOf("="); 
var name = cookie.substring(0,p); 
var value = cookie.substring(p+i); 
value = decodeURIComponent(value); 
cookies[name] = value; 

} 

return cookies; 


// 0 objeto que vamos retornar 

// Obtem todos os cookies em uma unica string 

// enorme 

// Se a propriedade e a string vazia 
// retorna urn objeto vazio 
// Decompoe em pares nome=valor individuais 
// Para cada cookie 

// Localiza o primeiro sinal = 

// Obtem o nome do cookie 
// Obtem o valor do cookie 
// Decodifica o valor 
// Armazena nome e valor no objeto 


20.2.4 Limita^oes dos cookies 

Os cookies se destinam a armazenar pequenos volumes de dados por meio de scripts do lado do 
servidor e esses dados sao transferidos para o servidor sempre que um URL relevante e solicitado. O 
padrao que define os cookies estimula os fabricantes de navegador a permitir mimeros ilimitados de 
cookies de tamanho irrestrito, mas nao exige que os navegadores mantenham mais de 300 cookies 
no total, 20 cookies por servidor Web ou 4 KB de dados por cookie (o nome e o valor contam para 
esse limite de 4 KB). Na pratica, os navegadores permitem muito mais do que 300 cookies no total, 
mas o limite de tamanho de 4 KB ainda pode ser imposto por alguns deles. 


20.2.5 Armazenamento com cookies 

O Exemplo 20-2 demonstra como implementar os metodos da API Storage sobre cookies. Passe 
os atributos max-age e caminho desejados para a construtora CookieStorageQ e, entao, use o objeto 
resultante como usaria localStorage ou session Storage. Note, contudo, que o exemplo nao imple- 
menta o evento de armazenamento e nao armazena e recupera valores automaticamente, quando 
voce configura e consulta propriedades do objeto CookieStorage. 

Exemplo 20-2 Implementando a API Storage usando cookies 

/* 

* CookieStorage.js 

* Esta classe implementa a API Storage que localStorage e sessionStorage 

* implementam, mas faz isso em cima de cookies HTTP. 

*/ 

function CookieStorage(maxage, path) { // 0s argumentos especificam vida util e escopo 

// Obtem um objeto que contem todos os cookies 

var cookies = (functionQ { //A funqao getCookiesQ mostrada anteriormente 

var cookies = {}; // 0 objeto que vamos retornar 

var all = document.cookie; // Obtem todos os cookies em uma unica string enorme 

if (all === "") // Se a propriedade e a string vazia 

return cookies; // retorna um objeto vazio 
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var list = all.split("; "); 


// Divide nos pares nome=valor individuals 
// Para cada cookie 


for(var i = 0; i < list.length; i++) { 
var cookie = list[i]; 
var p = cookie.indexOf("="); 
var name = cookie.substring(0,p); 
var value = cookie.substring(p+l); 
value = decodeURIComponent(value); 
cookies[name] = value; 


// Localiza o primeiro sinal = 


// Obtem o nome do cookie 
// Obtem o valor do cookie 
// Decodifica o valor 


// Armazena nome e valor 


} 

return cookies; 


}()); 


// Reune os nomes de cookie em um array 
var keys = []; 

for(var key in cookies) keys.push(key); 

// Agora define as propriedades e metodos publicos da API Storage 

// 0 numero de cookies armazenados 
this.length = keys.length; 

// Retorna o nome do n-esimo cookie ou null, caso n esteja fora do intervalo 
this.key = function(n) { 

if (n < 0 || n >= keys.length) return null; 
return keys[n]; 


}; 


// Retorna o valor do cookie nomeado ou null. 

this.getltem = function(name) { return cookies[name] |[ null; }; 

// Armazena um valor 

this.setltem = function(key, value) { 

if (I (key in cookies)) { // Se nao existe nenhum cookie com esse nome 

keys.push(key); // Adiciona key no array de keys 

this.length++; // E incrementa o comprimento 


} 


// Armazena esse par nome/valor no conjunto de cookies. 
cookies[key] = value; 

// Agora configura realmente o cookie. 

// Primeiramente, codifica o valor e cria uma string nome=valor-codificado 
var cookie = key + "=" + encodeURIComponent(value); 

// Adiciona atributos de cookie nessa string 
if (maxage) cookie += "; max-age=" + maxage; 
if (path) cookie += "; path=" + path; 

// Configura o cookie por meio da propriedade magica document.cookie 
document.cookie = cookie; 


}; 


// Remove o cookie especificado 
this.removeltem = function(key) { 

if (I(key in cookies)) return; // Se ele nao existe, nao faz nada 
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// Exclui o cookie de nosso conjunto interno de cookies 
delete cookies[key]; 

// E remove a chave do array de nomes tambem. 

// Isso seria mais facil com o metodo de array ES5 indexOfQ. 
for(var i = 0; i < keys.length; i++) { // Itera por todas as chaves 

if (keys[i] === key) { // Ouando encontrarmos a que queremos 

keys.splice(i,i); // Removemos do array. 

} 

} 

this.length--; // Decrementa o comprimento do cookie 

// Por fim, exclui realmente o cookie, fornecendo a ele urn valor vazio 
// e uma data de expiracao imediata. 
document.cookie = key + "=; max-age=0"; 


// Remove todos os cookies 
this.clear = function() { 

// Itera pelas chaves, removendo os cookies 
for(var i = 0; i < keys.length; i++) 

document.cookie = keys[i] + "=; max-age=0"; 
// Redefine nosso estado interno 
cookies = {}; 
keys = []; 
this.length = 0; 

}; 

} 


20.3 Persistence de userData do IE 


O IE5 e posteriores permitem armazenamento no lado do cliente anexando um “comportamento 
DHTML” patenteado em um elemento do documento. Isso pode ser feito com codigo como o 
seguinte: 


var memory = document.createElement("div"); 
memory.id = "jnemory"; 
memory.style.display = "none"; 

memory.style.comportamento = "url('#default#userData')"; 
document.body.appendChild(memory); 


// Cria um elemento 

// Da um nome a ele 

// Nunca o exibe 

// Anexa um comportamento magico 

// Adiciona-o no documento 


Uma vez que voce adicione o comportamento “userData” em um elemento, esse elemento recebe 
novos metodos load() e save(). Chame load() para carregar dados armazenados. Voce deve passar 
uma string para esse metodo - e como um nome de arquivo, identificando um lote de dados ar¬ 
mazenados em especial. Quando dados sao carregados, os pares nome/valor se tornam disponiveis 
como atributos do elemento e voce pode consulta-los com getAttributeQ. Para salvar dados novos, 
configure atributos com setAttributeQ e, entao, chame o metodo save(). Para excluir um valor, 
use removeAttributeQ e save(). Aqui esta um exemplo, usando o elemento memory inicializado an- 
teriormente: 


memory.load("myStoredData"); // Carrega um lote nomeado de dados salvos 

var name = memory.getAttribute("username"); // Obtem dados armazenados 
if (Iname) { // Se nao foram definidos 
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name = prompt("What is your name?); // Obtem entrada do usuario 

memory.setAtttribute(''username", name); // A configura como urn atributo 

memory.saveC'myStoredData''); // E a salva para a proxima vez 

} 

Por default, dados salvos com userData tem vida util indefinida e duram ate que sejam excluidos. 
Mas voce pode especificar uma data de expiragao configurando a propriedade expires. Por exemplo, 
voce poderia adicionar as linhas a seguir no codigo anterior, para especificar uma data de expiragao 
de 100 dias no futuro: 

var now = (new DateQ).getTimeQ; // Agora, em milissegundos 

var expires = now + 100 * 24 * 60 * 60 * 1000; // 100 dias a partir de agora, em ms 

expires = new Date(expires).toUTCStringQ; // Converte em uma string 

memory.expires = expires; // Configura a expiragao de userData 

O escopo de userData do IE sao os documentos do mesmo diretorio do documento que o configura. 
Esse e um escopo mais estreito do que os cookies, o que tambem torna os cookies disponiveis para 
documentos em subdiretorios do diretorio original. O mecanismo userData nao tem um equivalente 
para os atributos caminho e dominio de cookie para ampliar o escopo dos dados. 

userData permite armazenar muito mais dados do que os cookies, mas muito menos do que 
localStoragee sessionStorage. 

O Exemplo 20-3 implementa os metodos getltemQ, setltemQ e removeItem() da API Storage em 
cima de userData do IE. (Ele nao implementa key() nem clearQ porque userData nao define uma 
maneira de iterar por todos os itens armazenados.) 

Exemplo 20-3 Uma API Storage parcial, baseada em userData do IE 

function UserDataStorage(maxage) { 

// Cria um elemento de documento e instala nele o comportamento 

// especial userData para que obtenha metodos save() e loadQ. 

var memory = document.createElement("div"); // Cria um elemento 

memory.style.display = "none"; // Nunca o exibe 

memory.style.behavior = "url('#default#userData')"; // Anexa comportamento magico 

document.body.appendChild(memory); // Adiciona no documento 

// Se maxage e especificado, expira userData em maxage segundos 
if (maxage) { 

var now = new DateQ.getTimeQ; // A hora atual 

var expires = now + maxage * 1000 ; // maxage segundos a partir de agora 

memory.expires = new Date(expires).toUTCStringQ; 

} 

// Inicializa memory carregando valores salvos. 

// 0 argumento e arbitrario, mas tambem deve ser passado para saveQ 
memory.load("UserDataStorage''); // Carrega os dados armazenados 

this.getltem = function(key) { // Recupera valores salvos de atributos 

return memory.getAttribute(key) || null; 

}; 

this.setltem = function(key, value) { 

memory.setAttribute(key,value); // Armazena valores como atributos 
memory.save("UserDataStorage"); // Salva o estado apos qualquer alteracao 

}; 
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this.removeltem = -function(key) { 

memory.removeAttribute(key); // Remove atributo de valor armazenado 

memory.saveC'UserDataStorage"); // Salva o novo estado 

}; 

} 

Como o codigo do Exemplo 20-3 so funciona no IE, voce poderia usar comentarios condicionais do 
IE para impedir que navegadores diferentes o carreguem: 

<! —[if IE]> 

cscript src="UserDataStorage. js"x/script> 

<![endif]--> 

20.4 Armazenamento de aplicativo e aplicativos Web off-line 

HTML5 adiciona uma “cache de aplicativo” que os aplicativos Web podem usar para armazenarem a 
si mesmos de forma local no navegador do usuario. localStorage e sessionStorage armazenam dados 
de um aplicativo Web, mas a cache de aplicativo armazena o aplicativo em si - todos os arquivos 
(HTML, CSS, JavaScript, imagens, etc.) que o aplicativo precisa para executar. A cache de aplicativo 
e diferente da cache de navegador Web normal: ela nao e apagada quando o usuario limpa a cache 
normal. E os aplicativos que ficam na cache nao sao apagados com base no LRU (usado menos 
recentemente), como poderia acontecer com uma cache de tamanho fixo normal. Os aplicativos 
nao sao armazenados na cache temporariamente: eles sao instalado la e permanecem ali ate que eles 
mesmos se desinstalem ou o usuario os exclua. A cache de aplicativo nao e uma cache real: um nome 
melhor seria “armazenamento de aplicativo”. 

O motivo de instalar aplicativos Web de forma local e para garantir sua disponibilidade quando es- 
tiver off-line (como quando se esta em um aviao ou quando um telefone celular nao esta recebendo 
sinal). Os aplicativos Web que funcionam enquanto estao off-line se instalam sozinhos na cache de 
aplicativo, utilizam localStorage para armazenar seus dados e tern um mecanismo de sincroniza^ao 
para transferir dados armazenados para o servidor quando voltarem a estar online. Vamos ver um 
exemplo de aplicativo Web off-line na Seqao 20.4.3. Primeiramente, contudo, vamos ver como um 
aplicativo pode instalar a si mesmo na cache de aplicativo. 

20.4.1 0 manifesto de cache do aplicativo 

Para instalar um aplicativo na cache de aplicativo, voce precisa criar um manifesto: um arquivo lis- 
tando todos os URLs exigidos pelo aplicativo. Entao, basta vincular a pagina HTML principal de 
seu aplicativo ao manifesto, configurando o atributo manifest da tag <html>: 

<!D 0 CTYPE HTML> 

<html manifest="myapp.appcache"> 

<head>...</head> 

<body>...</body> 

</html> 

Os arquivos de manifesto devem come^ar com a string “CACHE MANIFEST” como sua primeira 
linha. As linhas seguintes devem listar os URLs a serem colocados na cache, um URL por linha. Os 
URLs relativos sao relativos ao URL do arquivo de manifesto. Linhas em branco sao ignoradas. Li¬ 
nhas que comefam com # sao comentarios e sao ignoradas. Os comentarios podem ter espa^o antes 
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deles, mas nao podem vir apos qualquer caractere que nao seja espago na mesma linha. Aqui esta um 
arquivo de manifesto simples: 

CACHE MANIFEST 

# A linha anterior identifica o tipo de arquivo. Esta linha e um comentario 

# As linhas a seguir especificam os recursos que o aplicativo precisa para executar 
myapp.html 

myapp.js 

myapp.css 

images/background.png 


Tipo MIME do manifesto de cache 

Por convengao, os arquivos de manifesto de cache de aplicativo recebem a extensao .appcache. Contudo, 
isso e apenas uma convengao e, para identificar o tipo de arquivo, o servidor Web deve ter um manifesto 
com tipo MIME "text/cache-manifest". Se o servidor configurar o cabegalho Content-Type do manifesto 
com qualquer outro tipo MIME, seu aplicativo nao vai ser colocado na cache.Talvez voce tenha que confi¬ 
gurar seu servidor Web para usar esse tipo MIME, por exemplo, criando um arquivo Apache .htaccess no 
diretorio de aplicativos Web. 


O arquivo de manifesto serve como identidade do aplicativo que esta na cache. Se um aplicativo 
Web tem mais de uma pagina (mais de um arquivo HTML a que o usuario pode se vincular), cada 
uma dessas paginas deve usar o atributo chtml manifesto para se vincular ao arquivo de manifesto. 
O fato de todas essas paginas se vincularem ao mesmo arquivo de manifesto torna claro que todas 
devem ser colocadas na cache juntas, como parte do mesmo aplicativo Web. Se existem apenas algu- 
mas paginas HTML no aplicativo, a convengao e lista-las explicitamente no arquivo de manifesto. 
Mas isso nao e obrigatorio: qualquer arquivo vinculado ao arquivo de manifesto sera considerado 
parte do apbcativo Web e sera colocado na cache junto com ele. 

Um manifesto simples como o que foi mostrado anteriormente deve listar todos os recursos exigi- 
dos pelo apbcativo Web. Uma vez que um aplicativo Web for baixado pela primeira vez e colocado 
na cache, qualquer carregamento subsequente sera feito a partir da cache. Quando um apbcativo 
e carregado a partir da cache, qualquer recurso que exija deve estar listado no manifesto. Recursos 
nao listados nao serao carregados. Essa politica Simula o estado off-line. Se um aplicativo simples 
colocado na cache pode ser executado a partir de la, tambem pode ser executado enquanto o 
navegador esta off-line. Em geral, os aplicativos Web mais complicados nao podem colocar na 
cache todos os recursos que exigem. Eles ainda podem usar a cache de aplicativo se tiverem um 
manifesto mais complexo. 

20.4.1.1 Manifestos complexos 

Quando um aplicativo for carregado a partir da cache de aplicativo, somente os recursos listados 
em seu arquivo de manifesto serao carregados. O exemplo de arquivo de manifesto mostrado ante¬ 
riormente lista os recursos um URL por vez. Na verdade, os arquivos de manifesto tem uma sintaxe 
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mais complicada do que esse exemplo mostra e existem duas outras maneiras de listar recursos em 
um arquivo de manifesto. Linhas especiais de cabepalho de sepao sao usadas para identificar o tipo 
de entrada de manifesto que vem apos o cabepalho. Entradas de cache simples como aquelas mos- 
tradas anteriormente fleam em uma sepao “CACHE:”, que e a sepao padrao. As outras duas sepoes 
comefam com os cabepalhos “NETWORK:” e “FALLBACK:”. (Um manifesto pode ter qualquer 
numero de sepoes e alternar entre elas conforme for necessario.) 

A sepao “NETWORK:” especifica URLs que nunca devem ser colocados na cache e sempre devem 
ser recuperados da rede. Voce poderia listar scripts do lado do servidor aqui, por exemplo. Os URLs 
em uma sepao “NETWORK:” sao na verdade prefixos de URL. Um recurso cujo URL comece com 
qualquer um desses prefixos sera carregado da rede. Se o navegador estiver off-line, essa tentativa 
vai falhar, evidentemente. A sepao “NETWORK:” permite um curinga URL Se voce usar esse 
curinga, o navegador vai tentar carregar da rede qualquer recurso nao mencionado no manifesto. 
Isso anula efetivamente a regra que diz que os aplicativos colocados na cache devem listar todos os 
seus recursos no manifesto. 

As entradas de manifesto na sepao “FALLBACK:” incluem dois URLs em cada linha. O segundo 
URL e carregado e armazenado na cache. O primeiro URL e um prefixo. Os URLs correspondentes 
a esse prefixo nao serao colocados na cache, mas vao ser carregados da rede, quando possfvel. Se a ten¬ 
tativa de carregar um URL assim falha, o recurso especificado pelo segundo URL colocado na cache 
sera usado em seu lugar. Imagine um aplicativo Web contendo varios tutoriais em video. Como esses 
videos sao muito grandes, nao sao adequados para colocar na cache de forma local. Para uso off-line, 
um arquivo de manifesto poderia recorrer, em vez disso, a um arquivo de ajuda baseado em texto. 

Aqui esta um manifesto de cache mais complicado: 

CACHE MANIFEST 

CACHE: 

myapp.html 

myapp.css 

myapp.js 

FALLBACK: 

videos/offline_help.html 

NETWORK: 

cgi/ 

20.4.2 Atualiza^oesde cache 

Quando um aplicativo Web colocado na cache e carregado, todos os seus arquivos vem diretamente 
da cache. Se o navegador estiver online, tambem vai verificar de forma assfnerona se o arquivo de 
manifesto mudou. Se tiver mudado, o novo arquivo de manifesto e todos os arquivos a que ele faz 
referenda sao baixados e reinstalados na cache de aplicativo. Note que o navegador nao verifica se 
algum dos arquivos da cache mudou - somente o manifesto. Se voce modifica um arquivo JavaScript 
colocado na cache, por exemplo, e quer fazer com que os sites que colocaram seu aplicativo Web na 
cache a atualizem, deve atualizar o manifesto. Como a lista de arquivos exigidos por seu aplicativo 
nao mudou, o modo mais facil de fazer isso e atualizando um numero de versao: 
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CACHE MANIFEST 

# MyApp versao l (altere este numero para fazer os navegadores baixarem os arquivos 

# novamente) 

MyApp.html 
MyApp.js 

Da mesma forma, se quiser que um aplicativo Web se desinstale sozinho da cache de aplicativo, 
voce deve excluir o arquivo de manifesto no servidor para que pedidos feitos a ele retornem um erro 
HTTP 404 Not Found e deve modificar seu arquivo (ou arquivos) HTML para que nao esteja mais 
vinculado ao manifesto. 

Note que o navegador verifica o manifesto e atualiza a cache de forma assincrona, apos (ou enquan- 
to) carregar a copia de um aplicativo que esta na cache. Para aplicativos Web simples, isso significa 
que, depois de voce atualizar o manifesto, o usuario deve carregar o aplicativo duas vezes antes de 
ver a nova versao: a primeira carrega a versao antiga da cache e, em seguida, atualiza a cache. Entao, 
a segunda carrega a nova versao da cache. 

O navegador dispara varios eventos durante o processo de atualiza^ao da cache e voce pode registrar 
rotinas de tratamento para monitorar o processo e fornecer feedback para o usuario. Por exemplo: 

applicationCache.onupdateready = -function() { 

var reload = confirm("A new version of this application is available\n" + 

"and will be used the next time you reload.\n" + 

"Do you want to reload now?"); 
if (reload) location.reloadQ; 

} 

Note que essa rotina de tratamento de evento e registrada no objeto ApplicationCache que e o valor 
da propriedade applicationCache do objeto Window. Os navegadores que suportam uma cache de 
aplicativo vao definir essa propriedade. Alem do evento updateready mostrado anteriormente, exis- 
tem sete outros eventos de cache de aplicativo que podem ser monitorados. O Exemplo 20-4 mostra 
rotinas de tratamento simples que exibem mensagens para o usuario informando sobre o andamento 
da atualiza^ao da cache e sobre o status atual da cache. 

Exemplo 20-4 Tratando de eventos da cache de aplicativo 

// Todas as rotinas de tratamento de evento a seguir utilizam esta funqao para exibir 
// mensagens de status. 

// Como todas as rotinas de tratamento exibem mensagens de status dessa maneira, elas 
// retornam false 

// para cancelar o evento e impedir que o navegador exiba seu proprio status, 
function status(msg) { 

// Exibe a mensagem no elemento do documento com identificacao "statusline" 
document.getElementById("statusline").innerHTML = msg; 
console.log(msg);// E tambem na console de depuracao 

} 


// Sempre que o aplicativo e carregado, ele verifica seu arquivo de manifesto. 
// 0 evento checking e sempre disparado primeiro, quando esse processo comeca. 
window.applicationCache.onchecking = function() { 
status(''Checking for a new version."); 
return false; 

}; 


Se o arquivo de manifesto nao mudou e o aplicativo ja esta na cache, 
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// o evento noupdate e disparado e o processo termina. 
window.applicationCache.onnoupdate = functionQ { 
status("This version is up-to-date.") 
return false; 

H 

// Se o aplicativo ainda nao esta na cache ou se o manifesto mudou, 

// o navegador baixa e coloca na cache tudo que estiver listado no manifesto. 

// 0 evento downloading sinaliza o inicio desse processo de download, 
window.applicationCache.ondownloading = functionQ { 
status("Downloading new version"); 

window.progresscount = 0; // Usado na rotina de tratamento de progress a seguir 

return false; 

}; 

// Os eventos progress sao disparados periodicamente durante o processo de download, 

// normalmente uma vez para cada arquivo baixado. 
window.applicationCache.onprogress = function(e) { 

// 0 objeto evento deve ser um evento progress (como aqueles usados pela XHR 2 ) 

// que nos permita calcular uma porcentagem de conclusao, mas se nao for, 

// mantemos a contagem de quantas vezes fomos chamados. 
var progress = ""; 

if (e && e.lengthComputable) // Evento progress: calcula a porcentagem 
progress = " " + Math.round(l00*e.loaded/e.total) + 
else // Caso contrario, relata o ns de vezes que foi chamado 

progress = " (" + ++progresscount + ")" 

status("Downloading new version" + progress); 
return false; 

h 

// Na primeira vez que um aplicativo e baixado na cache, o navegador 
// dispara o evento cached quando o download tiver terminado. 
window.applicationCache.oncached = function() { 

status("This application is now cached locally"); 
return false; 

}; 

// Ouando um aplicativo que ja esta na cache e atualizado e o download esta concluido, 

// o navegador dispara "updateready". Note que o usuario ainda vai ver 
// a versao antiga do aplicativo quando este evento chegar. 
window.applicationCache.onupdateready = functionQ { 

status("A new version has been downloaded. Reload to run it"); 
return false; 

it 

// Se o navegador esta off-line e o manifesto nao pode ser verificado, um evento "error" 
// e disparado. Isso tambem acontece se um aplicativo que nao esta na cache faz 
// referencia a um arquivo de manifesto que nao existe 
window.applicationCache.onerror = functionQ { 

status("Couldn't load manifest or cache application"); 
return false; 

h 

// Se um aplicativo colocado na cache faz referencia a um arquivo de manifesto que nao 
// existe, um evento obsolete e disparado e o aplicativo e removido da cache. 
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// Os carregamentos subsequentes sao feitos a partir da rede, em vez da cache, 
window.applicationCache.onobsolete = functionQ { 

status("This application is no longer cached. " + 

"Reload to get the latest version from the network."); 
return false; 

}; 

Sempre que um arquivo HTML com um atributo manifest e carregado, o navegador dispara um 
evento checking e carrega o arquivo de manifesto da rede. Os eventos que seguem o evento checking 
sao diferentes em diferentes situates: 

Ndo ha atualizagao disponivel 

Se o aplicativo ja esta na cache e o arquivo de manifesto nao mudou, o navegador dispara um 
evento noupdate. 

Atualizagao disponivel 

Se um aplicativo esta na cache e seu arquivo de manifesto mudou, o navegador dispara um 
evento downloading e come^a a baixar e a colocar na cache todos os arquivos listados no mani¬ 
festo. A medida que esse download ocorre, ele dispara eventos progress. E quando o download 
termina, ele dispara um evento updateready. 

Primeiro carregamento de um novo aplicativo 

Se o aplicativo ainda nao esta na cache, eventos downloading e progress sao disparados, como 
acontece no caso da atualiza^ao da cache anterior. Contudo, quando esse download inicial 
termina, o navegador dispara um evento cached, em vez de um evento updateready. 

O navegador esta off-line 

Se o navegador esta off-line, ele nao pode verificar o manifesto e dispara um evento error. 
Isso tambem acontece quando um aplicativo que ainda nao esta na cache faz referenda a um 
arquivo de manifesto que nao existe. 

Manifesto ndo encontrado 

Se o navegador esta online e o aplicativo ja esta na cache, mas o arquivo de manifesto retorna o 
erro 404 Not Found, ele dispara um evento obsolete e remove o aplicativo da cache. 

Note que todos esses eventos podem ser cancelados. As rotinas de tratamento no Exemplo 20-4 
retornam false para cancelar a a?ao padrao associada aos eventos. Isso evita que os navegadores 
exibam suas proprias mensagens de status da cache. (Quando este livro estava sendo escrito, os nave¬ 
gadores nao exibiam tais mensagens.) 

Como uma alternativa as rotinas de tratamento de evento, um aplicativo tambem pode usar a pro- 
priedade applicationCache.status para determinar o status da cache. Existem seis valores possrveis 
para essa propriedade: 

ApplicationCache.UNCACHED (0) 

Esse aplicativo nao tern um atributo manifest: ele nao esta na cache. 

ApplicationCache.IDLE (l) 

O manifesto foi verificado e esse aplicativo esta na cache e atualizado. 
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ApplicationCache.CHECKING (2) 

O navegador esta verificando o arquivo de manifesto. 

ApplicationCache.DOWNLOADING (3) 

O navegador esta baixando e colocando na cache os arquivos listados no manifesto. 

ApplicationCache.UPDATEREADY (4) 

Uma nova versao do aplicativo foi baixada e colocada na cache. 

ApplicationCache.OBSOLETE (5) 

O manifesto nao existe mais e a cache sera excluida. 

O objeto ApplicationCache tambem define dois metodos. update () chama explicitamente o algorit- 
mo de atualiza^ao de cache para procurar uma nova versao do aplicativo. Isso faz o navegador passar 
pela mesma verifica^ao de manifesto (e disparar os mesmos eventos) que faz quando um aplicativo 
e carregado pela primeira vez. 

O metodo swapCache() e mais complicado. Lembre-se de que, quando o navegador baixa e coloca na 
cache uma versao atualizada de um aplicativo, o usuario ainda esta executando a versao desatualiza- 
da. Se o usuario recarregar o aplicativo, vera a nova versao. Mas se o usuario nao recarregar, a versao 
antiga ainda deve executar corretamente. E observe que a versao antiga ainda pode estar carregando 
recursos da cache: pode estar usando XMLHttpRequest para solicitar arquivos, por exemplo, e esses 
pedidos devem ser atendidos pelos arquivos da versao antiga da cache. Portanto, o navegador geral- 
mente deve manter a versao antiga da cache ate que o usuario recarregue o aplicativo. 

O metodo swapCacheQ diz ao navegador que pode descartar a cache antiga e atender a qualquer 
pedido futuro a partir da nova cache. Note que isso nao recarrega o aplicativo: arquivos HTML, 
imagens, scripts, etc., que ja foram carregados, nao sao alterados. Mas qualquer pedido futuro vai ser 
proveniente da nova versao da cache. Isso pode causar problemas de assimetria de versao e geralmen- 
te nao e uma boa ideia, a nao ser que seu aplicativo seja cuidadosamente projetado para permitir isso. 
Imagine, por exemplo, um aplicativo que nao faz nada alem de exibir uma tela de abertura de algum 
tipo, enquanto o navegador esta verificando o manifesto. Quando ele ve o evento noupdate, vai em 
frente e carrega a pagina inicial do aplicativo. Se ve um evento downloading, ele exibe o feedback de 
andamento apropriado, enquanto a cache e atualizada. E quando recebe um evento updateready, ele 
chama swapCache () e, em seguida, carrega a pagina inicial atualizada da versao mais recente da cache. 

Note que so faz sentido chamar swapCacheQ quando a propriedade status tern o valor Application- 
Cache. UPDATEREADY ou ApplicationCache.OBSOLETE. (Chamar swapCacheQ quando status e OBSOLETE 
descarta a cache obsoleta imediatamente e atende a todos os futures pedidos por meio da rede.) Se 
voce chamar swapCacheQ quando status tiver qualquer outre valor, vai disparar uma exce^ao. 

20.4.3 Aplicativos Web off-line 

Um aplicativo Web off-line e aquele que instala a si mesmo na cache de aplicativo para que esteja 
sempre disponivel, mesmo quando o navegador estiver off-line. Para os casos mais simples - coisas 
como relogios e geradores de fractal - isso e tudo que um aplicativo Web precisa para se tornar um 
aplicativo off-line. Mas a maioria dos aplicativos Web tambem precisa carregar dados no servidor: 
mesmo aplicativos de jogos simples talvez queiram carregar a pontua?ao do usuario no servidor. 
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Os aplicativos que precisam carregar dados em um servidor podem ser aplicativos Web off-line se 
usarem localStorage para armazenar dados e entao carregarem esses dados quando uma conexao de 
Internet estiver disponfvel. A sincronizaqao de dados entre o armazenamento local e o servidor pode 
ser a parte mais dificil da conversao de um aplicativo Web para uso off-line, especialmente quando o 
usuario pode acessar os dados a partir de mais de um dispositivo. 

Para funcionar off-line, um aplicativo Web precisa saber se esta off-line ou online e quando o estado 
da conexao de Internet muda. Para verificar se o navegador esta online, um aplicativo Web pode usar 
a propriedade navigator.onLine. E para detectar mudanfas no estado da conexao, ele pode registrar 
rotinas de tratamento para eventos online e off-line no objeto Window. 

Este capftulo termina com um aplicativo Web off-line simples que demonstra essas tecnicas. O apli¬ 
cativo se chama PermaNote - e um aplicativo de anota^ao simples que salva o texto do usuario em 
localStorage e o carrega no servidor quando uma conexao de Internet esta disponfvel . O aplicativo 
PermaNote permite que o usuario edite apenas uma anota^ao e ignora questoes de autoriza?ao e 
autentica^ao - ele presume que o servidor tern algum modo de distinguir um usuario de outro, 
mas nao inclui qualquer tipo de tela de login. A implementa?ao de PermaNote consiste em tres 
arquivos. O Exemplo 20-5 e o manifesto da cache. Ele lista os outros dois arquivos e especifica que 
o URL “note” nao deve ser colocado na cache: esse e o URL que usamos para ler e gravar a anota^ao 
no servidor. 

Exemplo 20-5 permanote.appcache 

CACHE MANIFEST 
# PermaNote v8 
permanote.html 
permanote.js 
NETWORK: 

O Exemplo 20-6 e o segundo arquivo de PermaNote: trata-se de um arquivo HTML que define 
uma interface com o usuario para um editor muito simples. Ela exibe um elemento <textarea> com 
uma fileira de botoes na parte superior e uma linha de status para mensagens ao longo da parte infe¬ 
rior. Observe que a tag <html> tern um atributo manifest. 

Exemplo 20-6 permanote.html 
<IDOCTYPE HTML> 

<html manifest="permanote.appcache"> 

<head> 

<title>PermaNote Editor</title> 
cscript src="permanote.js"x/script> 

<style> 

#editor { width: 100%; height: 250px; } 

#statusline { width: 100%; } 

</style> 


Esse exemplo foi livremente inspirado no Halfnote, de Aaron Boodman. O Halfnote foi um dos primeiros aplicativc 
Web off-line. 
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</head> 

<body> 

<div id="toolbar"> 

<button id="savebutton" onclick="save()">Save</button> 

<button onclick="sync()">Sync Note</button> 

<button onclick="applicationCache.update()">Update Application</button> 

</div> 

ctextarea id="editor"x/textarea> 

<div id="statusline"x/div> 

</body> 

</html> 

Por fim, o Exemplo 20-7 lista o codigo JavaScript que faz o aplicativo Web PermaNote funcionar. 
Ele define uma funpio status() para exibir mensagens na linha de status, uma funpio save() para 
salvar a versao atual da anotapio no servidor e uma funpio sync() para garantir que a copia do ser- 
vidor e a copia local estejam sincronizadas. As funpies save() e sync() utilizam tecnicas de scripts 
HTTP do Capitulo 18. (Curiosamente, a funpio save() usa o metodo HTTP “PUT”, em vez do 
metodo POST, muito mais comum.) 

Alem dessas tres fun pies basicas, o Exemplo 20-7 define rotinas de tratamento de evento. Para man- 
ter a copia local e a copia do servidor da anota?ao sincronizadas, o aplicativo exige muitas rotinas de 
tratamento de evento: 

onload 

Tenta sincronizar com o servidor, no caso de haver uma versao mais recente da anota?ao la e, 
quando a sincronizapio esta concluida, habilita a janela do editor. 

As fun^oes save() e sync() fazem requisites HTTP e registram uma rotina de tratamento de 
onload no objeto XMLHttpRequest para serem notificadas quando o upload ou download 
estiver concluido. 

onbeforeunload 

Salva a versao atual da anota?ao no servidor, caso nao tenha sido carregada. 
oninput 

Quando o texto em <textarea> muda, salva-o em localStorage e inicia um timer. Se o usuario 
para de editar por 5 segundos, salva a anota?ao no servidor. 

onoffline 

Quando o navegador fica off-line, exibe uma mensagem na linha de status, 
ononline 

Quando o navegador volta a ficar online, sincroniza com o servidor, procurando uma versao 
mais recente e salvando a versao atual. 

onupdateready 

Se uma nova versao do aplicativo colocado na cache esta pronta, exibe uma mensagem na 
linha de status para permitir que o usuario saiba disso. 
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onnoupdate 

Se a cache de aplicativo nao mudou, permite que o usuario saiba que esta executando a versao 


Com essa visao geral da logica dirigida por eventos de PermaNote, aqui esta o Exemplo 20-7. 

Exemplo 20-7 permanote.js 

// Algumas variaveis que precisaremos 

var editor, statusline, savebutton, idletimer; 

//A primeira vez que o aplicativo carrega 
window.onload = functionQ { 

// Inicializa o armazenamento local se essa e a primeira vez 
if (localStorage.note == null) localStorage.note = ""; 
if (localStorage.lastModified == null) localStorage.lastModified = 0; 
if (localStorage.lastSaved == null) localStorage.lastSaved = o; 

// Localiza os elementos que sao a interface com o usuario do editor. Inicializa 
// variaveis globais. 

editor = document.getElementById("editor"); 
statusline = document.getElementById("statusline"); 
savebutton = document.getElementById("savebutton"); 

editor.value = localStorage.note; // Inicializa o editor com anotacao salva 
editor.disabled = true; // Mas nao permite editar ate que sincronizemos 

// Ouando ha entrada em textarea 
editor.addEventListener("input", 

function (e) { 

// Salva o novo valor em localStorage 
localStorage.note = editor.value; 
localStorage.lastModified = Date.nowQ; 

// Zera o timer de ociosidade 
if (idletimer) clearTimeout(idletimer); 
idletimer = setTimeout(save, 5000); 

// Habilita o botao salvar 
savebutton.disabled = false; 

}> 

false); 

// Sempre que o aplicativo e carregado, tenta sincronizar com o servidor 
sync(); 


// Salva no servidor antes de sair da pagina 
window.onbeforeunload = functionQ { 

if (localStorage.lastModified > localStorage.lastSaved) 
save(); 

}; 

// Se ficamos off-line, permite que o usuario saiba 
window.onoffline = functionQ { status("Offline"); } 

// Ouando voltamos a estar online novamente, sincroniza. 
window.ononline = functionQ { syncQ; }; 
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// Notifica o usuario se existir uma nova versao desse aplicativo disponivel. 

// Tambem poderiamos forqar uma recarga aqui, com location.reload() 
window.applicationCache.onupdateready = functionQ { 

status("A new version of this application is available. Reload to run it”); 

}; 

// Alem disso, permite que o usuario saiba que nao ha uma nova versao disponivel. 
window.applicationCache.onnoupdate = functionQ { 

status("You are running the latest version of the application."); 

}; 

// Uma funcao para exibir uma mensagem de status na linha de status 
function status(msg) { statusline.innerHTML = msg; } 

// Carrega o texto da anotaqao no servidor (se estivermos online). 

// Sera chamado automaticamente apos 5 segundos de inatividade, quando 
// a anotaqao for modificada. 
function saveQ { 

if (idletimer) clearTimeout(idletimer); 
idletimer = null; 

if (navigator.onLine) { 

var xhr = new XMLHttpRequestQ; 
xhr.open("PUT"j "/note"); 
xhr.send(editor.value); 
xhr.onload = functionQ { 

localStorage.lastSaved = Date.nowQ; 
savebutton.disabled = true; 

}; 

} 

} 

// Procura uma nova versao da anotaqao no servidor. Se nao for encontrada 
// uma versao mais recentej salva a versao atual no servidor. 
function syncQ { 

if (navigator.onLine) { 

var xhr = new XMLHttpRequestQ; 
xhr.open("GET"j "/note"); 
xhr.sendQ; 

xhr.onload = functionQ { 
var remoteModTime = 0; 
if (xhr.status == 200) { 

var remoteModTime = xhr.getResponseHeader("Last-Modified"); 
remoteModTime = new Date (remoteModTime) .getTimeQ; 

} 

if (remoteModTime > localStorage.lastModified) { 
status("Newer note found on server."); 

confirm("There is a newer version of the note\n" + 

"on the server. Click Ok to use that version\n"+ 

"or click Cancel to continue editing this\n"+ 
"version and overwrite the server"); 
var now = Date.nowQ; 
if (useit) { 

editor.value = localStorage.note = xhr.responseText; 
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localStorage.lastSaved = now; 
status("Newest version downloaded."); 

} 

else 

status("Ignoring newer version of the note."); 
localStorage.lastModified = now; 

} 

else 


status("You are editing the current version of the note."); 

if (localStorage.lastModified > localStorage.lastSaved) { 
saveQ; 

} 


editor.disabled = false; // Habilita o editor novamente 
editor.focus(); // E coloca o cursor nele 

} 

} 

else { // Se estamos off-line, nao podemos sincronizar 

status("Can't sync while offline"); 
editor.disabled = false; 
editor. focusQ; 

} 

} 



Capitulo 21 


Mfdia e graficos em scripts 


Este capitulo descreve como usar JavaScript para manipular imagens, controlar fluxos de audio e vi¬ 
deo e desenhar elementos graficos. A Secjao 21.1 explica tecnicas JavaScript tradicionais para efeitos 
visuais, como trocas de imagem nas quais uma imagem estatica e substituida por outra quando o 
cursor do mouse e colocado sobre ela. A Secjao 21.2 aborda os elementos HTML5 <audio> e <video> 
e suas APIs JavaScript. 

Depois dessas duas primeiras se^oes sobre imagens, audio e video, o capitulo passa a abordar duas 
poderosas tecnologias para desenhar elementos graficos no lado do cliente. A capacidade de gerar 
dinamicamente elementos graficos sofisticados no navegador e importante por varios motivos: 

• O codigo usado para produzir elementos graficos no lado do cliente normalmente e muito 
menor do que as imagens em si, gerando economias de largura de banda substanciais. 

• A gerafao dinamica de elementos graficos a partir de dados em tempo real utiliza muitos ciclos 
de CPU. Transferir essa tarefa para o cliente reduz a carga no servidor, possivelmente dimi- 
nuindo os custos com hardware. 

• Gerar elementos graficos no cliente esta de acordo com a arquitetura moderna de aplicativo 
Web, na qual os servidores fornecem dados e os clientes gerenciam a apresentafao desses dados. 

A Se<jao 21.3 explica a Scalable Vector Graphics ou SVG. A SVG e uma linguagem baseada em 
XML usada para descrever elementos graficos, sendo que os desenhos em SVG podem ser criados 
e colocados em scripts usando-se JavaScript e DOM. Por fim, a Secjao 21.4 aborda o elemento 
HTML5 <canvas> e sua API JavaScript completa para desenhos no lado do cliente. O elemento 
<canvas> e uma tecnologia revolucionaria, e este capitulo o aborda em detalhes. 

21.1 Escrevendo scripts de imagens 

As paginas Web incluem imagens usando o elemento HTML <img>. Assim como todos os elementos 
HTML, um elemento <img> pode ser colocado em um script: configurar a propriedade src com um 
novo URL faz o navegador carregar (se necessario) e exibir uma nova imagem. (Voce tambem pode 
colocar em um script a largura e a altura de uma imagem, o que vai fazer o navegador reduzir ou 
ampliar a imagem, mas essa tecnica nao esta demonstrada aqui.) 
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A capacidade de substituir dinamicamente uma imagem por outra em um documento HTML abre 
a possibilidade de varios efeitos especiais. Um uso comum da substituiqao de imagem e a implemen- 
ta^ao de troca de imagens, na qual uma imagem muda quando o cursor do mouse e colocado sobre 
ela. Quando voce torna possivel clicar em imagens, colocando-as dentro de seus hiperlinks, os efeitos 
de troca sao uma maneira poderosa de convidar o usuario a clicar na imagem. (Efeitos semelhantes 
podem ser obtidos sem scripts, usando-se a pseudoclasse CSS : hover para alterar a imagem de fundo 
de um elemento.) O fragmento de HTML a seguir e um exemplo simples: ele cria uma imagem que 
muda quando o mouse e colocado sobre ela: 

<img src="images/help.gif" 

onmouseover="this.src='images/help_rollover.gif 
onmouseout="this.src='images/help.gif "’> 

As rotinas de tratamento de evento do elemento <img> configuram a propriedade src quando o mou¬ 
se e colocado ou retirado da imagem. As trocas de imagens sao fortemente associadas a capacidade 
de clicar, de modo que esse elemento <img> ainda deve ser incluido em um elemento <a> ou receber 
uma rotina de tratamento de evento on click. 

Para serem uteis, as trocas de imagens (e efeitos semelhantes) precisam ser responsivas. Isso significa 
que voce precisa de alguma maneira de garantir que as imagens necessarias sejam “buscadas previa- 
mente” na cache do navegador. JavaScript do lado do cliente define uma API de proposito especial 
para isso: obrigar uma imagem a ser colocada na cache, criar um objeto Image fora da tela usando a 
construtora ImageQ. Em seguida, carregar uma imagem nele, configurando a propriedade src desse 
objeto com o URL desejado. Essa imagem nao e adicionada ao documento, de modo que nao se tor¬ 
na visivel, mas o navegador carrega os dados da imagem e os coloca na cache. Em seguida, quando 
o mesmo URL for usado para uma imagem na tela, ela podera ser carregada rapidamente a partir da 
cache do navegador, em vez de ser carregada lentamente pela rede. 

O trecho de codigo de troca de imagem mostrado na seQo anterior nao buscava previamente a ima¬ 
gem de troca que utilizava, de modo que o usuario poderia notar um atraso no efeito na primeira vez 
que colocasse o mouse sobre a imagem. Para corrigir esse problema, modifique o codigo como segue: 

<script>(new Image()).src = "images/help_rollover.gif";</script> 

<img src="images/help.gif" 

onmouseover="this.src='images/help_rollover.gif 
onmouseout="this.src='images/help.gif "’> 

21.1.1 Trocas nao obstrusivas de imagens 

O codigo de troca de imagens que acabamos de mostrar exibe um elemento <script> e dois atributos 
de rotina de tratamento de evento JavaScript para implementar um unico efeito de troca. Esse e um 
exemplo perfeito de JavaScript obstrusiva : o volume de codigo JavaScript e tao grande que torna 
a HTML ininteligivel. O Exemplo 21-1 mostra uma alternativa nao obstrusiva que permite criar 
trocas de imagens simplesmente especificando um atributo data-rollover (consulte a SeQo 15.4.3) 
em qualquer elemento <img>. Note que esse exemplo usa a funQo onLoad() do Exemplo 13-5. Usa 
tambem o array document .images [] (consulte a Secjao 15.2.3) para localizar todos os elementos <img> 
no documento. 
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Exemplo 21-1 Trocas nao obstrusivas de imagens 

/** 

* rollover.js: trocas nao obstrusivas de imagens discretas. 

* Para criar trocas de imagens, inclua este modulo em seu arquivo HTML e 

* use o atributo data-rollover em qualquer elemento <img> para especificar o URL da 

* imagem de troca. Por exemplo: 

* <img src="normal_image.png" data-rollover="rollover_image.png"> 

* Note que esse modulo exige onLoad.js 

onLoad(function() { // Tudo em uma unlca funcao anonima: nenhum simbolo definido 

// Itera por todas as imagens, procurando o atributo data-rollover 
for(var i = 0; i < document.images.length; i++) { 
var img = document.images[i]; 
var rollover = img.getAttribute("data-rollover"); 
if (irollover) continue; // Pula as imagens sem data-rollover 

// Garante que a imagem de troca esteja na cache 
(new Image()).src = rollover; 

// Define urn atributo para lembrar o URL da imagem padrao 
img.setAttribute("data-rollout", img.src); 

// Registra as rotinas de tratamento de evento que criam o efeito de troca 
img.onmouseover = functionQ { 

this.src = this.getAttribute("data-rollover"); 

}; 

img.onmouseout = functionQ { 

this.src = this.getAttribute("data-rollout"); 

}; 

} 

}); 

21.2 Escrevendo scripts de audio e video 

HTML5 introduz elementos <audio> e <video> que, teoricamente, sao tao faceis de usar como o ele¬ 
mento <img>. Nos navegadores habilitados para HTML5, voce nao precisa mais usar plug-ins (como 
o Flash) para incorporar sons e filmes em seus documentos HTML: 

<audio src="background_music.mp3"/> 
cvideo src="news.mov" width=320 height=240/> 

Na pratica, o uso desses elementos e mais complicado do que isso, pois os fornecedores de navegador 
nao concordaram com um codec de audio e video padrao que todos suportassem, de modo que voce 
normalmente acaba usando elementos <source> para especificar varias fontes de midia em diferentes 
formatos: 

<audio id="music"> 

csource src="music.mp3" type="audio/mpeg"> 

csource src=”music.ogg” type=’audio/ogg; codec=”vorbis”’> 

</audio> 
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Note que os elementos <source> nao tem conteudo: nao ha tag </source> de fechamento e nao e 
preciso termina-los com /> 

Os navegadores que suportam elementos <audio> e <video> nao vao renderizar o conteudo desse ele- 
mento. Mas os navegadores que nao os suportam renderizam o conteudo, de modo que voce pode 
colocar conteudo de apoio (como um elemento <object> que chame o plug-in Flash) dentro: 

cvideo id="news" width=640 height=480 controls preload> 

<!-- Formato WebM para Firefox e Chrome --> 

csource src="news.webm" type='video/webm; codecs="vp8, vorbis'"> 

<!-- Formato FI. 264 para IE e Safari --> 

csource src="news.mp4" type='video/mp4; codecs="avcl.42E0lE, mp4a.40.2'"> 

<!-- Recorre ao plugin Flash --> 

cobject width=640 height=480 type="application/x-shockwave-flash" 
data="flash_movie_player.swf''> 

<!-- Os elementos Param aqui configuram 0 reprodutor de filmes Flash que voce esta 

usando --> 

<!-- Texto e 0 ultimo conteudo de apoio --> 

<div>video element not supported and Flash plugin not installed.</div> 

</object> 

</video> 

Os elementos <audio> e <video> suportam um atributo controls. Se estiverem presentes (ou se a 
propriedade JavaScript correspondente estiver configurada como true), eles exibem um conjunto 
de controles de reprodufao que inclui botoes play e pause, um controle de volume, etc. Alem 
disso, no entanto, os elementos <audio> e <video> expoem uma API que proporciona aos scripts 
o poder de controlar reprodufao de mfdia, sendo que voce pode usar essa API para adicionar 
efeitos sonoros simples em seu aplicativo Web ou para criar seus proprios paineis de controle 
personalizados para som e video. Embora suas aparencias visuais sejam muito diferentes, os ele¬ 
mentos <audio> e <video> compartilham basicamente a mesma API (a unica diferen^a real entre 
eles e que o elemento <video> tem propriedades width e height) e quase tudo que vem apos esta 
segao se aplica aos dois elementos. 


A construtora Audio() 

Os elementos <audio> nao tem uma aparencia visual no documento, a nao ser que voce configure 0 atri¬ 
buto controls. E assim como voce pode criar uma imagem fora da tela com a construtora Image(), a API 
de midia de HTML5 permite criar um elemento audio fora da tela com a construtora AudioQ, passando 
um URL de origem como argumento: 

new Audio("chime.wav").play(); // Carrega e reproduz um efeito sonoro 

0 valor de retorno da construtora Audio() e 0 mesmo tipo de objeto que voce obteria ao consultar um ele¬ 
mento <audio> do documento ou ao criar um novo com document.createElement("audio"). Note que 
esse e um recurso da API de midia apenas para audio: nao ha uma construtora Video() correspondente. 


Apesar do requisito frustrante de definir midia em varios formatos de arquivo, a capacidade de 
reproduzir audio e video de forma nativa no navegador, sem o uso de plug-ins, e um novo recurso 
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poderoso de HTML5. Note que o problema dos codecs de mi'dia e de compatibilidade de navegador 
esta fora dos objetivos deste livro. As subsegoes a seguir enfocam apenas a API JavaScript para traba- 
lhar com fluxos de audio e video. 

21.2.1 Sele^ao e carregamento de tipos 

Se quiser testar se um elemento midia pode reproduzir um tipo de midia em especial, passe o 
tipo MIME media (possivelmente incluindo um parametro codec) para o metodo canPlayTypeQ. 
O elemento retorna a string vazia (um valor falso) se nao consegue reproduzir esse tipo de midia. 
Caso contrario, ele retorna a string “maybe” ou “probably”. Devido a natureza complicada dos 
codecs de audio e video, em geral um reprodutor nao pode ter mais certeza do que “probably” 
(provavelmente) de que pode reproduzir um tipo de midia em especial sem realmente baixar a 
midia e tentar: 

var a = new AudioQ; 
if (a.canPlayType("audio/wav")) { 
a.src = "soundeffect.wav"; 
a.playO; 

} 

Quando voce configura a propriedade src de um elemento midia, ela inicia o processo de carrega¬ 
mento dessa midia. (Esse processo nao ira muito longe a nao ser que preload seja “auto”.) Configurar 
src quando alguma outra midia esta sendo carregada ou reproduzida vai cancelar o carregamento ou 
a reprodugao da midia antiga. Se voce adiciona elementos <source> em um elemento midia, em vez 
de configurar o atributo src, o elemento nao pode saber quando um conjunto de elementos com- 
pleto foi inserido e nao vai comegar a escolher entre os elementos <source> e a carregar dados ate que 
voce chame o metodo load() explicitamente. 

21.2.2 Controlando reproduce) de midia 

Os metodos mais importantes dos elementos <audio> e <video> sao play() e pause(), que iniciam e 
param a reprodugao da midia: 

// Quando o documento estiver carregado, comeca a reproduzir alguma musica no piano de 
// fundo 

window.addEventListener("load", function() { 

document.getElementByld("music").play(); 

}, false); 

Alem de iniciar e parar som e video, voce pode pular (ou “buscar”) para um local desejado dentro da 
midia configurando a propriedade currentTime. Essa propriedade especifica o tempo, em segundos, 
para o qual o reprodutor deve pular e pode ser configurada enquanto a midia esta sendo reproduzida 
ou enquanto esta em pausa. (As propriedades initialTime e duration fornecem o intervalo de valores 
validos para currentTime. Mais informagoes sobre essas propriedades, a seguir.) 

A propriedade volume especifica o volume da reprodugao como um numero entre 0 (silencio) e 1 
(volume maximo). A propriedade muted pode ser configurada como true para reprodugao sem audio 
ou como false, para retomar o som da reprodugao no nivel especificado por volume. 
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A propriedade playbackRate especifica a velocidade na qual a mi'dia e reproduzida. O valor 1.0 e a 
velocidade normal. Valores maiores do que 1 sao “avan^o rapido” e valores entre 0 e 1 sao “movi- 
mento lento”. Valores negativos deveriam reproduzir o som ou video para tras, mas os navegadores 
nao suportavam esse recurso quando este livro estava sendo escrito. Os elementos <audio> e <video> 
tambem tern uma propriedade defaultPlaybackRate. Quando o metodo play() e chamado, a pro¬ 
priedade playbackRate e configurada com defaultPlaybackRate. 

Note que as propriedades currentTime, volume, muted e playbackRate nao servem apenas para con- 
trolar reproduQo de mfdia. Se um elemento <audio> ou <video> tern o atributo controls, ele exibe 
controles do reprodutor, fornecendo ao usuario o comando da reproduQo. Nesse caso, um script 
poderia consultar propriedades como muted e currentTime para descobrir como a mfdia esta sendo 
reproduzida. 

Os atributos HTML controls, loop, preload e autoplay afetam a reproduQo de audio e video e 
tambem podem ser configurados e consultados como propriedades JavaScript, controls especifica 
se os controles de reproduQo aparecem no navegador. Configure essa propriedade como true para 
exibir os controles ou false, para oculta-los. A propriedade loop e um valor booleano que especifica 
se a mfdia deve ser reproduzida repetidamente (true) ou parar ao chegar no final (false). A proprie¬ 
dade preload especifica se (ou quanto) o conteudo da mfdia deve ser previamente carregado antes 
que o usuario comece a reproduQo. O valor “none” significa que dado algum deve ser carregado 
previamente. O valor “metadata” significa que metadados como duraQo, taxa de bits e tamanho do 
quadro devem ser carregados, mas nao os dados da mfdia em si. Os navegadores normalmente car- 
regam metadados se um atributo preload nao e especificado. O valor de preload “auto” significa que 
o navegador deve carregar previamente o quanto julgar apropriado da mfdia. Por fim, a propriedade 
autoplay especifica se a mfdia deve comepr a ser reproduzida automaticamente, quando um volume 
suficiente estiver no buffer. Configurar autoplay como true obviamente significa que o navegador 
deve carregar dados da mfdia previamente. 


21.2.3 Consultando status de mfdia 

Os elementos <audio> e <video> tern varias propriedades somente de leitura que descrevem o estado 
atual da mfdia e do reprodutor. paused e true se o reprodutor esta em pausa. seeking e true se o re¬ 
produtor esta pulando para uma nova posi^ao de reproduQo. ended e true se o reprodutor atingiu o 
fim da mfdia e parou. (ended nunca se torna true se loop e true.) 

A propriedade duration especifica a dura?ao da mfdia, em segundos. Se voce consulta essa proprie¬ 
dade antes que os metadados da mfdia estejam carregados, ela retorna NaN. Para streaming de mfdia 
(como radio na Internet) com duraQo indefinida, essa propriedade retorna Infinity. 

A propriedade initialTime especifica o tempo inicial da mfdia, em segundos. Para clipes de mfdia de 
duraqao fixa, isso normalmente e 0. Para streaming de mfdia, essa propriedade fornece o instante de 
tempo mais cedo no qual os dados ainda estao no buffer e que e possfvel buscar novamente. current¬ 
Time nunca pode ser configurada menor do que initialTime. 

Tres outras propriedades fornecem uma visao mais minuciosa da linha do tempo da mfdia e seu 
status de reprodu^ao e buffer. A propriedade played retorna o intervalo (ou intervalos) de tempo 
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que foi reproduzido. A propriedade buffered retorna o intervalo (ou intervalos) de tempo que esta 
atualmente no buffer e a propriedade seekable retorna o intervalo (ou intervalos) de tempo que o 
reprodutor pode buscar no momento. (Voce poderia usar essas propriedades para implementar uma 
barra de progresso ilustrando currentTime e duration, junto com quanto da mfdia foi reproduzido e 
quanto esta no buffer.) 

played, buffered e seekable sao objetos TimeRanges. Cada objeto tern uma propriedade length especi- 
ficando o numero de intervalos que representa e metodos start() e end() que retornam os instantes 
de tempos de infcio e fim (em segundos) de um intervalo numerado. No caso mais comum de um 
unico intervalo de tempos contfguos, voce usaria start(o) e end(o). Supondo que nao aconteceu 
busca e que a mfdia e colocada no buffer desde o infcio, por exemplo, voce poderia usar um codigo 
como o seguinte para determinar a porcentagem de um recurso que foi colocada no buffer: 

var percent_loaded = Math.floor(song.buffered.end(0) / song.duration * 100); 

Por fim, mais tres propriedades, readyState, networkState e error, fornecem detalhes de status de 
baixo nfvel sobre os elementos <audio> e <video>. Cada uma dessas propriedades tern um valor nu- 
merico e sao definidas constantes para cada um dos valores validos. Note que essas constantes sao 
definidas no proprio objeto mfdia (ou no objeto erro). Voce poderia usar uma delas em um codigo 
como o seguinte: 

if (song.readyState === song.HAVE_ENOUGH_DATA) song.playO; 

readyState especifica o quanto dos dados da mfdia foi carregado e, portanto, o quanto o elemento 
esta pronto para comeqar a reproduzir esses dados. Os valores dessa propriedade e seus significados 
sao os seguintes: 


Constante 

Valor 

Descrigao 

HAVE_N0THING 

0 

Nenhum dado ou metadado da mfdia foi carregado. 

HAVE_METADATA 


Os metadados da midia foram carregados, mas nenhum dado para 
a posigao de reprodu^ao atual foi carregado. Isso significa gue 
vocepodeconsultaraduragao da midia ou as dimensoes 
de um video e pode buscar, configurando currentTime, 
mas no momento o navegador nao pode reproduzir a midia em 
currentTime. 

HAVE_CURRENT_DATA 

2 

Os dados da midia para currentT ime foram carregados, mas nao 
o suficiente para permitir gue a midia seja reproduzida. Para video, 
isso normalmente significa que o quadro atual foi carregado, mas o 
seguinte, nao. Esse estado ocorre no final de uma musica ou filme. 

HAVE_FUTURE_DATA 

3 

Foram carregados dados suficientes da midia para iniciar a 
reprodugao, mas provavelmente nao o suficiente para reproduzir ate 
o final da midia sem fazer uma pausa para baixar mais dados. 

HAVE_ENOUGH_DATA 

4 

Foram carregados dados suficientes da midia para que o navegador 
provavelmente possa reproduzir ate o fim sem fazer pausa. 
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A propriedade networkState 

especifica se (ou por que nao) um elemento da midia esta usando a rede: 

Constante 


Valor 

Descrigao 

NETWORKJMPTY 


0 

0 elemento nao comeqiu a usar a rede. Esse poderia ser o estado antes 
que o atributo src fosse configurado, por exemplo. 

NETW0RK_IDLE 


1 

No momento o elemento nao esta carregando dados da rede. Ele pode ter 
carregado o recurso complete ou ter colocado no buffer todos os dados 
de que precisa agora. Ou entao, pode ter configurado preload como 
"none"e ainda nao foi solicitado a carregar ou reproduzir a midia. 

NETW0RK_L0ADING 


2 

0 elemento esta usando a rede para carregar dados da midia. 

NETW0RK_N0_S0URCE 


3 

0 elemento nao conseguiu encontrar uma fonte de midia que seja capaz 
de reproduzir. 

Quando ocorre um erro no carregamento ou na reprodurjao da midia, o navegador configura a pro¬ 
priedade error do elemento <audio> ou <video>. Se nao ocorreu erro, errore null. Caso contrario, e 
um objeto com uma propriedade numerica code que descreve o erro. O objeto erro tambem define 
constantes que descrevem os possiveis codigos de erro: 

Constante 


Valor 

Descri^ao 

MEDIA_ERR_ABORTED 


1 

0 usuario pediu ao navegador para parar de carregar a midia. 

MEDIA_ERR_NETWORK 


2 

A midia e do tipo correto, mas um erro da rede a impediu de ser 
carregada. 

MEDIA_ERR_DECODE 


3 

A midia e do tipo correto, mas um erro de codificajao a impediu de ser 
decodificada e reproduzida. 

MEDIA_ERR_SRC_NOT_ 

SUPPORTED 4 

A midia especificada pelo atributo src nao e de um tipo que o 
navegador possa reproduzir. 


Voce poderia usar a propriedade error com codigo como o seguinte: 

if (song.error.code == song.error.MEDIA_ERR_DECODE) 
alert("Can't play song: corrupt audio data."); 

21.2.4 Eventos de midia 

<audio> e <video> sao elementos muito complexos - eles devem responder a interaQo do usuario 
com seus controles de reprodu^ao, a atividade da rede e ate, durante a reprodu<jao, a simples passa- 
gem do tempo - e acabamos de ver que esses elementos tern muitas propriedades que definem seus 
estados atuais. Assim como a maioria dos elementos HTML, <audio> e <video> disparam eventos 
quando seus estados mudam. Como esses elementos tern um estado muito complicado, podem 
disparar muitos eventos. 

A tabela a seguir resume os 22 eventos de midia, na ordem em que provavelmente ocorrem. Nao 
existem propriedades de registro para esses eventos. Use o metodo addEventListenerQ do elemento 
<audio> ou <video> para registrar fun (joes de tratamento. 
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Tipo de evento 

Descrigao 

loadstart 

Disparado quando o elemento comega a solicitar dados de mi'dia. networkState e 
NETWORK_LOADINC. 

progress 

A atividade da rede continua a carregar dados da mi'dia. networkState e NETWORK_ 

LOADING. Normalmente disparado entre 2 e 8 vezes por segundo. 

loadedmetadata 

Os metadados da mi'dia foram carregados e a duragao e as dimensoes da mi'dia estao prontas. 
ready State mudou para HAVE_METADATA pela primeira vez. 

loadeddata 

Os dados da posigao de reprodugao atual foram carregados pela primeira vez e ready State 
mudou para HAVE_CURRENT_DATA. 

canplay 

Foram carregados dados da mfdia suficientes para que a reprodugao possa comegar, mas 
provavelmente sera exigido uso de buffer adicional. ready State e HAVE FUTURE 

DATA. 

canplaythrough 

Foram carregados dados da midia suficientes para que a mi'dia provavelmente possa 
ser reproduzida continuamente, sem fazer pausa para colocar mais dados no buffer. 
readyState e HAVE_E NOUGH_DAT A. 

s»sp„d 

0 elemento carregou dados suficientes no buffer e parou de baixartemporariamente. 
networkState mudou para NETWORK_IDLE. 

stalled 

0 elemento esta tentando carregar dados, mas eles nao estao chegando. networkState 
permaneceemNETWORK_LOADING. 

play 

0 metodo play () foi chamado ou o atributo autoplay causou o equivalente. Se foram 
carregados dados suficientes, este evento sera seguido por urn evento de play. Caso contrario, 
vai se seguir urn evento de wait. 

waiting 

A reprodugao nao pode comegar ou parou porque nao ha dados suficientes no buffer. Urn 
evento de play vai se seguir quando dados suficientes estiverem prontos. 

playing 

timeupdate 

A midia comegou a ser reproduzida. 

A propriedade currentTime mudou. Durante a reprodugao normal, este evento e disparado 
entre 4 e 60 vezes por segundo, possivelmente dependendo da carga do sistema e de quanto 
tempo as rotinas de tratamento de evento estao demorando para terminar. 

" eld " e 

0 metodo pause () foi chamado e a reprodugao esta em pausa. 

0 script ou o usuario solicitou que a reprodugao pulasse para uma parte da mi'dia que nao esta 
no buffer e a reprodugao parou enquanto os dados sao carregados. A propriedade seeking 
etrue. 

seeked 

A propriedade seeking mudou de volta para false. 

ended 

A reprodugao parou porque o fim da midia foi atingido. 

durationchange 

volumechange 

ratechange 

A propriedade duration mudou. 

A propriedade volume ou muted mudou. 

playbackRate ou defaultPlaybackRate mudou. 

0 elemento parou de carregar dados, normalmente a pedido do usuario. error. code e 
MEDIA_ERR_ABORTED. 

error 

Urn erro da rede ou outro erro impediu que os dados da midia fossem carregados. error. 
code e um valor diferentedeMEDIA_ERR_ABORTED. 

emptied 

Urn erro ou cancelamentofez networkState voltara NETWORK_EMPTY. 
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21.3 SVG: Scalable Vector Graphics (Graficos Vetoriais 
Escalaveis) 

SVG e uma gramatica de XML para elementos graficos. A palavra “vector” (vetorial) indica que e 
fundamentalmente diferente dos formatos de imagem raster, como GIF, JPEG, e PNG, que especi- 
ficam uma matriz de valores de pixel. Em vez disso, uma “imagem” SVG e uma descri^ao precisa e 
independente da resoluQo (dai “escalaveis”) dos passos necessarios para desenhar o elemento grafico 
desejado. Aqui esta um arquivo SVG simples: 

<!-- Inicia uma figura SVC e declara nosso espaqo de nomes --> 

<svg xmlns="http://www.w3.org/2000/svg" 

viewBox="0 0 1000 1000"> <!-- Sistema de coordenadas da figura --> 

<defs> <!-- Configura algumas definicoes que vamos usar --> 

<linearGradient id="fade"> <!-- um gradiente colorido chamado "fade" --> 

<stop offset="0%" stop-color="#oo8"/> <!-- Inicia um azul-escuro --> 

<stop offset="i00%" stop-color="#ccf"/> <!-- Desbota para azul-claro --> 
</linearCradient> 

</defs> 

<!-- Desenha um retangulo com borda preta grossa e o preenche com fade --> 
erect x="100" y="200" width="8oo" height=”6oo" 

stroke="black” stroke-width="25" fill="url(#fade)"/> 

A Figura 21-1 mostra como esse arquivo SVG flea quando renderizado graficamente. 

SVG e uma gramatica grande e moderadamente complexa. Alem das primitivas de desenho de 
formas simples, ela contem suporte para curvas arbitrarias, texto e animaQo. Os elementos graficos 
SVG podem ate incorporar scripts JavaScript e folhas de estilos CSS para adicionar informa?6es de 
comportamento e apresentaQo. Esta se$ao mostra como um codigo JavaScript do lado do cliente 
(incorporado em HTML e nao em SVG) pode desenhar elementos graficos dinamicamente usando 
SVG. Ela inclui exemplos de desenhos em SVG, mas so consegue mostrar uma pequena parte do 
que e possfvel fazer com SVG. Os detalhes completos sobre SVG estao disponfveis na ampla (po- 
rem bastante legfvel) especifica?ao. A especifica$ao e mantida pelo W3C no endereq:o http://www. 
w3.org/TR/SVG/. Note que ela inclui um Document Object Model completo para documentos 
SVG. Esta se$ao manipula elementos graficos SVG usando o DOM da XML padrao e nao utiliza 
o DOM da SVG. 

Quando este livro estava sendo escrito, todos os navegadores da epoca, exceto o IE, suportavam 
SVG (e o IE9 vai suportar). Nos navegadores mais recentes, voce pode exibir imagens SVG usando 
um elemento <img> normal. Alguns navegadores um pouco mais antigos (como o Firefox 3.6) nao 
suportam isso e exigem o uso de um elemento <object>: 

<object data="sample.svg" type="image/svg+xml" width="l00" height="l00"/> 
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Figura 21-1 Um elemento grafico SVG simples. 


Quando usada com um elemento <img> ou <object>, SVG e apenas outro formato de imagem e nao 
e especialmente interessante para programadores JavaScript. E mais util incorporar imagens SVG di- 
retamente dentro de seus documentos para que possam ser incluidas em scripts. Como SVG e uma 
gramatica de XML, voce pode incorpora-la dentro de documentos XHTML, como segue: 

<?xml version="l.0"?> 

<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:svg="http://www.w3.org/2000/svg"> 

<!-- declara HTML como espaco de nomes padrao e SVC com prefixo ''svg:'' --> 

<body> 

This is a red square: <svg:svg width="lO" height="lO"> 

<svg:rect x="0" y="0" width="lO" height="lO" fill="red"/> 

</svg:svg> 

This is a blue circle: <svg:svg width="lO" height="lO"> 

<svg:circle cx="5" cy="5" r="5" fill="blue"/> 

</svg:svg> 

</body> 

</html> 
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Essa tecnica fimciona em todos os navegadores atuais, exceto o IE. A Figura 21-2 mostra como o 
Firefox renderiza esse documento XHTML. 


Firefoxv j~ file:///home/d...eddedsvg.xhtml | db | 

^ IlP'Ij/ embeddedsvg.xhtml vjc| | v ft | |v * v Feedback^ 


This is a red square: ■ This is a blue circle: I 


Figura 21-2 Elementos graficos SVG em urn documento XHTML. 


HTML5 minimiza a distingao entre XML e HTML e permite que a marcagao SVG (e Ma- 
thML) aparega diretamente nos arquivos HTML, sem declaragoes de espagos de nomes ou pre- 
fixos de tag: 

<!DOCTYPE html> 

<body> 

This is a red square: <svg width="l0" height="l0"> 
erect x="0" y="0" width="io" height='To" fill="red"/> 

</svg> 

This is a blue circle: <svg width='T0" height="l0"> 
ecircle cx="5" cy="5" r="5" fill=''blue'7> 

</svg> 

</body> 

</html> 

Quando este livro estava sendo escrito, a incorporagao direta de SVG em HTML so funcionava nos 
navegadores mais modernos. 

Como SVG e uma gramatica de XML, desen har elementos graficos SVG e apenas uma questao 
de usar o DOM para criar elementos XML apropriados. O Exemplo 21-2 e a listagem de uma 
fungao pieChartQ que cria os elementos SVG para produzir o grafico de pizza mostrado na Fi¬ 
gura 21-3. 
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Exemplo 21-2 Desenhando um grafico de pizza com JavaScript e SVG 

/** 

* Cria um elemento <svg> e desenha um grafico de pizza nele. 

* Argumentos: 

* data: um array de numeros para representar no grafico, um para cada fatia da pizza. 

* width,height: o tamanho do elemento grafico SVG, em pixels 

* cx, cy, r: o centro e o raio da pizza 

* colors: um array de strings de cor HTML, uma para cada fatia 

* labels: um array de rotulos para aparecer na legenda, um para cada fatia 

* lx, ly: o canto superior esquerdo da legenda do grafico 

* Retorna: 

* Um elemento <svg> contendo o grafico de pizza. 

* 0 chamador deve inserir o elemento retornado no documento. 

function pieChart(data, width, height, cx, cy, r, colors, labels, lx, ly) { 

// Este e o espaco de nomes XML para elementos svg 
var svgns = "http://www.wB.org/2000/svg"; 
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// Cria o elemento <svg> e especifica tamanho em pixels e coordenadas do usuario 
var chart = document.createElementNS(svgns, "svg:svg"); 
chart.setAttribute("width ”, width); 
chart.setAttribute("height ", height); 

chart.setAttribute("viewBox"j "0 0 " + width + " " + height); 

// Soma os valores de dados para sabermos qual e o tamanho da pizza 
var total = 0; 

for(var i = 0; i < data.length; i++) total += data[i]; 

// Agora descobre qual e o tamanho de cada fatia da pizza. Angulos em radianos. 
var angles = [] 

for(var i = 0; i < data.length; i++) angles[i] = data[i]/total*Math.PI*2; 

// Itera por cada fatia da pizza, 
startangle = 0; 

for(var i = 0; i < data.length; i++) { 

// E aqui que a fatia termina 

var endangle = startangle + angles[i]; 

// Calcula os dois pontos onde nossa fatia intercepta o circulo 

// Essas formulas sao escolhidas de modo que urn angulo 0 seja meio-dia 

// e os angulos positivos aumentem no sentido horario. 

var xl = cx + r * Math.sin(startangle); 

var yi = cy - r * Math.cos(startangle); 

var x2 = cx + r * Math.sin(endangle); 

var y2 = cy - r * Math.cos(endangle); 


// Este e urn flag para angulos maiores do que meio circulo 
// Isso e exigido pelo componente de desenho de arco da SVC 
var big = 0; 

if (endangle - startangle > Math.PI) big = i; 

// Descrevemos uma fatia com urn elemento <svg:path> 

// Observe que criamos isso com createElementNS() 
var path = document.createElementNS(svgns, "path"); 


// Esta string contem 


" 0 ” + big + " 1 
x2 + "j" + y2 + 


os detalhes do caminho 
" + cy + // Comeqa no centro do circulo 

yi + // Desenha linha ate (xi,yi) 

r + // Desenha urn arco de raio r 

" + // Detalhes do arco... 

// 0 arco vai ate (x2,y2) 

// Fecha o caminho voltando para (cx,cy) 


// Agora configura atributos no elemento <svg:path> 
path.setAttribute("d", d); // Configura 

path.setAttribute("fill”, colors[i]); // Configura 

path.setAttribute("stroke", "black"); // Contorna 

path.setAttribute("stroke-width"j "2"); // Espessura 

chart.appendChild(path); // Adiciona 


esse caminho 
a cor da fatia 
a fatia com preto 
de 2 unidades 
fatia no grafico 


// A proxima fatia comeqa onde esta termina 
startangle = endangle; 
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/ Agora desenha um pequeno quadrado correspondente para a 
var icon = document.createElementNS(svgns, "rect"); 


i.setAttribute("x"j lx); 
icon.setAttribute("y”, ly + 30*i); 
icon. setAttribute("width”, 20 ); 
icon.setAttribute("height", 20); 
icon.setAttribute("fill", colors[i]); 
icon.setAttribute("stroke", "black"); 
icon.setAttribute("stroke-width”, "2"); 
chart.appendChild(icon); 


/ Posiciona o quadrado 
// Dimensiona o quadrado 


// E adiciona um rotulo a direita do retangulo 
var label = document.createElementNS(svgns, "text"); 
label.setAttribute("x”, lx + 30); // Posiciona o texto 

label.setAttribute("y", ly + 30*i + 18 ); 

// Os atributos de estilo de texto tambem poderiam ser configurados via CSS 
label.setAttribute("font-family", "sans-serif"); 
label.setAttribute("font-size", ”16"); 

// Adiciona um no de texto DOM no elemento <svg:text> 
label.appendChild(document.createTextNode(labels[i])); 
chart.appendChild(label); // Adiciona texto no grafico 


return chart; 

} 

O codigo do Exemplo 21-2 e relativamente simples. Ha um pouco de matematica para converter 
os dados que estao sendo representados no grafico em angulos de fatia de pizza. Contudo, a maior 
parte do exemplo e codigo DOM que cria elementos SVG e configura atributos nesses elementos. 
Para funcionar em navegadores que nao suportam HTML5 totalmente, esse exemplo trata SVG 
como uma gramatica de XML e usa o espa?o de nomes SVG e o metodo DOM createElementNSQ, 
em vez de createElementQ. 

A parte mais nebulosa desse exemplo e o codigo que desenha as fatias de pizza. O elemento usado 
para exibir cada fatia e <svg:path>. Esse elemento SVG descreve formas arbitrarias compostas de 
linhas e curvas. A descri^ao da forma e especificada pelo atributo d do elemento <svg: path>. O valor 
desse atributo utiliza uma gramatica compacta de codigos de letras e niimeros que especificam co- 
ordenadas, angulos e outros valores. A letra M, por exemplo, significa “mover para” e e seguida por 
coordenadas X e Y. A letra L significa “linha ate” e desenha uma linha do ponto atual ate as coorde- 
nadas que vem depois dela. Esse exemplo tambem usa a letra A para desenhar um arco. Essa letra e 
seguida por sete niimeros descrevendo o arco. Os detalhes precisos nao sao importantes aqui, mas 
voce pode pesquisa-los na especificafao, no enderefo http://www.w3.org/TR/SVG/. 

Note que a fun^ao pieChartQ retorna um elemento <svg> que content uma descri^ao do grafico de 
pizza, mas nao insere esse elemento no documento. Espera-se que o chamador fa$a isso. O grafico de 
pizza da Figura 21-3 foi criado com um arquivo como o seguinte: 

cscript src="PieChart.js"x/script> 

<body onload="document.body.appendChild( 
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pieChart([l2, 23, 34, 45], 640, 400, 200, 200, 150, 

['red','blue','yellow','green' ], 

['North','South', 'East', 'West'], 400, 100)); 

</body> 

</html> 

O Exemplo 21-3 e outra amostra de script SVG: ele usa SVG para exibir um relogio analogico. (Veja 
a Figura 21-4.) Contudo, em vez de construir dinamicamente a arvore de elementos SVG a partir do 
zero, ele come^a com uma imagem SVG estatica de um relogio, incorporada na pagina HTML. Esse 
elemento grafico estatico contem dois elementos SVG <line> que representam o ponteiro das horas e 
o ponteiro dos minutos. As duas linhas apontam para frente e a imagem estatica exibe a hora 12:00. 
Para transformar essa imagem em um relogio funcionando, usamos JavaScript para configurar um 
atributo transform em cada um dos elementos <line>, girando-os pelos angulos apropriados a fim de 
que o relogio exiba a hora atual. 



Figura 21-4. Um relogio SVG. 


Note que o Exemplo 21-3 incorpora marca?ao SVG diretamente em um arquivo HTML5 e nao 
usa espa?os de nomes XML dentro de um arquivo XHTML. Isso significa que, conforme mostra- 
do aqui, so vai funcionar em navegadores que suportam a incorpora^ao direta de SVG. Contudo, 
convertendo-se o arquivo HTML para XHTML, essa mesma tecnica funciona em navegadores mais 
antigos habilitados para SVG. 

Exemplo 21-3 Exibindo a hora com manipulagao de uma imagem SVG 
<!D0CTYPE HTML> 

<head> 

<title>Analog Clock</title> 

<script> 

function updateTime() { // Atualiza o elemento grafico relogio SVC para mostrar a hora atual 
var now = new Date(); // Hora atual 

var min = now.getMinutes(); // Minutos 

var hour = (now.getHoursQ % 12 ) + min/60; // Horas fracionarias 
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var minangle = min*6; // 6 graus por minuto 

var hourangle = hour*30; // BO graus por hora 

// Obtem elementos SVC para os ponteiros do relogio 
var minhand = document.getElementById("minutehand"); 
var hourhand = document.getElementBy!d("hourhand"); 


// Configura urn atributo SVC neles para move-los em torno do mostrador do relogio 
minhand.setAttribute("transform"j "rotate(" + minangle + "j50j50)"); 
hourhand.setAttributeC'transform", "rotate(" + hourangle + "j50,50)''); 


// Atualiza o relogio novamente em 1 minuto 
setTimeout(updateTime ) 60000); 


/* Todos esses estilos CSS 
#clock { 

stroke: black; 
stroke-linecap: round; 
fill: #eef; 


aplicam aos elementos SVC definidos a seguir */ 
/* estilos para tudo no relogio */ 

/* linhas pretas */ 

/* com extremidades arredondadas */ 

/* sobre urn fundo cinza azul-celeste */ 


} 

#face { stroke-width: 3px;} /* contorno do mostrador do relogio */ 

Sticks { stroke-width: 2; } /* linhas que marcam cada hora */ 

Shourhand {stroke-width: 5 px;} /* ponteiro grande das horas */ 

Sminutehand {stroke-width: 3px;}/* ponteiro pequeno dos minutos */ 
Snumbers { /* como desenhar os numeros */ 

font-family: sans-serif; font-size: 7pt; font-weight: bold; 
text-anchor: middle; stroke: none; fills black; 


} 


</style> 

</head> 

<body onload="updateTime()"> 

<!-- viewBox e sistema de coordenadas, width e height sao o tamanho na tela --> 
<svg id="clock" viewBox="0 0 100 100" width="500" height="500"> 

<defs> <!-- Define urn filtro para sombras projetadas --> 

<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%"> 
cfeCaussianBlur in=”SourceAlpha" stdDeviation="l" result="blur" /> 
cfeOffset in=”blur” dx=”i” dy=”i” result=”shadow” /> 

<feMerge> 

<feMergeNode in="SourceCraphic"/xfeMergeNode in=”shadow”/> 

</feMerge> 

</filter> 

</defs> 

ccircle id="face" cx="50" cy="50" r="45"/> <!-- o mostrador do relogio --> 

<g id="ticks"> <!-- marcas de tique de 12 horas --> 

<line xl='50' yl=' 5 . 000 ' x 2 =' 50 . 00 ' y2='l0.00'/> 

<line xl='72.50' yl='ll.03' x2='70.00' y2='l5.367> 

<line xl='88.97' yl='27.50' x2='84.64' y2='30.00'/> 

<line xl='95.00' yl='50.00' x2='90.00' y2='50.00'/> 

<line xl='88.97' yl='72.50' x2='84.64' y2='70.00'/> 

<line xl='72.50' yl='88.97' x2='70.00' y2='84.64'/> 

<line xl='50.00' yl='95.00' x2='50.00' y2='90.00'/> 

<line xl='27.50' yl='88.97' x2='30.00' y2='84.64'/> 

<line xl='11.03' yl='72.50' x 2='15.36' y2='70.00'/> 
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<line xl='5.000' yl='50.00' x2='l0.00' y2='50.00'/> 

<line xl='ll.0B' yl='27.50' x 2='15.B6' y2='30.00'/> 
cline xl=’27.50’ yl='ll.03' x2='30.00' y2='15-36'/> 

</g> 

eg id="numbers"> <!-- Numera os pontos cardeais --> 

ctext x="50" y="i8">i2</textxtext x="85" y="53">3</text> 

Ctext x="50" y="88">6</textxtext x="l5" y="53">9</text> 

</g> 

<!-- Desenha os ponteiros apontando para cima. Os giramos no codigo. --> 
eg id="hands" filter="url(#shadow)"> <!-- Adiciona sombras nos ponteiros --> 
cline id="hourhand" xl="50" yl="50" x2="50" y2="24"/> 
cline id="minutehand" xl="50" yl="50" x2="50" y2="20"/> 

</g> 

c/svg> 

c/body> 

c/html> 

21.4 Elementos graficos em um <canvas> 

O elemento ccanvas> nao tem aparencia propria, mas cria uma superficie de desenho dentro do 
documento e expoe uma poderosa API de desenho para JavaScript do lado do cliente. O elemen¬ 
to canvas e padronizado por HTML5, mas existe ha mais tempo do que ela. Foi introduzido pela 
Apple no Safari 1.3 e e suportado pelo Firefox desde a versao 1.5 e pelo Opera desde a versao 
9. E suportado tambem em todas as versoes do Chrome. O elemento ccanvas> nao e suportado 
pelo IE antes do IE9, mas pode ser razoavelmente bem simulado no IE6, 7 e 8, usando-se o pro- 
jeto de codigo-fonte aberto ExplorerCanvas, encontrado no endereqo http:/'/code.google.comlpl 
explorercanvas/. 

Uma diferenqa importante entre o elemento ccanvas> e SVG e que com canvas voce cria desenhos 
chamando metodos e com SVG cria desenhos construindo uma arvore de elementos XML. Essas 
duas estrategias sao igualmente poderosas: uma pode ser simulada com a outra. Contudo, super- 
flcialmente elas sao muito diferentes e cada uma tem suas vantagens e suas desvantagens. Um 
desenho SVG, por exemplo, e facilmente editado pela remoqao de elementos de sua descriqao. Para 
remover um componente do mesmo elemento graflco em ccanvas>, em geral e necessario apagar o 
desenho e redesenha-lo a partir do zero. Como a API de desenho Canvas e baseada em JavaScript 
e relativamente compacta (ao contrario da gramatica SVG), esta toda documentada neste livro. 
Consulte Canvas, CanvasRenderingContext2D e entradas relacionadas na seqao de referenda do lado 
do cliente. 

A maior parte da API de desenho Canvas e definida nao no elemento ccanvas> em si, mas em 
um objeto “contexto de desenho” obtido com o metodo getContext() do canvas. Chame ge- 
tContextQ com o argumento “2d” para obter um objeto CanvasRenderingContext2D que voce 
pode usar para desenhar elementos graficos bidimensionais no canvas. E importante entender 
que o elemento canvas e seu objeto contexto sao dois objetos muito diferentes. Devido ao seu 
nome de classe tao longo, normalmente nao me refiro ao objeto CanvasRenderingContext2D 
pelo nome; em vez disso, chamo simplesmente de “objeto contexto”. Da mesma forma, quando 
escrevo sobre a “API Canvas”, em geral quero me referir aos “metodos do objeto CanvasRende- 
ringContext2D ”. 
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Elementos graficos tridimensionais em um canvas 

Quando este livro estava sendo escrito, os fornecedores de navegador estavam comegando a implemen- 
tar uma API de elementos graficos tridimensionais para o elemento <canvas>. A API e conhecida como 
WebGL e e uma ligagao de JavaScript com a API padrao OpenGL. Para obter um objeto contexto para 
elementos graficos tridimensionais, passe a string "webgl" para o metodo getContextQ do canvas. A 
WebGL e uma API de baixo nfvel, grande e complicada, que nao esta documentada neste livro: e mais 
provavel os desenvolvedores Web usarem bibliotecas utilitarias construidas sobre WebGL do que usarem 
a API WebGL diretamente. 


Como um exemplo simples da API Canvas, o codigo a seguir desenha um quadrado vermelho 
e um azul em elementos <canvas> para produzir safda como os elementos graficos SVG mostrados 
na Figura 21-2: 


<body> 

This is a red square: <canvas id="square" width=iO height=iOx/canvas>. 
This is a blue circle: <canvas id="circle" width=iO height=iOx/canvas> 

var canvas = document.getElementById("square") 
var context = canvas.getContext("2d"); 
context.fillStyle = "#f00"; 
context.fillRect(0,0,10,10); 


Obtem o primeiro elemento canvas 
Obtem contexto de desenho 2D 
Configura cor de preenchimento vermelha 
Preenche um quadrado 


canvas = document.getElementById("circle"); 
context = canvas.getContext("2d"); 
context. beginPathQ; 

context.arc(5, 5, 5, 0, 2*Math.PI, true); 
context.fillStyle = "#00f"; 
context.fill(); 

</script> 

</body> 


// Segundo elemento canvas 
// Obtem seu contexto 
// Inicia um novo "caminho” 

// Adiciona um circulo no caminho 
// Configura cor de preenchimento azul 
// Preenche o caminho 


Vimos que a SVG descreve formas complexas como um “caminho” de linhas e curvas que podem ser 
desenhadas ou preenchidas. A API Canvas tambem usa a ideia de caminho. Em vez de descrever um 
caminho como uma string de letras e numeros, um caminho e deflnido por uma serie de chamadas 
de metodo, como as chamadas de beginPathQ e arc() no codigo anterior. Uma vez deflnido o ca¬ 
minho, outros metodos, como fillQ, operam nele. Varias propriedades do objeto contexto, como 
fillStyle, especificam como essas operates sao efetuadas. As subsegoes a seguir explicam: 

• Como deflnir caminhos, como desenhar ou “tragar” o contorno de um caminho e como pre- 
encher o interior de um caminho. 


Como conflgurar e consultar os atributos graficos do objeto contexto do canvas e como salvar 
e restaurar o estado atual desses atributos. 

Dimensoes do canvas, o sistema de coordenadas padrao do canvas e como transformar esse 
sistema de coordenadas. 


Os varios metodos de desenho de curva deflnidos pela API Canvas. 
Alguns metodos utilitarios de proposito especial para desenhar retangulos. 
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• Como especificar cores, trabalhar com transparencia e desenhar com degrades de cor e repetir 
padroes de imagem. 

• Os atributos que controlam largura de linha e a aparencia de extremidades de linhas e vertices. 

• Como desenhar texto em um <canvas>. 

• Como “recortar” elementos graficos para que nenhum desenho seja feito fora de uma regiao 
especificada. 

• Como adicionar sombras projetadas em seus elementos graficos. 

• Como desenhar (e opcionalmente mudar a escala) imagens em um canvas e como extrair o 
conteudo de um canvas como uma imagem. 

• Como controlar o processo de composRao por meio do qual os pixels recentemente desenha- 
dos (translucidos) sao combinados com os pixels existentes no canvas. 

• Como consultar e configurar os valores brutos de vermelho, verde, azul e alfa (transparencia) 
dos pixels no canvas. 

• Como determinar se ocorreu um evento de mouse em cima de algo que voce desenhou em 
um canvas. 

A se^ao termina com um exemplo pratico que usa elementos <canvas> para renderizar pequenos 
graficos em linha conhecidos como sparklines. 

Boa parte do codigo de exemplo de <canvas> a seguir opera em uma variavel c. Essa variavel contem 
o objeto CanvasRenderingContext2D do canvas, mas o codigo para inicializar essa variavel normal- 
mente nao e mostrado. Para fazer esses exemplos funcionar, voce precisaria adicionar uma marca^ao 
HTML para definir um canvas com atributos width e height apropriados e, entao, adicionar codigo 
como o seguinte para inicializar a variavel c: 

var canvas = document.getElementById("my_canvas_id"); 
var c = canvas.getContext('2d'); 

As figuras a seguir foram todas geradas por codigo JavaScript desenhando em um elemento <canvas> 
- normalmente em um canvas grande, fora da tela, para produzir elementos graficos de alta resolu^ao. 


21.4.1 Desenhando linhas e preenchendo poligonos 

Para desenhar linhas em um canvas e para preencher as areas envolvidas por essas linhas, voce co¬ 
rner definindo um caminho. Um caminho e uma sequencia de um ou mais subcaminhos. Um 
subcaminho e uma sequencia de dois ou mais pontos conectados por segmentos de linha (ou, con- 
forme vamos ver posteriormente, por segmentos de curva). Inicie um novo caminho com o metodo 
beginPathQ. Inicie um novo subcaminho com o metodo moveToQ. Uma vez que tenha estabelecido 
o ponto de partida de um subcaminho com moveTo(), voce pode conectar esse ponto a um novo 
ponto com uma linha reta, chamando lineToQ. O codigo a seguir define um caminho que inclui 
dois segmentos de linha: 

c.beginPath(); // Inicia um novo caminho 

c.moveTo(lOO, 100); // Inicia um subcaminho em (100,100) 

c.lineTo(200, 200); // Adiciona uma linha de (100,100) a (200,200) 

c.lineTo(l00, 200); // Adiciona uma linha de (200,200) a (100,200) 
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O codigo anterior simplesmente define um caminho; ele nao desenha nada no canvas. Para desenhar 
(ou “tra<jar”) os dois segmentos de linha no caminho, chame o metodo strokeQ, e para preencher a 
area definida por esses segmentos de linha, chame fill(): 

c.fillQ; // Preenche uma area triangular 

c.stroke(); // Tra<;a dois lados do triangulo 

O codigo anterior (junto com algum codigo adicional para configurar larguras de linha e cores de 
preenchimento) produziu o desenho mostrado na Figura 21-5. 



Figura 21-5 Um caminho simples, tra^ado e preenchido. 


Observe que o subcaminho definido anteriormente e “aberto”. Ele consiste apenas em dois segmen¬ 
tos de linha e a extremidade nao esta conectada ao ponto de partida. Isso significa que ele nao en- 
volve uma regiao. O metodo fillQ preenche subcaminhos abertos, agindo como se uma linha reta 
conectasse o ultimo ponto do subcaminho ao primeiro ponto dele. E por isso que o codigo anterior 
preenche um triangulo, mas tra^a apenas dois lados dele. 

Se quisesse tra^ar todos os tres lados do triangulo anterior, voce chamaria o metodo closePathQ 
para conectar a extremidade do subcaminho ao ponto initial. (Voce tambem poderia chamar 
lineTo(i00,i00), mas entao acabaria com tres segmentos de linha compartilhando um ponto initial 
e um final, porem nao realmente fechados. Quando se desenha com linhas grossas, os resultados 
visuais sao melhores se o metodo closePathQ e usado.) 

Existem mais dois detalhes importantes a observar a respeito de stroke() e fillQ. Primeiramente, os 
dois metodos operam em todos os subcaminhos do caminho atual. Suponha que tivessemos adicio- 
nado outro subcaminho no codigo anterior: 

c.moveTo(300,100); // Inicia um novo subcaminho em (300,100); 

c.lineTo(300,200); // Desenha uma linha vertical para baixo ate (300,200); 

Se entao chamassemos stroke(), desenhariamos dois cantos conectados de um triangulo e uma linha 
vertical desconectada. 

O segundo detalhe a notar sobre stroke () e fillQ e que nenhum deles altera o caminho amah voce 
pode chamar fill() e o caminho ainda vai estar la quando chamar strokeQ. Quando terminar um 
caminho e quiser iniciar outro, deve lembrar-se de chamar beginPathQ. Se nao fizer isso, vai acabar 
adicionando novos subcaminhos no caminho existente e pode acabar desenhando esses subcaminhos 
antigos repetidamente. 

O Exemplo 21-4 define uma funijao para desenhar poligonos regulares e demonstra o uso de 
moveToQ, lineToQ e closePathQ para definir subcaminhos e de fillQ e strokeQ para desenhar esses 
caminhos. Ele produz o desenho mostrado na Figura 21-6. 
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Exemplo 21-4 Poli'gonos regulares com moveToQ, lineToQ e dosePath() 

// Define um poligono regular com n lados, centralizado em (x,y), com raio r. 

// Os vertices sao igualmente espacados ao longo da circunferencia de um circulo. 

// Coloca o primeiro vertice reto ou no angulo especificado. 

// Gira no sentido horario, a nao ser que o ultimo argumento seja true, 
function polygon(c,n,x,y,r,angle,counterclockwise) { 
angle = angle || 0; 

counterclockwise = counterclockwise || false; 

c.moveTo(x + r*Math.sin(angle), // Inicia um novo subcaminho no primeiro vertice 
y - r*Math.cos(angle)); // Usa trigonometria para calcular a posicao 
var delta = 2*Math.PI/n; // Distancia angular entre os vertices 

for(var i = 1; i < n; i++) { // Para cada um dos vertices restantes 

angle += counterclockwise?-delta:delta; // Ajusta o angulo 
c.lineTo(x + r*Math.sin(angle), // Adiciona linha no proximo vertice 

y - r*Math.cos(angle)); 

} 

c.closePath(); // Conecta o ultimo vertice ao primeiro 


// Inicia um novo caminho e adiciona subcaminhos poligonais 
c.beginPathQ; 

polygon(Cj 3, 50, 70, 50); // Triangulo 

polygon(c, 4, 150, 60, 50, Math.PI/4); // Ouadrado 

polygon(c, 5, 255, 55, 50); // Pentagono 

polygon(c, 6, 365, 53, 50, Math.PI/6); // Hexagono 

polygon(c, 4, 365, 53, 20, Math.PI/4, true); // Pequeno quadrado dentro do hexagono 

// Configura algumas propriedades que controlam a aparencia do elemento grafico 
c.fillStyle = "#ccc"; // Interiores cinza-claro 

c.strokeStyle = "#008"; // contornados com linhas azul-escuro 

c.lineWidth = 5; // com cinco pixels de largura. 

// Agora desenha todos os poligonos (cada um em seu proprio subcaminho) com estas 
// chamadas 

c.fillQ; // Preenche as formas 

c.strokeQ; // E traqa seus contornos 
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Observe que esse exemplo desenha um hexagono com um quadrado dentro dele. O quadrado e 
o hexagono sao subcaminhos separados, mas se sobrepoem. Quando isso acontece (ou quando 
um subcaminho intercepta a si mesmo), o elemento canvas precisa ser capaz de determinar quais 
regioes estao dentro do caminho e quais estao fora. O elemento canvas usa um teste conhecido 
como “regra de contorno diferente de zero” para conseguir isso. Nesse caso, o interior do quadra¬ 
do nao e preenchido porque o quadrado e o hexagono foram desenhados em diregoes opostas: os 
vertices do hexagono foram conectados com segmentos de linha movendo-se no sentido horario 
em torno do circulo. Os vertices do quadrado foram conectados no sentido anti-horario. Se o 
quadrado tambem fosse desenhado no sentido horario, a chamada de fill () teria preenchido 
seu interior. 



A regra de contorno diferente de zero 

Para testar se um ponto P esta dentro de um caminho usando a regra de contorno diferente de zero, 
imagine uma linha reta desenhada a partir de P, em qualquer diregao, ate o infinito (ou, de forma mais 
pratica, ate algum ponto fora da caixa de contorno do caminho). Agora, inicialize um contador com 
zero e enumere todos os lugares onde o caminho cruza a linha reta. Sempre que o caminho cruzar a 
linha reta no sentido horario, some um na contagem. Sempre que o caminho cruzar a linha reta no 
sentido anti-horario, subtraia um. Se, apos todos os cruzamentos serem enumerados, a contagem for 
diferente de zero, o ponto P esta dentro do caminho. Por outro lado, se a contagem for zero, P esta fora 
do caminho. 


21.4.2 Atributos graficos 

O Exemplo 21-4 configura as propriedades fillStyle, strokeStyle e lineWidth no objeto contexto 
do canvas. Essas propriedades sao atributos graficos que especificam a cor a ser usada por fill(), 
a cor a ser usada por stroked e a largura das linhas a serem desenhadas por stroked- Observe 
que esses parametros nao sao passados para os metodos fill() e stroked, mas em vez disso fa- 
zem parte do estado grafico geral do canvas. Se voce define um metodo que desenha uma forma 
e nao configura essas propriedades, o chamador de seu metodo pode definir a cor da forma 
configurando as propriedades strokeStyle e fillStyle antes de chamar o metodo. Essa separagao 
de estado grafico dos comandos de desenho e fundamental para a API Canvas e e semelhante a 
separagao da apresentagao do conteudo obtida pela aplicagao de folhas de estilos CSS em docu- 
mentos HTML. 

A API Canvas define 15 propriedades de atributo grafico no objeto CanvasRenderingContext- 
2D. Essas propriedades estao listadas naTabela 21-1 e explicadas em detalbes nas segoes relevan- 
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Tabela 21-1 Atributos graficos da API Canvas 


Propriedade 

Significado 

fillStyle 

a cor, gradiente ou padrao de preenchimento 

font 

a fonte CSS para comandos de desenho de texto 

globalAlpha 

transparency a ser adicionada em todos os pixels desenhados 

globalCompositeOperation 

como combinar novos pixels com os que estao embaixo 

lineCap 

como as extremidades das linhas sao renderizadas 

lineJoin 

como os vertices sao renderizados 

lineWidth 

a largura das linhas tragadas 

miterLimit 

comprimento maximo de vertices em angulo agudo 

textAlign 

alinhamento horizontal de texto 

textBaseline 

alinhamento vertical de texto 

shadowBlur 

o quanto as sombras sao nitidas ou indistintas 

shadowColor 

a cor das sombras projetadas 

shadowOffsetX 

o deslocamento horizontal das sombras 

shadowOffsetY 

o deslocamento vertical das sombras 

strokeStyle 

a cor, gradiente ou padrao de linhas 


Como a API Canvas define atributos graficos no objeto contexto, voce poderia ficar tentado a 
chamar getContextQ varias vezes para obter varios objetos contexto. Se isso fosse possfvel, voce 
poderia definir diferentes atributos em cada contexto. Entao, cada contexto seria como um pin- 
cel diferente e pintaria com uma cor diferente ou desenharia linhas de espessuras diferentes. 
Infelizmente, nao e possfvel usar o canvas dessa maneira. Cada elemento <canvas> tern somente 
um objeto contexto e toda chamada de getContextQ retorna o mesmo objeto CanvasRendering- 
Context2D. 

Embora a API Canvas so permita definir um conjunto de atributos graficos por vez, ela permite 
salvar o estado grafico atual para que voce possa altera-lo e restaura-lo facilmente. O metodo 
saveQ coloca o estado grafico atual em uma pilha de estados salvos. O metodo restoreQ retira da 
pilha e restaura o estado salvo mais recentemente. Todas as propriedades listadas na Tabela 21-1 
fazem parte do estado salvo, assim como acontece com a transformaqao e com a regiao de recorte 
atuais (ambas explicadas a seguir). E importante saber que o caminho atualmente definido e o 
ponto atual nao fazem parte do estado grafico e nao podem ser salvos nem restaurados. 

Caso precise de mais flexibilidade do que uma pilha de estados graficos simples permite, talvez 
voce ache util definir metodos utilitarios como os que aparecem no Exemplo 21-5. 
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Exemplo 21-5 Utilitarios de gerenciamento de estado grafico 

// Reverte para o ultimo estado grafico salvo, mas nao retira da pilha. 
CanvasRenderingContext2D.prototype.revert = functionQ { 
this.restoreQ; // Restaura o estado grafico antigo. 
this.save(); // Salva-o novamente para que possamos voltar a ele. 
return this; // Permite encadeamento de metodos. 

n 

// Configura os atributos graficos especificados pelas propriedades do objeto o. 

// Ou, se nenhum argumento e passado, retorna os atributos atuais como urn objeto. 

// Note que isso nao manipula a transformagao nem a regiao de recorte. 
CanvasRenderingContext2D.prototype.attrs = function(o) { 
if (o) { 

for(var a in o) // Para cada propriedade em o 

this[a] = o[a]; // A configura como urn atributo grafico 

return this; // Habilita o encadeamento de metodos 

} 

else return { 

fillStyle: this.fillStyle, font: this.font, 
globalAlpha: this.globalAlpha, 

globalCompositeOperation: this.globalCompositeOperation, 
lineCap: this.lineCap, lineloin: this.lineloin, 
lineWidth: this.lineWidth, miterLimit: this.miterLimit, 
textAlign: this.textAlign, textBaseline: this.textBaseline, 
shadowBlur: this.shadowBlur, shadowColor: this.shadowColor, 
shadowOffsetX: this.shadowOffsetX, shadowOffsetY: this.shadowOffsetY, 
strokeStyle: this.strokeStyle 

h 

ft 

21.4.3 Dimensoes e coordenadas do canvas 

Os atributos width e height do elemento <canvas> e as propriedades correspondentes width e height 
do objeto Canvas especificam as dimensoes do canvas. O sistema de coordenadas padrao coloca a 
origem (0,0) no canto superior esquerdo da tela de desenho. As coordenadas X aumentam para a 
direita e as coordenadas Y aumentam a medida que voce desce na tela. Os pontos na tela de desenho 
podem ser especificados usando-se valores em ponto flutuante e esses valores nao sao arredondados 
para inteiros automaticamente - o objeto Canvas usa tecnicas de suavizagao para simular pixels 
parcialmente preenchidos. 

As dimensoes de um canvas sao tao fundamentals que nao podem ser alteradas sem se redefinir o 
canvas completamente. Configurar as propriedades width ou height de um objeto Canvas (mesmo 
configurando-as com seus valores atuais) limpa o canvas, apaga o caminho atual e redefine todos os 
atributos graficos (inclusive a transformagao e a regiao de recorte atuais) com seus estados originais. 

Apesar dessa importancia fundamental das dimensoes do canvas, elas nao correspondem necessa- 
riamente ao tamanho na tela do elemento canvas ou ao numero de pixels que compoem a super- 
ficie de desenho do canvas. As dimensoes do canvas (e tambem o sistema de coordenadas padrao) 
sao medidas em pixels CSS. Os pixels CSS normalmente sao iguais aos pixels normais. Contudo, 
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em telas de alta resol u^ao as implementafoes podem mapear varios pixels do dispositive em pixels 
CSS. Isso significa que o retangulo de pixels desenhado pelo elemento canvas pode ser maior do 
que as dimensoes nominais do canvas. Voce precisa saber disso ao trabalhar com os recursos de 
manipulate de pixels (consulte a Seqao 21.4.14) do elemento canvas, mas fora isso a distinqao 
entre pixels CSS virtuais e pixels de hardware reais nao tem qualquer efeito sobre o codigo de 
canvas que voce escreve. 

Por padrao, um elemento <canvas> e exibido na tela com o tamanho (em pixels CSS) especificado 
por seus atributos HTML width e height. No entanto, assim como qualquer elemento HTML, um 
elemento <canvas> pode ter seu tamanho na tela especificado por atributos de estilo CSS width e 
height. Se voce especiflca um tamanho na tela diferente das dimensoes reais do canvas, os pixels do 
canvas se ajustam conforme o necessario para caber nas dimensoes de tela especificadas pelos atribu¬ 
tos CSS. O tamanho do elemento canvas na tela nao afeta o numero de pixels CSS ou de hardware 
reservados no mapa de bits do canvas e o ajuste feito em uma operate de mudanqa de escala de uma 
imagem. Se as dimensoes na tela sao significativamente maiores do que as dimensoes reais do canvas, 
isso resulta em elementos graficos pixelizados. Isso e um problema para designers graficos e nao afeta 
a programaqao do canvas. 

21.4.4 Transforma^oes de sistema de coordenadas 

Conforme mencionado anteriormente, o sistema de coordenadas padrao de um canvas coloca a 
origem no canto superior esquerdo, tem as coordenadas X aumentando para a direita e as coorde¬ 
nadas Y aumentando para baixo. Nesse sistema padrao, as coordenadas de um ponto sao mapeadas 
diretamente em um pixel CSS (o qual entao e mapeado diretamente em um ou mais pixels do dis- 
positivo). Certas operates e atributos do canvas (como extrair valores brutos de pixel e conflgurar 
deslocamentos de sombra) sempre usam esse sistema de coordenadas padrao. Contudo, alem desse 
sistema de coordenadas, todo canvas tem uma “matriz de transformaqao atual” como parte de seu 
estado graflco. Essa matriz define o sistema de coordenadas atual do canvas. Na maioria das opera¬ 
tes de canvas, quando as coordenadas de um ponto sao especificadas, ele e considerado um ponto 
no sistema de coordenadas atual e nao no sistema de coordenadas padrao. A matriz de transformaqao 
atual e usada para converter as coordenadas especificadas nas coordenadas equivalentes do sistema 
de coordenadas padrao. 

O metodo setTransform() permite conflgurar a matriz de transform aqao de um canvas diretamen¬ 
te, mas as transformates de sistema de coordenadas normalmente sao mais faceis de especificar 
como uma sequencia de translates, rotates e operates de mudanqa de escala. A Figura 21-7 
ilustra essas operates e seus efeitos no sistema de coordenadas do canvas. O programa que pro- 
duziu a figura desenhou o mesmo conjunto de eixos sete vezes seguidas. A unica coisa que mudou 
a cada vez foi a transformable atual. Observe que as transformates afetam o texto e tambem as 
linhas desenbadas. 

O metodo translate() simplesmente move a origem do sistema de coordenadas para a esquerda, 
para a direita, para cima ou para baixo. O metodo rotate() gira os eixos no sentido horario pelo 
angulo especificado. (A API Canvas sempre especiflca angulos em radianos. Para converter graus 
em radianos, divida por 180 e multiplique por Math.PI.) O metodo scale() aumenta ou diminui 
distancias ao longo dos eixos X ou Y. 
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Passar um fator de escala negativo para o metodo scale() rebate esse eixo em torno da origem, como 
se fosse refletido em um espelho. Isso foifeito no canto inferior esquerdo daFigura21-7: translate() 
foi usado para mover a origem para o canto inferior esquerdo do canvas e, entao, scale() foi usado 
para rebater o eixo Y de modo que as coordenadas Y aumentassem a medida que subimos na pagina. 
Um sistema de coordenadas rebatido como esse e conhecido nos cursos de algebra e pode ser util para 
representar pontos de dados em graficos. Note, entretanto, que ele torna o texto dificil de ler! 

21.4.4.1 Entendendo as transforma^oes matematicamente 

Acho mais facil entender as transformafoes geometricamente, considerando translateQ, rotateQ e 
scale() como uma transforma^ao dos eixos do sistema de coordenadas conforme ilustrado na Figura 
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21-7. Tambem e possfvel entender as transforma^oes algebricamente, como equates que mapeiam 
as coordenadas de um ponto (x,y) no sistema de coordenadas, transformado de volta para as coor- 
denadas do mesmo ponto (x' ,y') no sistema de coordenadas anterior. 

A chamada de metodo c.translate(dx,dy) pode ser descrita com as seguintes equates: 
x' = x + dx; // Uma coordenada X igual a 0 no novo sistema e dx no antigo 

y' = y + dy; 

As operates de mudan^a de escala tern equates igualmente simples. Uma chamada c. scalefsx, sy) 
pode ser descrita como segue: 

y' = sy * y; 

As rotaffies sao mais complicadas. A chamada c.rotate(a) e descrita pelas seguintes equates trigo- 
nometricas: 

x' = x * cos(a) - y * sin(a); 
y' = y * cos(a) + X * sin(a); 

Observe que a ordem das transforma^oes importa. Suponha que comecemos com o sistema de co¬ 
ordenadas padrao de um canvas e, entao, o translademos e depois mudemos sua escala. Para mapear 
o ponto (x,y) no sistema de coordenadas atual de volta para o ponto (x" ,y") no sistema de coor¬ 
denadas padrao, devemos primeiro aplicar as equates de mudanfa de escala para mapear o ponto 
em um ponto intermediario (x', y') no sistema de coordenadas transladado, mas sem mudanfa de 
escala, e entao usar as equates de transla^ao para mapear desse ponto intermediario ate (x" ,y"). 
O resultado e este: 
x'' = sx*x + dx; 

y" = sy*y + dy; 

Se, por outro lado, chamassemos scale!) antes de chamar translate!), as equates resultantes se- 
riam diferentes: 

x" = sx*(x + dx); 
y" = sy*(y + dy); 

O importante a lembrar ao se pensar algebricamente sobre as sequencias de transforma?6es e que 
voce deve ir da ultima transformaqao (a mais recente) para a primeira. Contudo, ao pensar geometri- 
camente sobre eixos transformados, voce vai da primeira transforma^ao para a ultima. 

As transformafoes suportadas pelo canvas sao conhecidas como transformagoes afins. As transforma- 
foes afins podem modificar as distancias entre pontos e os angulos entre linhas, mas linhas paralelas 
sempre permanecem paralelas apos uma transforma^ao afim - nao e possfvel, por exemplo, especi- 
ficar uma distor^ao de lente olho de peixe com uma transforma^ao afim. Uma transforma^ao afim 
arbitraria pode ser descrita pelos seis parametros a ate f nas seguintes equates: 

x' = ax + cy + e 
y' = bx + dy + f 

Voce pode aplicar uma transforma^ao arbitraria no sistema de coordenadas atual, passando esses seis 
parametros para o metodo transform!). A Figura 21-7 ilustra dois tipos de transformagoes - cisa- 
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lhamentos e rotates em torno de um ponto especificado - que podem ser implementadas com o 
metodo transform() como segue: 

// Transformacao de cisalhamento: 

// x' = x + kx*y; 

// y' = y + ky*x; 

function shear(c,kx,ky) { c.transform(l, ky, kx, 1, 0, 0 ); } 

// Cira theta radianos no sentido horario em torno do ponto (x,y) 

// Isso tambem pode ser feito com uma sequencia translagao,rotagao,translagao 
function rotateAbout(c,theta,x,y) { 

var ct = Math.cos(theta), st = Math.sin(theta); 
c.transform(ct, -st, st, ct, -x*ct-y*st+x, x*st-y*ct+y); 

} 

O metodo setTransformQ recebe os mesmos argumentos que transform(), mas em vez de transfor- 
mar o sistema de coordenadas atual, ele ignora o sistema amal, transforma o sistema de coordenadas 
padrao e torna o resultado o novo sistema de coordenadas atual. setTransform() e util para redefinir 
o canvas temporariamente em seu sistema de coordenadas padrao: 

c.saveQ; // Salva o sistema de coordenadas atual 

c.setTransform(i,0,0,1,0,0); // Reverte para o sistema de coordenadas padrao 

// Efetua operacoes usando as coordenadas de pixel CSS padrao 
c.restoreQ; // Restaura o sistema de coordenadas salvo 


21.4.4.2 Exemplo de transforma^ao 

O Exemplo 21-6 demonstra o poder das transformagoes de sistema de coordenadas, usando os me- 
todos translateQ, rotateQ e scaleQ recursivamente para desenhar um fractal de floco de neve de 
Koch. A saida desse exemplo aparece na Figura 21-8, que mostra flocos de neve de Koch com niveis 
de recursividade 0, 1, 2, 3 e 4. 



O codigo que produz essas figuras e elegante, mas o uso de transformagoes recursivas de sistemas 
de coordenadas o tornam um tanto dificil de entender. Mesmo que voce nao acompanhe todas as 
nuangas, note que o codigo contem apenas uma chamada do metodo lineToQ. Todo segmento de 
linha na Figura 21-8 e desenhado como segue: 
c.lineTo(len, 0); 
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O valor da variavel len nao muda durante a execu^ao do programa, de modo que a posicjao, a 
orienta^ao e o comprimento de cada um dos segmentos de linha sao determinados por translates, 
rotates e operates de mudan^a de escala. 


Exemplo 21-6 Um floco de neve de Koch com transformates 

var deg = Math.PI/180; // Para converter graus em radianos 

// Desenha um fractal de floco de neve de Koch de nivel n no contexto canvas c 
// com o canto inferior esquerdo em (x,y) e comprimento lateral len. 
function snowflake(c, n, x, y, len) { 


«()j 
c.translated,y); 
c.moveTo(0,0); 
leg(n); 

c.rotate(-120*deg); 

leg(n); 

c.rotate(-i20*deg); 

leg(n); 

c.closePath(); 
c. restored; 


// Salva a transformacao corrente 

// Translada a origem para o ponto de partida 

// Inicia um novo subcaminho na nova origem 

// Desenha o primeiro trecho do floco de neve 

// Agora gira 120 graus no sentido anti-horario 

// Desenha o segundo trecho 

// Gira novamente 

// Desenha o ultimo trecho 

// Fecha o subcaminho 

// E restaura a transformacao original 


// Desenha um trecho de um floco de neve de Koch de nivel n. 

// Esta funcao deixa o ponto atual na extremidade do trecho que 

// desenhou e translada o sistema de coordenadas de modo que o ponto atual seja 

// ( 0 , 0 ). 

// Isso significa que voce pode chamar rotated facilmente apos desenhar um trech 
function leg(n) { 
c.saved; 
if (n == o) { 

c.lineTo(len, 0); 

} 

else { 

c.scale(i/3,i/3); 
leg(n-i); 
c.rotate(60*deg); 
leg(n-i); 

c.rotate(-120*deg); 
leg(n-i); 
c.rotate(60*deg); 
leg(n-i); 

} 

c. restored; 
c.translate(len, 0); 


} 


// Salva a transformacao atual 
// Caso nao recursivo: 

// Desenha apenas uma linha horizontal 

// Caso recursivo: desenha 4 subtrechos como: \/ 

// Os subtrechos tern 1/3 do tamanho deste trecho 
// Recursividade para o primeiro subtrecho 
// Gira 60 graus no sentido horario 
// Segundo subtrecho 
// Gira 120 graus para tras 
// Terceiro subtrecho 

// Gira de volta para a nossa direcao original 
// Subtrecho final 

// Restaura a transformacao 

// Mas translada para fazer o final do trecho (0,0) 


snowflake(c,0,5,115,125); 
snowflake(c,1,145,115,125); 
snowf lake (c, 2,285,115,125); 
snowf lake (c, 3,425,115,125); 
snowf lake (c, 4,565,115,125); 
c.stroked; 


// Um floco de neve de nivel 0 e um triangulo equilatero 
// Um floco de neve de nivel l e uma estrela de 6 lados, 
// etc. 

// Um floco de neve de nivel 4 parece um floco de neve! 
// Traqa esse caminho muito complicado 
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21.4.5 Desenhando e preenchendo curvas 

Um caminho e uma sequencia de subcaminhos e um subcaminho e uma sequencia de pontos co- 
nectados. Nos caminhos que definimos na Segao 21.4.1, os pontos eram conectados com segmentos 
de linha retos, mas nem sempre isso precisa ser assim. O objeto CanvasRenderingContext2D define 
varios metodos que adicionam um novo ponto no subcaminho e conectam o ponto atual a esse novo 
ponto com uma curva: 

arc() 

Este metodo adiciona um arco no subcaminho atual. Ele conecta o ponto atual ao initio do 
arco com uma linha reta e, entao, conecta o initio do arco ao final dele com uma parte de um 
circulo, deixando a extremidade do arco como o novo ponto atual. O arco a ser desenhado 
e especificado com seis parametros: as coordenadas X e Y do centra de um circulo, o raio do 
circulo, os angulos inicial e final do arco e a diregao (sentido horario ou anti-horario) do arco 
entre esses dois angulos. 

arcToQ 

Este metodo desenha uma linha reta e um arco circular exatamente como o metodo arc(), mas 
especifica o arco a ser desenhado usando parametros diferentes. Os argumentos de arcTo() 
especificam pontos PI e P2 e um raio. O arco adicionado ao caminho tern o raio especificado 
e e tangente a linha entre o ponto atual e PI e tambem a linha entre PI e P2. Esse metodo 
aparentemente incomum de especificar arcos na verdade e muito util para desenhar formas 
com cantos arredondados. Se voce especifica um raio 0, esse metodo desenha apenas uma 
linha reta do ponto atual ate P1. Entretanto, com um raio diferente de zero, ele desenha uma 
hnha reta do ponto atual na diregao de PI e entao curva essa hnha em um circulo ate que se 
dirija na diregao de P2. 

bezierCurveToQ 

Este metodo adiciona um novo ponto P no subcaminho e o conecta no ponto atual usando 
uma curva Bezier cubica. A forma da curva e especificada pelos dois “pontos de contrale” Cl 
e C2. No initio da curva (no ponto atual), ela vai na diregao de Cl. No final (no ponto P), a 
curva chega a partir da diregao de C2. Entre esses pontos, a diregao da curva varia ligeiramen- 
te. O ponto P se torna o novo ponto atual do subcaminho. 

quadraticCurveTo() 

Este metodo e como bezierCurveToQ, mas utiliza uma curva Bezier quadratica, em vez de 
cubica, e tern apenas um ponto de controle. 

Esses metodos podem ser usados para desenhar caminhos como os da Figura 21-9. 
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Figura 21-9 Caminhos curvos em um canvas. 


O Exemplo 21-7 mostra o codigo usado para criar a Figura 21-9. Os metodos demonstrados nesse 
codigo sao alguns dos mais complicados da API Canvas. Consulte a sefao de referenda para ver 
detalhes completos sobre os metodos e seus argumentos. 


Exemplo 21-7 Adicionando curvas em um caminho 

// Uma funcao utilitaria para converter angulos de graus para radianos 
function rads(x) { return Math.PI*x/l80; } 


// Desenha um circulo. Mude a escala e gire, caso queira uma elipse. 

// Nao ha um ponto atual; portanto, desenha apenas o circulo sem uma linha reta a partir 

// do ponto atual ate o comeqo do circulo. 

c.beginPath(); 

c.arc(75,l00,50, // Centraliza em (75,100), raio 50 

0,rads(560),false); // Vai no sentido horario de 0 a 360 graus 


/ Desenha u 


// positivo. 

// Note que arc() adiciona u 
c.moveTo(200, 100); 
c.arc(200, 100, 50, 

rads(-60), rads(0), 
false); 

c.closePath(); 


linha. 0s angulos sao medidos no sentido horario a partir d 


i linha do ponto atual ate o inicio do arco. 

// Comeca no centro do circulo 

// Centro e raio do circulo 

// comeca no angulo -60 e vai ate o angulo 0 

// false significa sentido horario 

// Adiciona raio de volta ate o centro do circulo 


// Mesma cunha, dire^ao oposta 
c.moveTo(325, 100); 

c.arc(325, 100, 50, rads(-60), rads(O), true); // sentido anti-horario 
c.closePath(); 


// Usa arcToQ para cantos arredondados. Aqui, desenhamos um quadrado 
// o canto superior esquerdo em (400,50) e cantos de raios variados. 
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c.moveTo(450, 50); // Comeca no meio da borda superior. 

c.arcTo(500,50,500,150,30); // Adiciona parte da borda superior e o canto superior 

c.arcTo(500,150,400,150,20); // Adiciona a borda direita e o canto inferior esquerdo. 
c.arcTo(400,150,400,50,10); // Adiciona a borda inferior e o canto inferior esquerdo. 

c.arcTo(400,50,500,50,0); // Adiciona a borda esquerda e o canto superior esquerdo. 

c.closePath(); // Fecha o caminho para adicionar o restante da borda superior. 

// Curva Bezier quadratica: um ponto de controle 
c.moveTo(75, 250); // Comeca em (75,250) 

c.quadraticCurveTo(l00,2O0, 175, 250); // Curva ate (175,250) 

c.fillRect(l00-3,200-3,6,6); // Marca o ponto de controle (100,200) 

// Curva Bezier cubica 
c.moveTo(200, 250); 

c.bezierCurveTo(220,220,280,280,300,250) 
c.fillRect(220-3,220-3,6,6); 
c.fillRect(280-3,280-3,6,6); 

// Define alguns atributos graficos e desenha as curvas 

c.fillStyle = "#aaa"; // Preenchimentos cinza 

c.lineWidth = 5; // Linhas pretas de 5 pixels (por default) 

c.fillQ; // Preenche as curvas 

c.strokeQ; // Tra;a seus contornos 

21.4.6 Retangulos 

CanvasRenderingContext2D define quatro metodos para desenhar retangulos. O Exemplo 21-7 
usou um deles, fillRectQ, para marcar os pontos de controle das curvas Bezier. Todos esses quatro 
metodos de retangulo esperam dois argumentos que especificam um canto do retangulo, seguidos 
de sua largura e altura. Normalmente, voce especifica o canto superior esquerdo e, entao, passa uma 
largura positiva e uma altura positiva, mas tambem pode especificar outros cantos e passar dimen- 
soes negativas. 

fillRectQ preenche o retangulo especificado com o fillStyle atual. strokeRectQ traga o contorno 
do retangulo especificado usando o strokeStyle atual e outros atributos de linha. clearRect() e como 
fillRectQ, mas ignora o estilo de preenchimento atual e preenche o retangulo com pixels pretos 
transparentes (a cor padrao de todos os canvas em branco). O importante sobre esses tres metodos e 
que eles nao afetam o caminho atual nem o ponto atual dentro desse caminho. 

O ultimo metodo de retangulo e chamado rectQ e nao afeta o caminho atual: ele adiciona o re¬ 
tangulo especificado (em seu proprio subcaminho) no caminho. Assim como outros metodos de 
definigao de caminho, ele nao preenche nem traga nada sozinho. 

21.4.7 Cores, transparency, degrades e padroes 

Os atributos strokeStyle e fillStyle especificam como as linhas sao tra^adas e as regioes preenchidas. 
Frequentemente, esses atributos sao usados para especificar cores opacas ou translucidas, mas voce 
tambem pode configura-los como objetos CanvasPattern ou CanvasGradient para tra^ar ou preencher 
com uma imagem de fundo repetida ou com um degrade (gradiente) linear ou radial de cores. Alem 
disso, voce pode configurar a propriedade globalAlpha para tornar translucido tudo que desenhar. 


// Comeqa em (200,250) 

// Curva ate (300,250) 

// Marca os pontos de controle 
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Para especificar uma cor uniforme, use um dos nomes de cor definidos pelo padrao HTML4 1 ou 
uma string de cor CSS: 

context.strokeStyle = "blue"; // Traca linhas em azul 
context.fillStyle = "#aaa"; // Preenche areas com cinza-claro 


O valor padrao de strokeStyle e fillStyle e “#000000”: preto opaco. 


Os navegadores atuais suportam cores CSS3 e permitem o uso dos espatjos de cores RGB, RGB A, 
HSL e HSLA, alem das cores RGB hexadecimais basicas. Aqui estao alguns exemplos: 


"#f44", // 
"#44ff44", // 
"rgb(60, 60, 255)", // 
"rgb(l00%, 25%, 100%)", // 
"rgba(l00%, 25%, 100%, 0.5)", // 
"rgba(0j0,0,0)", // 
"transparent”, // 
"hsl(60, 100%, 50%)", // 
"hsl(60, 75%, 50%)", // 
"hsl(60, 100%, 75%)", // 
"hsl(60, 100%, 25%)", // 
"hsla(60, 100%, 50%, 0.5)", // 

]; 


Valor RGB hexadecimal: vermelho 

Valor RRGGBB hexadecimal: verde 

RGB como inteiros 0-255: azul 

RGB como porcentagens: violeta 

RGB mais alfa 0-1: violeta translucido 

Preto completamente transparente 

Sinonimo do anterior 

Amarelo totalmente saturado 

Amarelo menos saturado 

Amarelo totalmente saturado, mais claro 

Amarelo totalmente saturado, mais escuro 

Amarelo totalmente saturado, 50% opaco 


O espa?o de cores HSL define uma cor a partir de tres valores que especificam matiz, satura?ao e 
brilho. Matiz e um angulo em graus em torno de uma roda de cores. Um matiz 0 e vermelho, 60 e 
amarelo, 120 e verde, 180 e ciano, 240 e azul, 300 e magenta e 360 volta para vermelho novamente. 
A satura^ao descreve a intensidade da cor e e especificada como uma porcentagem. Cores com 0% 
de saturado sao tons cinzas. O brilho descreve o quanto uma cor e clara ou escura e tambem e espe¬ 
cificada como uma porcentagem. Qualquer cor HSL com 100% de brilho e branco puro e qualquer 
cor com 0% de brilho e preto puro. O espa?o de cores HSLA e como o HSL, mas adiciona um valor 
alfa que varia de 0.0 (transparente) a 1.0 (opaco). 

Se quiser trabalhar com cores transliicidas, mas nao especificar explicitamente um canal alfa para 
cada cor, ou se quiser adicionar translucidez em imagens ou padroes opacos (por exemplo), pode 
configurar a propriedade globalAlpha. Cada pixel desenhado tera seu valor alfa multiplicado por 
globalAlpha. O padrao e 1, o qual nao adiciona transparency. Se configurar globalAlpha como 0, 
tudo que desenhar sera totalmente transparente e nada vai aparecer no canvas. Se configurar essa 
propriedade como 0.5, os pixels que de outro modo seriam opacos vao ser 50% opacos. E os pixels 
que seriam 50% opacos serao 25% opacos. Se configurar globalAlpha, todos os seus pixels serao 
translucidos e talvez voce tenha de pensar em como esses pixels sao combinados (ou “compostos”) 
com os pixels sobre os quais sao desenhados - consulte a Se^ao 21.4.13 para ver detalhes sobre mo- 
dos de composRao de Canvas. 


Aqua, black, blue, fuchsia, gray, green, lime,; 


r, navy, olive, purple, red, silver, teal, white e yellow. 
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Em vez de desenhar com cores uniformes (mas possivelmente translucidas), voce pode usar gradien- 
tes de cor e repetir imagens ao preencher e tragar caminhos. A Figura 21-10 mostra um retangulo 
tragado com linhas grossas e um estilo de tragado padronizado sobre um preenchimento de gra- 
diente linear e sob um preenchimento de gradiente radial translucido. Os trechos de codigo a seguir 
mostram como o padrao e os gradientes foram criados. 

Para preencher ou tragar usando uma imagem de fundo padrao, em vez de uma cor, configure fills- 
tyle ou strokeStyle com o objeto CanvasPattern retornado pelo metodo createPattern() do objeto 
contexto: 


var image = document.getElementById("myimage"); 
c.fillStyle = c.createPattern(image, "repeat"); 

O primeiro argumento de createPatternQ especifica a imagem a ser usada como padrao. Deve ser 
um elemento <img>, <canvas> ou <video> do documento (ou um objeto imagem criado com a cons- 
trutora ImageQ). O segundo argumento normalmente e “repeat”, para repetir o preenchimento de 
imagem independente do tamanho da imagem, mas voce tambem pode usar “repeat-x”, “repeat-y” 
ou “no-repeat”. 


Note que e possivel usar um elemento <canvas> (mesmo que nunca tenha sido adicionado no docu¬ 
mento e nao esteja visfvel) como fonte de padrao para outro <canvas>: 


var offscreen = document.createElement("canvas"); 
offscreen.width = offscreen.height = 10; 
offscreen,getContext("2d").strokeRect(0,0,6,6); 
var pattern = c.createPattern(offscreen,"repeat"); 


// Cria um canvas fora da tela 
// Configura seu tamanho 
// Obtem seu contexto e desenha 
// E o utiliza como padrao 


Para preencher (ou tragar) com um gradiente de cor, configure fillStyle (ou strokeStyle) com um 
objeto CanvasGradient retornado pelos metodos createLinearGradientQ ou createRadialGradient() 
do contexto. Criar degrades e um processo de varias etapas e utiliza-los e mais diffcil do que usar 
padroes. 

O primeiro passo e criar o objeto CanvasGradient. Os argumentos de createLinearGradientQ sao 
as coordenadas de dois pontos que definem uma linha (nao precisa ser horizontal nem vertical) 
ao longo da qual as cores vao variar. Os argumentos de createRadialGradientQ especificam os 
centros e raios de dois circulos. (Nao precisam ser concentricos, mas o primeiro circulo nor¬ 
malmente flea inteiramente dentro do segundo.) As areas dentro do circulo menor ou fora do 
maior serao preenchidas com cores uniformes: as areas entre os dois serao preenchidas com um 
gradiente de cor. 

Apos criar o objeto CanvasGradient e definir as regioes do canvas que serao preenchidas, voce 
deve definir as cores do gradiente, chamando o metodo addColorStopQ do CanvasGradient. O 
primeiro argumento desse metodo e um numero entre 0.0 e 1.0. O segundo argumento e uma 
especificagao de cor CSS. Voce deve chamar esse metodo pelo menos duas vezes para definir um 
gradiente de cor simples, mas pode chama-lo mais vezes. A cor em 0.0 vai aparecer no initio do gra¬ 
diente e a cor em 1.0 vai aparecer no fim. Se voce especificar mais cores, elas vao aparecer na posigao 
fracionaria especificada dentro do gradiente. Em outro lugar, as cores serao interpoladas suavemente. 
Aqui estao alguns exemplos: 
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// Um gradiente linear, diagonalmente no canvas (supondo nenhuma transformaqao) 
var bgfade = c.createLinearGradient(0,0,canvas.width,canvas.height); 
bgfade.addColorStop(0.0, "#88f"); // Comeqa com azul-claro no lado superior esquerdo 

bgfade.addColorStop(l.O, "#fff"); // Desbota para branco no lado inferior direito 


// Um gradiente entre dois circulos concentricos. Transparente no meio 
// desbotando para cinza translucido e depois de volta para transparente. 
var peekhole = c.createRadialGradient(300,300,i00, 300,300,300); 
peekhole.addColorStop(0.0, "transparent"); // Transparente 

peekhole.addColorStop(0.7, "rgba(l00,100,100,.9)"); // Cinza translucido 

peekhole.addColorStop(l.O, "rgba(0,0,0,0)"); // Transparente outra vez 


Um ponto importante a entender sobre os gradientes e que eles nao sao independentes da posifao. 
Quando cria um gradiente, voce especifica limites para ele. Entao, se voce tentar preencher uma area 
fora desses limites, vai obter a cor uniforme definida em uma ou na outra extremidade do gradiente. 
Se voce define um gradiente ao longo da linha entre (0,0) e (100, 100), por exemplo, so deve usar 
esse gradiente para preencher objetos localizados dentro do retangulo (0,0,100,100). 


O elemento grafico mostrado na Figura 21-10 foi criado com o padrao pattern e os gradientes 
bgfade e peekhole definidos anteriormente, usando o codigo a seguir: 


c.fillStyle = bgfade; 
c.fillRect(0,0,600,600); 
c.strokeStyle = pattern; 
c.lineWidth = 100; 
c.strokeRect(100,100,400,400); 
c.fillStyle = peekhole; 
c.fillRect(0,0,600,600); 


// Comeca com o gradiente linear 

// Preenche o canvas inteiro 

// Usa o padrao para tracar linhas 

// Usa linhas realmente grossas 

// Desenha um quadrado grande 

// Troca para o gradiente radial 

// Cobre a tela de desenho com esse preenchimento 

// translucido 


21.4.8 Atributos de desenho de linhas 

Voce ja viu a propriedade lineWidth, que especifica a largura das linhas desenhadas por stroke () e 
strokeRect (). Alem de lineWidth (e strokeStyle, e claro), existem outros tres atributos graficos que 
afetam o desenho de linhas. 

O valor padrao da propriedade lineWidth e 1 e ela pode ser configurada com qualquer niimero posi- 
tivo, mesmo valores fracionarios menores do que 1. (Linhas menores do que um pixel de largura sao 
desenhadas com cores translucidas, de modo que parecem menos escuras do que as linhas de 1 pixel 
de largura.) Para se entender completamente a propriedade lineWidth, e importante visualizar os ca- 
minhos como linhas unidimensional infinitamente finas. As linhas e curvas desenhadas pelo metodo 
strokeQ sao centralizadas no caminho, com metade de lineWidth em cada lado. Se estiver t rattan do 
um caminho fechado e so quiser que a linha aparefa fora do caminho, trace o caminho primeiro e, 
entao, preencha com uma cor opaca para ocultar a parte do tra^o que aparece dentro do caminho. 
Ou entao, se so quiser que a linha apareqa dentro de um caminho fechado, chame os metodos save() 
e clip() (Se^ao 21.4.10) primeiro e, entao, chame strokeQ e restoreQ. 

As larguras de linha sao afetadas pela transforma?ao atual, conforme se pode comprovar nos eixos 
em escala da Figura 21-7. Se voce chama scale(2,i) para mudar a escala da dimensao X e deixa Y 
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Figura 21-10 Preenchimentos de padrao e gradiente. 


intacta, as linhas verticais serao duas vezes mais largas que as horizontais desenhadas com a mes- 
ma configuragao de lineWidth. E importante entender que a largura da linha e determinada por 
lineWidth e pela transformagao atual no momento em que stroke () e chamado e nao no momento 
em que lineTo() ou outro metodo de construgao de caminho e chamado. 

Os outros tres atributos de desenho de linhas afetam a aparencia das extremidades nao conectadas de 
caminhos e dos vertices onde dois segmentos de caminho se encontram. Eles tern pouco impacto vi¬ 
sual em linhas estreitas, mas fazem uma enorme diferenga quando voce esta desenhando com linhas 
grossas. Duas dessas proptiedades estao ilustradas na Figura 21 -11. A figura mostra o caminho como 
uma linha preta fina e o trago como a area cinza que a circunda. 
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Figura 21 -11 Os atributos lineCap e lineJoin. 


A propriedade lineCap especifica como as extremidades de um subcaminho aberto sao “arremata- 
das”. O valor “butt” (o padrao) significa que a linha termina abruptamente no ponto extremo. O 
valor “square” significa que a linha se estende por metade da sua largura alem do ponto extremo. E 
o valor “round” significa que a linha e estendida com um meio-cfrculo (de raio igual a metade da 
largura da linha) alem do ponto extremo. 

A propriedade lineJoin especifica como os vertices entre segmentos de subcaminho sao conectados. 
O valor padrao e “miter”, ou seja, as bordas externas dos dois segmentos de caminho sao estendidas 
ate se encontrarem em um ponto. O valor “round” significa que o vertice e arredondado e o valor 
“bevel” significa que o vertice e cortado com uma linha reta. 

A ultima propriedade de desenho de linha e miterLimit, que so se aplica quando lineJoin e “miter”. 
Quando duas linhas se encontram em um angulo agudo, a jun^ao entre elas pode se tornar muito 
longa e essas jun^oes chanfradas longas atrapalham visualmente. A propriedade miterLimit coloca 
um limite superior no comprimento da jun<jao. Se a juncjao em determinado vertice vai ser mais 
longa do que metade da largura da linha vezes miterLimit, esse vertice vai ser desenhado com uma 
jun^ao chanfrada, em vez de uma jun^ao alongada. 

21.4.9 Texto 

Para desenhar texto em um canvas, normalmente e usado o metodo fillText(), o qual desenha texto 
usando a cor (ou degrade ou padrao) especificada pela propriedade fillStyle. Para efeitos especiais 
em tamanhos de texto grandes, strokeT ext () pode ser usado para desenhar o contorno dos caracteres 
de texto individuals (um exemplo de texto com contorno aparece na Figura 21-13). Os dois me- 
todos recebem o texto a ser desenhado como primeiro argumento e as coordenadas X e Y do texto 
como segundo e terceiro argumentos. Nenhum deles afeta o caminho atual ou o ponto atual. Como 
voce pode ver na Figura 21-7, o texto e afetado pela transforma^ao atual. 

A propriedade font especifica a fonte a ser usada para o texto. O valor deve ser uma string na mesma 
sintaxe do atributo CSS font. Alguns exemplos: 

"48pt sans-serif" 

"bold I8px Times Roman" 

"italic 12pt monospaced" 

"bolder smaller serif" // mais nitida e menor do que a fonte do <canvas> 




Capi'tulo 21 Mfdia e graficos em scripts 637 


A propriedade textAlign especifica como o texto deve ser alinhado horizontalmente com relaQo a 
coordenadaX passada para fillText( ) ou para strokeTextQ. A propriedade textBaseline especifica 
como o texto deve ser alinhado verticalmente com relagao a coordenada Y. A Figura 21-12 ilustra os 
valores permitidos para essas propriedades. A linha fina proxima a cada string de texto e a linha de 
base e o quadradinho marca o ponto (x,y) que foi passado para fillTextQ. 


start 

top Abcefg 
hanging Abcefg 
middle A bcefg 
alphabetic Abcefg 
ideographic Abcefg 
bottom Abcefg 


left center 
Abcefg Abcefg 
Abcefg Abcefg 
Abcefg Abcefg 
Abcefg Abcefg 
Abcefg Abcefg 
Abcefg Abcefg 


right end 

Abcefg Abcefg 
Abcefg Abcefg 
Abcefg 1 Abcefg 1 
Abcefg Abcefg , 
Abcefg Abcefg 
Abcefg Abcefg 



Figura 21-12 As propriedades textAlign e textBaseline. 


O padrao de textAlign e “start”. Note que para texto da esquerda para a direita, o alinhamento 
“start” e o mesmo que “left” e o alinhamento “end” e o mesmo que “right”. Contudo, se voce confi- 
gura o atributo dir do elemento <canvas> como “rd” (direita para a esquerda), o alinhamento “start” 
sera o mesmo que “right” e “end” sera o mesmo que “left”. 

O padrao de textBaseline e “alphabetic”, e isso e adequado para caracteres latinos e similares. O 
valor “ideographic” e usado com caracteres ideograficos, como chines e japones. O valor “hanging” 
e destinado para uso com caracteres Devangari e similares (que sao usados por muitos idiomas da 
India). As linhas de base “top”, “middle” e “bottom” sao puramente geometricas, baseadas no “qua- 
drado erne” da fonte. 

fillTextQ e strokeTextQ recebem um quarto argumento opcional. Se fornecido, esse argumento es¬ 
pecifica a largura maxima do texto a ser exibido. Se o texto for mais largo do que o valor especificado 
quando desenhado usando a propriedade font, o canvas o fara caber, mudando sua escala ou usando 
uma fonte mais estreita ou menor. 

Caso voce mesmo precise medir o texto antes de desenha-lo, passe-o para o metodo measureTextQ. 
Esse metodo retorna um objeto TextMetrics que especifica as medidas do texto quando desenhado 
com o valor de font atual. Quando este livro estava sendo escrito, a unica “metrica” contida no obje¬ 
to TextMetrics era a largura. Consulte a largura na tela de uma string como segue: 
var width = c.measureText(text).width; 
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21.4.10 Recorte 

Apos definir um caminho, voce normalmente chama stroke () ou fill() (ou ambos). Voce tambem 
pode chamar o metodo clip() para definir uma regiao de recorte. Uma vez definida uma regiao de re¬ 
corte, nada sera desenhado fora dela. A Figura 21-13 mostra um desenho complexo produzido usando- 
-se regioes de recorte. A faixa vertical do meio e o texto ao longo da parte inferior da figura foram tra- 
?ados sem regiao de recorte e entao preenchidos depois que a regiao de recorte triangular foi definida. 



Figura 21-13 Tragos nao recortados e preenchimentos recortados. 


A Figura 21-13 foi gerada com o metodo polygon () do Exemplo 21-4 e o codigo a seguir: 

// Define alguns atributos de desenho 
c.font = "bold 60pt sans-serif"; // Fonte grande 
c.lineWidth = 2; // Linhas estreitas 

c.strokeStyle = "#000"; // Linhas pretas 

// Contorna um retangulo e algum texto 

c.strokeRect(l75, 25, 50, 325); // Uma faixa vertical no meio 

c.strokeText(''<canvas>", 15, 330); // Note strokeTextQ, em vez 


de fillTextQ 
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// Define um caminho complexo com um interior que esta fora. 

polygon(c,3,200,225,200); // Triangulo grande 

polygon(c,3,200,225,100,0,true);// Triangulo menor invertido dentro 

// Torna esse caminho a regiao de recorte. 

c.clipQ; 


// Trapa o caminho com uma linha de 5 pixels, inteiramente dentro da regiao de corte. 
c.lineWidth = 10; // Metade dessa linha de 10 pixels sera cortada 
c.strokeQ; 


// Preenche as partes do retangulo e o texto que estao dentro da regiao de recorte 
c.fillStyle = "#aaa" // Cinza-claro 

c.fillRect(l75, 25, 50, 325); // Preenche a faixa vertical 

c.fillStyle = "#888" // Cinza mais escuro 

c.fillText("<canvas>", 15, 330); // Preenche o texto 

E importante notar que, quando voce chama clip(), o proprio caminho atual e recortado na regiao 
de recorte atual e, entao, esse caminho recortado se torna a nova regiao de recorte. Isso significa que 
o metodo clip() pode reduzir a regiao de recorte, mas nunca aumenta-la. Nao ha um metodo para 
redefinir a regiao de recorte; portanto, antes de chamar clip(), normalmente voce deve chamar 
save() para que depois possa restaurar (com restoreQ) a regiao recortada. 


21.4.11 Sombras 

Quatro propriedades de atributo grafico do objeto CanvasRenderingContext2D controlam o dese- 
nho de sombras projetadas. Se voce configurar essas propriedades adequadamente, toda linha, area, 
texto ou imagem que desenhar vai receber uma sombra projetada, a qual vai fazer com que o item 
pare^a estar flutuando acima da superficie do canvas. A Figura 21-14 mostra sombras debaixo de um 
retangulo preenchido, um retangulo traqado e texto preenchido. 

A propriedade shadowColor especifica a cor da sombra. O padrao e preto totalmente transparente, 
sendo que as sombras nunca aparecem, a nao ser que voce configure essa propriedade com uma cor 
translucida ou opaca. Essa propriedade so pode ser configurada com uma string de cor - padroes e 
degrades nao sao permitidos para sombras. Usar uma cor de sombra translucida produz efeitos de 
sombra mais reahstas, pois permite que o fundo apare^a. 

As propriedades shadowOffsetX e shadowOffsetY especificam os deslocamentos X e Y da sombra. O 
padrao para as duas propriedades e 0, o que coloca a sombra diretamente embaixo do desenho, 
onde ela nao e visivel. Se voce configurar as duas propriedades com um valor positivo, as sombras 
vao aparecer abaixo e a direita do que for desenhado, como se houvesse uma fonte de luz acima e a 
esquerda, iluminando o canvas de fora da tela do computador. Deslocamentos maiores produzem 
sombras maiores e fazem os objetos desenhados parecerem estar flutuando “mais alto” no canvas. 

A propriedade shadowBlur especifica o quanto as bordas da sombra sao indistintas. O valor padrao e 
0, o qual produz sombras nitidas. Valores maiores produzem mais indistin^ao, ate um limite supe¬ 
rior definido pela implementa^ao. Essa propriedade e um parametro para uma fun^ao de indistin^ao 
gaussiana e nao um tamanho ou comprimento em pixels. 

O Exemplo 21-8 mostra o codigo usado para produzir a Figura 21-14 e demonstra cada uma dessas 
quatro propriedades de sombra. 
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Hello World 



Figura 21-14 Sombras geradas automaticamente. 


Exemplo 21-8 Configurando atributos de sombra 
// Define uma sombra sutil 

c.shadowColor = "rgba(l00,100,100,.4)"; // Cinza translucido 

c.shadowOffsetX = c.shadowOffsetY = 3; // Deslocamento de sombra para o lado inferior 

// direito 

c.shadowBlur = 5; // Suaviza as bordas da sombra 

// Desenha algum texto em uma caixa azul, usando essa sombra 
c.lineWidth = 10; 
c.strokeStyle = "blue"; 

c.strokeRect(lOO, 100, 300, 200); // Desenha urn retangulo 

c.font = "Bold 36pt Helvetica"; 

c.fillText("Hello World", 115, 225); // Desenha algum texto 

// Define uma sombra menos sutil. Urn deslocamento maior faz os itens "flutuar" mais alto. 
// Observe como a sombra transparente se sobrepoe a caixa azul. 
c.shadowOffsetX = c.shadowOffsetY = 20; 
c.shadowBlur = 10; 

c.fillStyle = "red"; // Desenha urn retangulo vermelho uniforme 

c.fillRect(50,25,200,65); // que flutua acima da caixa azul 
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As propriedades shadowOffsetX e shadowOffsetY sao sempre medidas no esparto de coordenadas pa¬ 
drao e nao sao afetadas pelos metodos rotate() ou scaleQ. Suponha, por exemplo, que voce gire o 
sistema de coordenadas em 90 graus para desenhar algum texto vertical e depois restaure o antigo 
sistema de coordenadas para desenhar texto horizontal. Tanto o texto vertical como o horizontal 
terao sombras orientadas na mesma diregao, o que provavelmente nao e o que se quer. Da mesma 
maneira, formas desenhadas com diferentes transformagoes de escala ainda terao sombras da mes- 

21.4.12 Imagens 

Alem dos elementos graficos vetoriais (caminhos, linhas, etc.), a API Canvas tambem suporta ima¬ 
gens de bitmap. O metodo drawlmage() copia os pixels de uma imagem de origem (ou de um retan- 
gulo dentro da imagem de origem) no canvas, mudando a escala e rotacionando os pixels da imagem 
conforme for necessario. 

drawImageQ pode ser chamado com tres, cinco ou nove argumentos. Em todos os casos, o primeiro 
argumento e a imagem de origem a partir da qual os pixels serao copiados. Esse argumento imagem 
frequentemente e um elemento <img> ou uma imagem fora da tela criada com a construtora Image(), 
mas tambem pode ser outro elemento <canvas> ou mesmo um elemento <video>. Se voce especificar 
um elemento <img> ou <video> que ainda esta carregando seus dados, a chamada de drawImageQ nao 
vai fazer nada. 

Na versao de drawImageQ com tres argumentos, o segundo e terceiro argumentos especificam as 
coordenadas X e Y nas quais o canto superior esquerdo da imagem sera desenhado. Nessa versao do 
metodo, a imagem de origem inteira e copiada no canvas. As coordenadas X e Ysao interpretadas no 
sistema de coordenadas atual e a imagem muda de escala e e rotacionada se for necessario. 

A versao de drawImageQ com cinco argumentos acrescenta os argumentos width e height aos argu¬ 
mentos x e y descritos anteriormente. Esses quatro argumentos definem um retangulo de destino 
dentro do canvas. O canto superior esquerdo da imagem de origem fica em (x,y) e o canto inferior 
direito fica em (x+width, y+height). Novamente, a imagem de origem inteira e copiada. O retangulo 
de destino e medido no sistema de coordenadas atual. Com essa versao do metodo, a imagem de 
origem vai mudar de escala para caber no retangulo de destino, mesmo que nenhuma transformagao 
de escala tenha sido especificada. 

A versao de drawImageQ com nove argumentos especifica um retangulo de origem e um retangulo 
de destino e copia somente os pixels dentro do retangulo de origem. Os argumentos de dois a cin¬ 
co especificam o retangulo de origem. Eles sao medidos em pixels CSS. Se a imagem de origem e 
outro canvas, o retangulo de origem usa o sistema de coordenadas padrao para esse canvas e ignora 
qualquer transformagao que tenha sido especificada. Os argumentos de seis a nove especificam o re¬ 
tangulo de destino no qual a imagem e desenhada e estao no sistema de coordenadas atual do canvas 
e nao no sistema de coordenadas padrao. 

O Exemplo 21-9 e uma demonstragao simples de drawImageQ. Ele usa a versao de nove argumentos 
para copiar pixels de uma parte de um canvas e desenha-los, ampliados e rotacionados, de volta no 


2 Quando este livro estava sendo escrito, a versao 5 do navegador Chrome da Google fazia isso errado e transformava os 
deslocamentos de sombra. 
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mesmo canvas. Como voce pode ver na Figura 21-15, a imagem e ampliada o suficiente para ser 
pixelizada. Voce pode ver os pixels translucidos usados para suavizar as bordas da linha. 



Figura 21 -15 Pixels ampliados com drawlmagef). 


Exemplo21-9 UsandodrawImageO 

// Desenha uma linha no lado superior esquerdo 

c.moveTo(5,5); 

c.lineTo(45,45); 

c.lineWidth = 8; 

c.lineCap = "round"; 

c.stroke(); 

// Define uma transformacao 
c.translate(50,i00); 

c.rotate(- 45 *Math.PI/180); // Endireita a linha 

c.scale(l0,10); // A amplia para que possamos ver os pixels individuais 

// Usa drawlmage para copiar a linha 
c.drawlmage(c.canvas, 

0, 0, 50, 50, // retangulo de origem: nao transformado 

0, 0, 50, 50); // retangulo de destino: transformado 

Alem de desenhar imagens em um canvas, tambem podemos extrair o conteudo de um canvas como 
uma imagem, usando o metodo toDataURLQ. Ao contrario de todos os outros metodos descritos 
aqui, toDataURL( ) e um metodo do proprio elemento Canvas e nao do objeto CanvasRenderingCon- 
text2D. Normalmente, voce chama toDataURL() sem argumentos e ele retorna o conteudo do canvas 
como uma imagem PNG, codificada como uma string usando um URL data:. O URL retornado e 
conveniente para uso com um elemento <img> e voce pode tirar um snapshot estatico de um canvas 
com codigo como o seguinte: 

var img = document.createElement("img"); // Cria um elemento <img> 

img.src = canvas.toDataURLQ; // Configura seu atributo src 

document.body.appendChild(img); // Anexa-o no documento 

Todos os navegadores sao obrigados a suportar o formato de imagem PNG. Algumas implementa- 
9oes tambem podem suportar outros formatos e voce pode especificar o tipo MIME desejado com o 
primeiro argumento opcional de toDataURL(). Consulte a pagina de referenda para ver os detalhes. 
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Ha uma importante restri^ao de seguran^a que voce deve saber quando usar toDataLIRL(). Para impe- 
dir vazamentos de informagao entre origens, toDataURL() nao funciona em elementos <canvas> que 
nao sao de “origem limpa”. Um canvas nao e de origem limpa se ja teve uma imagem desenhada nele 
(diretamente por meio de drawlmage() ou indiretamente por meio de um CanvasPattern) de origem 
diferente da do documento que contem o canvas. 

21.4.13 Fazendo composites 

Quando voce tra?a linhas, preenche regioes, desenha texto ou copia imagens, espera que os novos 
pixels sejam desenhados sobre os que ja estao no canvas. Se esta desenhando pixels opacos, eles sim- 
plesmente substituem os pixels que ja existem. Se esta desenhando com pixels transliicidos, o novo 
pixel (“origem”) e combinado com o antigo (“destino”) para que o pixel antigo apare^a por baixo do 
novo, de acordo com sua transparencia. 

Esse processo de combinar novos pixels de origem translucidos com pixels de destino ja exis- 
tentes e chamado de comp os if do e o processo de composite descrito anteriormente e a maneira 
padrao da API Canvas combinar pixels. Contudo, nem sempre voce quer que a composite) 
aconte^a. Suponha que voce tenha desenhado em um canvas usando pixels translucidos e agora 
quer fazer uma alteraQo temporaria nele e depois restaura-lo ao seu estado original. Uma manei¬ 
ra facil de fazer isso e copiar o canvas (ou uma regiao dele) em outro canvas fora da tela, usando 
drawImageQ. Entao, quando for ahora de restaurar o canvas, voce pode copiar seus pixels do que 
esta fora da tela, no qual os salvou, de volta para o canvas que esta na tela. Lembre-se, contudo, 
que os pixels que voce salvou eram translucidos. Se a composite estiver ativa, eles nao vao obs- 
curecer totalmente e apagar o desenho temporario que voce fez. Nesse cenario, voce precisa de 
um modo de desativar a composite: desenhar os pixels de origem e ignorar os pixels de destino 
independentemente da transparencia da origem. 

Para especificar o tipo de composite a ser feita, configure a propriedade globalCompositeOpera- 
tion. O valor padrao e “source-over”, ou seja, os pixels de origem sao desenhados “sobre” os pixels 
de destino e combinados com eles se a origem for translucida. Se voce configura essa propriedade 
como “copy”, a composite e desativada: os pixels de origem sao copiados no canvas sem altera- 
fao e os pixels de destino sao ignorados. Outro valor de globalCompositeOperation que as vezes e 
util e “destination-over”. Esse tipo de composite combina os pixels como se os novos pixels de 
origem fossem desenhados embaixo dos pixels de destino existentes. Se o destino e translucido 
ou transparente, parte da cor (ou toda ela) do pixel de origem fica visfvel na cor resultante. 

“source-over”, “destination-over” e “copy” sao tres dos tipos de composite mais usados, mas a 
API Canvas suporta 11 valores para o atributo globalCompositeOperation. Os nomes dessas ope¬ 
rates de composite sugerem o que elas fazem e voce pode aprender muito sobre composite 
combinando os nomes de operate com exemplos visuais de seu fiincionamento. A Figura21-16 
ilustra todas as 11 operates usando transparencia “bard”: todos os pixels envolvidos sao total¬ 
mente opacos ou totalmente transparentes. Em cada uma das 11 caixas, o quadrado e desenhado 
primeiro e serve como destino. Em seguida, globalCompositeOperation e configurada e o circulo e 
desenhado como origem. 
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Figura 21 -16 Operates de composigao com transparency hard. 


A Figura 21-17 e um exemplo semelhante que usa transparency “soft”. Nessa versao, o cfrculo de 
origem e o quadrado de destino sao desenhados com degrades de cor, de modo que os pixels tem 
uma variedade de transparencias. 

Talvez voce verifique que nao e tao facil entender as operates de composi^ao quando usadas com 
pixels translucidos como esses. Se tiver interesse em um entendimento mais aprofundado, a pagina 
de referenda de CanvasRenderingContext2D contem as equates que especificam como os valores de 
pixel individuals sao calculados a partir dos pixels de origem e de destino para cada uma das 11 
operates de compos 1910. 

Quando este livro estava sendo escrito, os fornecedores de navegador discordavam na implemen- 
ta^ao de 5 dos 11 modos de composiQo: “copy”, “source-in”, “source-out”, “destination-atop” e 
“destination-in” se comportavam de formas diferentes em diferentes navegadores e nao podiam ser 
usados de maneira portavel. A seguir esta uma explicaQo detalhada, mas voce pode pular para a 
proxima seQo, caso nao pretenda usar essas operates de composiQo. 
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Figura 21-17 Operates de composigao com transparency soft. 


Os cinco modos de composigao listados anteriormente ignoram os valores de pixel de destino no 
calculo dos pixels resultantes ou tornam o resultado transparente em qualquer lugar onde a origem 
seja transparente. A diferenga na implementagao esta relacionada a definigao dos pixels de origem. O 
Safari e o Chrome fazem composigao “de modo local”: somente os pixels realmente desenhados por 
fill(), stroke() ou outra operagao de desenho contam como parte da origem. E provavel que o IE9 
siga o exemplo. O Firefox e o Opera fazem composigao “globalmente”: todo pixel dentro da regiao 
de recorte atual e composto para cada operagao de desenho. Se a origem nao configura esse pixel, 
ele e tratado como preto transparente. No Firefox e no Opera, isso significa que os cinco modos 
de composigao ja listados apagam realmente os pixels de destino fora da origem e dentro da regiao 
de recorte. As figuras 21-16 e 21-17 foram geradas no Firefox e e por isso que as caixas em torno 
de “copy”, “source-in”, “source-out”, “destination-atop” e “destination-in” sao mais finas do que as 
outras: o retangulo em torno de cada amostra e a regiao de recorte e essas quatro operagoes de com¬ 
posigao apagam a parte do trago (metade de lineWidth) que cai dentro do caminho. Por comparagao, 
a Figura 21-18 e igual a Figura 21-17, mas foi gerada no Chrome. 
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Figura 21-18 Compondo de maneira local, em vez de globalmente. 


A versao draft da especializagao de HTML5 vigente quando este livro estava sendo escrito especifi- 
cava a estrategia de composigao global implementada pelo Firefox e pelo Opera. Os fornecedores de 
navegador sabem da incompatibilidade e nao estao satisfeitos com o estado atual da especificagao. 
Ha grande possibilidade de que a especificagao seja alterada para exigir composigao local, em vez de 
composigao global. 

Por fim, note que e possivel fazer composigao global em navegadores como o Safari e o Chrome, 
que implementam composigao local. Primeiramente, crie um canvas em branco fora da tela, com as 
mesmas dimensoes do canvas exibido na tela. Entao, desenhe seus pixels de origem no canvas fora da 
tela e use drawlmage () para copiar os pixels de fora da tela no canvas da tela e compo-los globalmente 
dentro da regiao de recorte. Nao ha uma tecnica geral para fazer composigao local em navegadores 
como o Firefox, que implementa composigao global, mas muitas vezes e possivel fazer uma aproxi- 
magao, definindo uma regiao de recorte apropriada antes de efetuar a operagao de desenho que sera 
composta de forma local. 
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21.4.14 Manipulagao de pixels 

O metodo getlmageDataQ retorna um objeto ImageData representando os pixels (como componen- 
tes R, G, B e A) brutos (nao pre multiplicados) de uma regiao retangular de seu canvas. Voce pode 
criar objetos ImageData em branco e vazios, com createlmageDataQ. Os pixels de um objeto Image- 
Data sao gravaveis, de modo que voce pode configura-los como quiser e depois copia-los de volta no 
canvas, com putImageData(). 

Esses metodos de manipula?ao de pixels fornecem acesso de nfvel muito baixo ao canvas. O re¬ 
tangulo passado para getlmageDataQ esta no sistema de coordenadas padrao: suas dimensoes sao 
medidas em pixels CSS e ele nao e afetado pela transforma^ao atual. Quando voce chama putlma- 
geDataQ, a posi^ao especificada tambem e medida no sistema de coordenadas padrao. Alem disso, 
putlmageDataQ ignora todos os atributos graficos. Ele nao faz composigao, nao multiplica pixels por 
globalAlpha e nao desenha sombras. 

Os metodos de manipulagao de pixels sao liteis para implementar processamento de imagens. O 
Exemplo 21-10 mostra como criar um motion blur simples ou efeito de “borrao” nos elementos 
graficos de um canvas. O exemplo demonstra getlmageDataQ e putlmageDataQ e mostra como ite- 
rar pelos valores de pixel e modifica-los em um objeto ImageData, mas nao explica essas coisas em 
detalhes. Para ver os detalhes completos sobre getlmageDataQ e putlmageDataQ, consulte as paginas 
de referenda de CanvasRenderingContext2D e para detalhes sobre esse objeto, consulte a pagina de 
referenda de ImageData. 

Exemplo 21-10 Motion blur com ImageData 

// Borra os pixels do retangulo a direita, produzindo um 

// tipo de motion blur, como se os objetos estivessem indo da direita para a esquerda. 

// n deve ser 2 ou mais. Valores maiores produzem borroes maiores. 

// 0 retangulo e especificado no sistema de coordenadas padrao. 
function smear(c, n, x, y, w, h) { 

// Obtem o objeto ImageData que representa o retangulo de pixels a borrar 
var pixels = c.getlmageDataQ,y,w,h); 

// Esse borrao e feito no local e exige apenas o ImageData de origem. 

// Alguns algoritmos de processamento de imagens exigem um ImageData adicional 
// para armazenar valores de pixels transformados. Se precisassemos de um buffer de 
// saida, poderiamos criar um novo ImageData com as mesmas dimensoes, como segue: 

// var output_pixels = c.createlmageData(pixels); 

// Essas dimensoes podem ser diferentes dos argumentos w e h: pode haver 
// mais de um pixel de dispositivo por pixel CSS. 
var width = pixels.width, height = pixels.height; 

// Este e o array de bytes que contem os dados de pixel brutos, da esquerda para a 
// direita e de cima para baixo. Cada pixel ocupa 4 bytes consecutivos na ordem 
// R,G,B,A. 

var data = pixels.data; 
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// Cada pixel apos o primeiro em cada linha e borrado por ser substituido por 
// l/n-esimo de seu proprio valor, mais m/n-esimos do valor do pixel anterior 


(var row = 0; row < height; row++) { // Para cada linha 
var i = row*width*4 +4; // 0 deslocamento do segundo pixel da linha 

for(var col = l; col < width; col++, i += 4) { // Para cada coluna 

data[i] = (data[i] + data[i- 4 ]*m)/n; // Componente de pixel vermelho 

data[i+l] = (data[i+l] + data[i-3]*m)/n; // Verde 

data[i+2] = (data[i+2] + data[i-2]*m)/n; // Azul 

data[i+3] = (data[i+3] + data[i-l]*m)/n; // Componente alfa 


} 

} 


// Agora copia os dados da imagem borrada de volta na mesma posi^ao na tela de desenho 
c.putImageData(pixels, x, y); 

} 

Note que getlmageDataQ esta sujeito a mesma restri^ao de seguran^a de varias origens que 
toDatallRLQ: ele nao funciona em um canvas em que uma imagem tenha sido desenhada (direta- 
mente por meio de drawImageQ ou indiretamente por meio de um CanvasPattern) e que tenha uma 
origem diferente da do documento que contem o canvas. 


21.4.15 Deteqao de sucesso 

O metodo isPointlnPathQ determina se um ponto especificado cai dentro (ou no limite) do cami- 
nho atual e, em caso positivo, retorna true; caso contrario, retorna false. O ponto passado para o 
metodo esta no sistema de coordenadas padrao e nao e transformado. Isso torna esse metodo util 
para detecgao de sucesso: determinar se um clique de mouse ocorreu sobre uma forma em especial. 

Entretanto, voce nao pode passar os campos clientX e clientY de um objeto MouseEvent diretamen- 
te para isPointlnPathQ. Primeiramente, as coordenadas do evento de mouse devem ser transladadas 
para que sejam relativas ao elemento canvas, em vez do objeto Window. Segundo, se o tamanho do 
canvas na tela e diferente de suas dimensoes reais, as coordenadas do evento de mouse devem mudar 
de escala adequadamente. O Exemplo 21-11 mostra uma funijao utihtaria que pode ser usada para 
determinar se um dado MouseEvent ocorreu sobre o caminho atual. 

Exemplo 21-11 Testando se um evento de mouse ocorreu sobre o caminho atual 

// Retorna true se o evento de mouse especificado ocorreu sobre o caminho atual, 

// no objeto CanvasRenderingContext2D especificado. 
function hitpath(context, event) { 

// Obtem o elemento <canvas> do objeto contexto 
var canvas = context.canvas; 

// Obtem o tamanho e a posigao do canvas 
var bb = canvas.getBoundingClientRectQ; 

// Translada e muda a escala das coordenadas do evento de mouse em coordenadas do canvas 
var x = (event.clientX-bb.left)*(canvas.width/bb.width); 
var y = (event.clientY-bb.top)*(canvas.height/bb.height); 

// Chama isPointlnPath com essas coordenadas transformadas 
return context.isPointInPath(x,y); 

} 
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Essa funfao hitpathQ poderia ser usada em uma rotina de tratamento de evento, como segue: 
canvas.onclick = function(event) { 

if (hitpath(this.getContext("2d"), event) { 

alert("Hit!"); // Clique sobre o caminho atual 

} 

H 


Em vez de fazer detec^ao de sucesso baseada em caminho, voce pode usar getImageData( ) para testar 
se o pixel sob o ponto do mouse foi pintado. Se o pixel (ou pixels) retornado for totalmente trans- 
parente, nada foi desenhado nesse pixel e o evento de mouse e um fruto de erro de alvo. O Exemplo 
21-12 mostra como voce pode fazer esse tipo de detecrjao de sucesso. 

Exemplo 21-12 Testando se um evento de mouse ocorreu sobre um pixel pintado 

// Retorna true se o evento de mouse especificado ocorreu sobre um pixel nao transparente. 
function hitpaint(context, event) { 

// Translada e muda a escala das coordenadas do evento de mouse em coordenadas do canvas 

var canvas = context.canvas; 

var bb = canvas.getBoundingClientRectQ; 

var x = (event.clientX-bb.left)*(canvas.width/bb.width); 

var y = (event.clientY-bb.top)*(canvas.height/bb.height); 

// Obtem o pixel (ou pixels, se varios pixels do dispositivo sao mapeados em l pixel CSS) 
var pixels = c.getImageData(x,y,l,l); 

// Se quaisquer pixels tiverem um valor de alfa diferente de zero, retorna true 
// (sucesso) 

for(var i = 3; i < pixels.data.length; i+=4) { 
if (pixels.data[i] !== 0) return true; 

} 

// Caso contrario, foi um erro de alvo. 
return false; 

} 

21.4.16 Exemplo de canvas: sparklines 

Vamos concluir este capitulo com um exemplo pratico de desenho de sparklines. Um sparkline e um 
grafico para exibi^ao de dados pequeno destinado a inclusao dentro do fluxo de texto, como este: 
Server load: 8.0 termo “sparkline” foi inventado pelo autor Edward Tufte, que os descreve 

como “pequenos elementos graficos de alta resolu^ao, incorporados em um contexto de palavras, 
numeros e imagens. Os sparklines sao elementos graficos que usam muitos dados, tern projeto sim¬ 
ples e sao do tamanho de uma palavra”. (Saiba mais sobre sparklines no livro de Tufte Beautiful 
Evidence [Graphics Press].) 

O Exemplo 21-13 e um modulo relativamente simples de codigo JavaScript discreto para habilitar 
sparklines em suas paginas Web. Os comentarios explicam como ele funciona. Note que ele usa a 
fun^ao onLoad() do Exemplo 13-5. 

Exemplo 21-13 Sparklines com o elemento <canvas> 

/* 

* Localiza todos os elementos da classe CSS "sparkline", analisa seu conteudo como 

* uma serie de numeros e substitui por uma representacao grafica. 
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* Define sparklines com marca^ao como segue: 

* <span class="sparkline">3 5 7 6 6 9 11 15 </span> 

* Estiliza os sparklines com CSS, como segue: 

* .sparkline { background-color: #ddd; color: red; } 

* - A cor do sparkline vem do estilo calculado a partir da propriedade CSS color. 

* - Os sparklines sao transparentes, de modo que a cor de fundo normal aparece. 

* - A altura do sparkline vem do atributo data-height, se estiver definido; caso 

* contrario, do estilo calculado do atributo font-size. 

* - A largura do sparkline vem do atributo data-width, se estiver definido, 

* ou do numero de pontos de dados vezes data-dx, se isso estiver definido, ou 

* do numero de pontos de dados vezes a altura dividida por 6 

* - Os valores minimo e maximo do eixo y sao extraidos dos atributos data-ymin 

* e data-ymax, caso estejam definidos; caso contrario, vem dos 

* valores minimo e maximo dos dados. 

*/ 

onLoad(function() { // Ouando o documento e carregado pela primeira vez 

// Localiza todos os elementos de classe "sparkline" 
var elts = document.getElementsByClassName("sparkline"); 
main: for(var e = 0; e < elts.length; e++) { // Para cada elemento 
var elt = elts[e]; 

// Obtem o conteudo do elemento e converte em urn 
// Se a conversao falha, pula esse elemento. 
var content = elt.textContent || elt.innerText; 
var content = content.replace(/ A \s+|\s+$/g, ""); 
var text = content.replace(/#.*$/gm, ""); 
text = text.replace(/[\n\r\t\v\f]/g, " "); 
var data = text.split(/\s+|\s*,\s*/); 
for(var i = 0; i < data.length; i++) { 
data[i] = Number(data[i]); 
if (isNaN(data[i])) continue main; 

} 

// Agora calcula a cor, largura, altura e limites do eixo y do 
// sparkline a partir dos dados, dos atributos data- do elemento 
// e do estilo calculado do elemento. 
var style = getComputedStyle(elt, null); 
var color = style.color; 

var height = parseInt(elt.getAttribute("data-height")) || 
parselnt(style.fontSize) || 20; 
var width = parseInt(elt.getAttribute("data-width")) || 

data.length * (parseInt(elt.getAttribute("data-dx")) || height/6); 
var ymin = parseInt(elt.getAttribute("data-ymin")) || 

Math.min.apply(Math, data); 
var ymax = parseInt(elt.getAttribute("data-ymax")) || 

Math.max.apply(Math, data); 
if (ymin >= ymax) ymax = ymin + 1; 

// Cria o elemento canvas. 

var canvas = document.createElement("canvas"); 

canvas.width = width; // Configura as dimensoes do canvas 

canvas.height = height; 

canvas.title = content; // Usa o conteudo do elemento como dica de ferramenta 


array de numeros. 

// Conteudo do elemento 
// Retira os espacos 
// Retira os comentarios 
// Converte \n etc. em espa^o 
// Divide espa^o ou virgula 
// Para cada trecho 
// Converte em urn numero 
// e cancela em caso de falha 
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elt.innerHTML = // Apaga o conteudo existente no elemento 

elt.appendChild(canvas); // Insere o canvas no elemento 

// Agora representa os pontos (i,data[i]) graficamente, transformando em 

// coordenadas do canvas. 

var context = canvas.getContext('2d’); 

for(var i = 0; i < data.length; i++) { // Para cada ponto de dados 

var x = width*i/data.length; // Muda a escala de i 

var y = (ymax-data[i])*height/(ymax-ymin); // Muda a escala de data[i] 

context.lineTo(x,y); // 0 primeiro lineToQ faz um moveTo() em seu lugar 

} 

context.strokeStyle = color; // Especifica a cor do sparkline 
context.strokeQ; // e o desenha 

} 

}); 




Capi'tulo 22 
APIs de HTML5 


O termo HTML5 se refere a versao mais recente da especificapio HTML, e claro, mas tambem a um 
conjunto inteiro de tecnologias para aplicativos Web que estao sendo desenvolvidas e especificadas 
como parte de HTML ou junto com ela. Um termo mais formal para essas tecnologias e Open Web 
Platform. Na pratica, contudo, “HTML5” e um forma abreviada conveniente. Este capitulo utiliza 
o termo dessa maneira. Algumas das novas APIs de HTML5 estao documentadas em outras partes 
deste livro: 

• O Capitulo 15 aborda os metodos getElementsByClassName() e querySelectorAllQ e o atributo 
dataset de elementos do documento. 

• O Capitulo 16 aborda a propriedade classList de elementos. 

• O Capitulo 18 aborda XMLHttpRequest Level 2, requisites HTTP entre origens e a API 
EventSource definida pela especificafao Server-Sent Events. 

• O Capitulo 20 documenta a API Web Storage e a cache para aplicativos Web off-line. 

• O Capitulo 21 aborda os elementos <audio>, <video> e <canvas> e os elementos graficos em SVG. 
Este capitulo aborda varias outras APIs de HTML5: 

• A Sepio 22.1 aborda a API Geolocation, que permite aos navegadores (com permissao) deter- 
minar a localizafao fisica do usuario. 

• A Se^ao 22.2 aborda as APIs de gerenciamento de historico que permitem aos aplicativos Web 
salvar e atualizar seus estados em resposta aos botoes Back e Forward (Voltar e Avan^ar) do 
navegador, sem serem recarregados do servidor Web. 

• A Se^ao 22.3 descreve uma API simples para passar mensagens entre documentos de origens 
diferentes. Essa API contorna a politica de seguran^a da mesma origem (Seto 13.6.2) a qual 
impede que documentos de servidores Web diferentes interajam diretamente uns com os ou- 
tros, sem correr perigo. 

• A Se$ao 22.4 aborda um novo recurso importante de HTML5: a capacidade de executar co- 
digo JavaScript em uma thread de segundo piano isolado e se comunicar com seguranqa com 
essas threads “de trabalho”. 


A Se^ao 22.5 descreve tipos de proposito especial eficientes 
com arrays de bytes e numeros. 


de memoria para trabalhar 
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• A Sepao 22.6 aborda os Blobs: porpoes opacas de dados que servem como formato central 
de troca de dados para uma variedade de novas APIs de dados binarios. Essa sepao tambem 
aborda varios tipos e APIs relacionados a Blob: objetos File e FileReader, o tipo BlobBuilder e 
URLs de Blob. 

• A Sepao 22.7 demonstra a API Filesytem, por meio da qual aplicativos Web podem ler e gravar 
arquivos dentro de um sistema de arquivo privativo em caixa de areia. Essa e uma das APIs que 
ainda estao em processo de mudanpa e nao esta documentada na sepao de referenda. 

• A Sepao 22.8 demonstra a API IndexedDB para armazenar e recuperar objetos em bancos de 
dados simples. Assim como a API Filesystem, IndexedDB esta em processo de mudanpa e nao 
esta documentada na sepao de referenda. 

• Por fim, a Sepao 22.9 aborda a API Web Sockets, que permite aos aplicativos Web conectarem 
servidores usando conexao em rede baseada em fluxo bidirecional, em vez do modelo de liga- 
pao em rede tipo pedido/resposta sem estado, suportado por XMLHttpRequest. 

Os recursos documentados neste capitulo nao se encaixam naturalmente em nenhum dos capitulos 
anteriores ou ainda nao sao estaveis e amadurecidos o suficiente para serem integrados nos capitulos 
principals do livro. Algumas das APIs parecem estaveis o bastante para documentar na sepao de re¬ 
ferenda, enquanto em outros casos a API ainda esta em processo de mudanpa e nao e abordada na 
Parte IV. Todos os exemplos deste capitulo, menos um (Exemplo 22-9), funcionavam em pelo me- 
nos um navegador quando este livro foi para a grafica. Como as especificapoes abordadas aqui ainda 
estao evoluindo, alguns desses exemplos podem nao funcionar mais quando voce ler este capitulo. 

22.1 Geolocaliza^ao 

A API Geolocation ( http://www.w3.org/TR/geolocation-APU) permite aos programas JavaScript soli- 
citar ao navegador a localizapao real do usuario. Os aplicativos que reconhecem a localizapao podem 
exibir mapas, direpoes e outras informapoes relevantes a posipao atual do usuario. Evidentemente, 
aqui existem preocupapoes significativas quanto a privacidade, e os navegadores que suportam a API 
Geolocation sempre perguntam ao usuario antes de permitir que um programa JavaScript acesse a 
localizapao fisica onde ele esta. 

Os navegadores que suportam a API Geolocation definem navigator, geolocation. Essa propriedade 
se refere a um objeto com tres metodos: 

navigator.geolocation.getCurrentPosition() 

Solicita a posipao atual do usuario. 
navigator.geolocation.watchPosition() 

Solicita a posipao atual, mas tambem continua a monitorar a posipao e invoca a funpao callback 
especificada quando a posipao do usuario muda. 

navigator.geolocation.clearWatch() 

Para de acompanhar a localizapao do usuario. O argumento desse metodo deve ser o numero 
retornado pela chamada correspondente de watchPositionQ. 

Nos dispositivos que contem hardware GPS, podem ser obtidas informapoes de localizapao muito 
precisas. Em geral, contudo, as informapoes de localizapao vem por meio da Web. Se um navegador 
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envia seu endere^o IP de Internet para um servi^o Web, normalmente pode determinar (com base 
nos registros do ISP) em qual cidade voce esta (e e comum anunciantes fazerem isso no lado do 
servidor). Muitas vezes, um navegador pode obter uma localizagao ainda mais precisa, solicitando ao 
sistema operational a lista de redes sem fios proximas e a intensidade dos sinais. Essas informagoes, 
quando enviadas para um servigo Web sofisticado, permitem que sua localizagao seja calculada com 
precisao surpreendente (normalmente no espago de uma quadra). 

Essas tecnologias de geolocalizagao envolvem uma troca pela rede ou comunicagao com varios sateli- 
tes, de modo que a API Geolocation e assfncrona: getCurrentPositionQ e watchPosition() retornam 
imediatamente, mas aceitam um argumento callback que o navegador vai chamar quando tiver 
determinado a posigao do usuario (ou quando a posigao tiver mudado). A forma mais simples de 
solicitagao de localizagao e a seguinte: 

navigator.geolocation.getCurrentPosition(function(pos) { 
var latitude = pos.coords.latitude; 
var longitude = pos.coords.longitude; 
alert("Your position: " + latitude + ", " + longitude); 

}); 

Alem da latitude e da longitude, todo pedido de geolocalizagao bem-sucedido tambem retorna um 
valor de precisao (em metros) especificando o quanto a posipio e conhecida em detalhes. O Exem- 
P lo 22-1 demonstra isso: ele chama getCurrentPositionQ para determinar a posigao atual e usa a 
informagao resultante para exibir um mapa (do Google Maps) da localizagao atual, com zoom apro- 
ximado ao da precisao do local. 

Exemplo 22-1 Usando geolocalizagao para exibir um mapa 

// Retorna um elemento <img> recem-criado que vai (quando a geolocalizacao for bem-sucedida) 
// ser configurado para exibir um mapa do Google da localizagao atual. Note que o 
// chamador deve inserir o elemento retornado no documento para torna-lo visivel. Lanca 
// um erro se geolocalizagao nao e suportada no navegador 
function getmapQ { 

// Procura suporte para geolocalizaqao 

if (!navigator.geolocation) throw "Geolocation not supported"; 

// Cria um novo elemento <img>, inicia o pedido de geolocalizacao para fazer img 

// exibir um mapa de onde estamos e, entao, retorna a imagem. 

var image = document.createElement("img"); 

navigator.geolocation.getCurrentPosition(setMapURL); 

return image; 

// Esta funcao vai ser chamada apos retornarmos o objeto imagem, quando 
// (e se) o pedido de geolocalizacao for bem-sucedido. 
function setMapURL(pos) { 

// Obtem nossas informaqoes de posicao do objeto argumento 
var latitude = pos.coords.latitude; // Graus N do equador 

var longitude = pos.coords.longitude; // Graus E de Greenwich 

var accuracy = pos.coords.accuracy; // Metros 

// Constroi um URL para uma imagem estatica de mapa do Google dessa localizacao 
var url = "http://maps.google.com/maps/api/staticmap" + 

"?center=" + latitude + + longitude + 

"&size=640x640&sensor=true"; 
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// Configura o nivel de zoom do mapa usando uma heuristica aproximada 
var zoomlevel=20; // Comeqa com zoom durante quase todo o tempo 

if (accuracy > 80) // Menos zoom para posicoes menos precisas 

zoomlevel -= Math.round(Math.log(accuracy/50)/Math.LN2); 
url += "8izoom=" + zoomlevel; // Adiciona nivel de zoom no URL 

// Agora exibe o mapa no objeto imagem. Obrigado, Google! 
image.src = url; 

} 


A API Geolocation tem varios recursos que nao sao demonstrados pelo Exemplo 22-1: 

• Alem do primeiro argumento callback, getCurrentPositionQ e watchPositionQ aceitam uma 
segunda fungao callback opcional que e chamada se o pedido de geolocalizagao falha. 

• Alem das fungoes callback success e error, esses dois metodos tambem aceitam um objeto de 
opgoes como terceiro argumento opcional. As propriedades desse objeto especificam se e dese- 
jada uma posigao de alta precisao, quanto a posigao pode se tornar “velha” e quanto tempo o 
sistema pode levar para determinar a posigao. 

• O objeto passado para a fungao callback success tambem inclui um timestamp e pode (em 
alguns dispositivos) incluir mais informagoes, como altitude, velocidade e diregao. 

O Exemplo 22-2 demonstra esses recursos adicionais. 

Exemplo 22-2 Uma demonstrate de todos os recursos de geolocalizagao 

// Determina minha localizacao de forma assincrona e a exibe no elemento especificado. 
function whereami(elt) { 

// Passa esse objeto como 3 s argumento para getCurrentPositionQ 
var options = { 

// Configura como true para obter uma leitura com precisao mais alta (de GPS, por 
// exemplo), se estiver disponivel. Note, contudo, que isso pode afetar a vida 
// util da bateria. 

enableHighAccuracy: false, // Pode aproximar: esse e o padrao 

// Configura essa propriedade se uma localizacao colocada na cache e suficiente. 
// 0 padrao e 0, que obriga a localizacao ser verificada outra vez. 
maximumAge: 300000, // Uma correqao dos ultimos 5 minutos esta bem 

// Por quanto tempo voce quer esperar para obter a localizacao? 

// 0 padrao e Infinity e getCurrentPositionQ nunca atinge o tempo-limite 
timeout: 15000 // Nao leva mais do que 15 segundos 

}; 

if (navigator.geolocation) // Solicita a posicao, se for suportado 

navigator.geolocation.getCurrentPosition(success, error, options); 

else 

elt.innerHTMl = "Geolocation not supported in this browser”; 

// Esta funqao sera chamada se a geolocalizacao falhar 
function error(e) { 
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// 0 objeto error tem um codigo numerico e uma mensagem de texto. Valores do 
// codigo: 

// l: o usuario nao deu permissao para compartilhar sua localizacao 
// 2: o navegador nao conseguiu determinar a posicao 
// B: um tempo-limite foi atingido 

elt.innerHTML = "Geolocation error " + e.code + " + e.message; 

} 

// Esta funqao sera chamada se a geolocalizacao for bem-sucedida 
function success(pos) { 

// Esses sao os campos que sempre obtemos. Note que timestamp 
// esta no objeto externo e nao no objeto coords interno. 

new Date(pos.timestamp).toLocaleString() + " you were within " + 
pos.coords.accuracy + " meters of latitude " + 
pos.coords.latitude + " longitude " + 
pos.coords.longitude + 

// Se nosso dispositivo retorna altitude, adiciona essa informacao. 
if (pos.coords.altitude) { 

msg += " You are " + pos.coords.altitude + " + " + 

pos.coords.altitudeAccuracy + "meters above sea level."; 

} 

// se nosso dispositivo retorna velocidade e direcao, adiciona isso tambem. 
if (pos.coords.speed) { 

msg += " You are travelling at " + 

pos.coords.speed + "m/s on heading " + 
pos.coords.heading + 

} 

elt.innerHTML = msg; // Exibe todas as informaqoes de posicao 

} 

} 

22.2 Gerenciamento de historico 

Os navegadores Web monitoram os documentos carregados em uma janela e exibem botoes Back e 
Forward (Voltar e Avan^ar) que permitem ao usuario navegar por esses documentos. Esse modelo 
de historico de navegador e do tempo em que os documentos eram passivos e todo calculo era feito 
no servidor. Hoje, os aplicativos Web frequentemente geram ou carregam conteudo dinamicamente 
e exibem novos estados sem carregar novos documentos. Aplicativos como esses precisam fazer seu 
proprio gerenciamento de historico, caso queiram que o usuario possa usar os botoes Back e Forward 
para navegar de um estado para outro do aplicativo de maneira intuitiva. HTML5 define dois me- 
canismos de gerenciamento de historico. 

A tecnica de gerenciamento de historico mais simples envolve location.hash e o evento hashchange. 
Essa tecnica tambem era mais implementada quando este livro estava sendo produzido: os navega¬ 
dores estavam come^ando a implementa-la, mesmo antes de HTML5 a ter padronizado. Na maioria 
dos navegadores (mas nao nas versoes mais antigas do IE), configurar a propriedade location.hash 
atualiza o URL exibido na barra de endere^os e adiciona uma entrada no historico do navegador. A 
propriedade hash configura o identificador de fragmento do URL e e tradicionalmente usada para 
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especificar a identificapao de uma sepao do documento para a qual se vai rolar. Mas location.hash 
nao precisa ser uma identificapao de elemento: voce pode configura-la com qualquer string. Se voce 
pode codificar o estado de seu aplicativo como uma string, pode utilizar essa string como identifi- 
cador de fragmento. 

Entao, configurando a propriedade location.hash, voce permite que o usuario utilize os botoes 
Back e Forward para navegar entre estados do documento. Para que isso funcione, seu aplicativo 
deve ter algum modo de detectar essas mudanpas de estado para que possa ler o estado armazenado 
no identificador de fragmento e atualizar-se de forma correspondente. Em HTML5, o navegador 
dispara um evento hashchange no objeto Window quando o identificador de fragmento muda. Nos 
navegadores que suportam o evento hashchange, voce pode configurar window.onhashchange como 
uma funpao de tratamento que sera chamada quando o identificador de fragmento mudar como 
resultado de navegapao pelo historico. Quando essa funpao de tratamento fosse chamada, sua funpao 
analisaria o valor de location. hash e exibiria novamente o aplicativo, usando a informapao de estado 
que ele content. 

HTML5 tambem define um procedimento um pouco mais complexo e robusto de gerenciamento 
de historico, envolvendo o metodo history. pushStateQ e o evento popstate. Quando um aplicativo 
Web entra em um novo estado, chama history.pushStateQ para adicionar esse estado no historico 
de navegapao. O primeiro argumento e um objeto contendo todas as informapoes de estado neces- 
sarias para restaurar o estado atual do documento. Qualquer objeto que possa ser convertido em 
uma string com JSON.stringifyQ vai funcionar e certos outros tipos nativos, como Date e RegExp, 
tambem devem funcionar (consulte o quadro a seguir). O segundo argumento e um titulo opcional 
(uma string de texto puro) que o navegador pode usar (em um menu <Back>, por exemplo) para 
identificar o estado salvo no historico de navegapao. O terceiro argumento e um URL opcional que 
sera exibido como localizapao do estado atual. Os URLs relativos sao determinados em relapao a 
localizapao atual do documento e e comum especificar simplesmente uma parte hash (ou “iden¬ 
tificador de fragmento”) do URL, como #state. A associapao de um URL a cada estado permite 
que o usuario marque estados internos de seu aplicativo e, se voce incluir informapoes suficientes 
no URL, seu aplicativo podera restaurar seu estado quando for carregado a partir de um marcador. 


Clones estruturados 

Conforme mencionado anteriormente, o metodo pushState() aceita um objeto de estado e faz uma copia 
privativa dele. Trata-se de uma copia profunda ou clone profundo do objeto: ela copia recursivamente o 
conteudo de qualquer objeto ou array aninhado. 0 padrao HTML5 chama esse tipo de copia de done 
estruturado. 0 processo de criapao de um clone estruturado e parecido com passar o objeto para ISON, 
stringify () e entao passar a string resultante para ISON. parse() (consulte a Sepao 6.9). Mas JSON so su- 
porta primitivas de JavaScript, alem de objetos e arrays. 0 padrao HTML5 diz que o algoritmo de donagem 
estruturado tambem deve ser capaz de donar objetos Date e RegExp, objetos ImageData (do elemento 
<canvas>: consulte a Sepao 21.4.14) e objetos FileList, File e Blob (descrito na Sepao 22.6). As funpoes e 
erros de JavaScript sao exduidos explicitamente do algoritmo de donagem estruturada, assim como a 
maioria dos objetos hospedeiros, como janelas, documentos, elementos, etc. 
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Talvez voce nao tenha motivo para armazenar arquivos ou dados de imagem como parte de seu estado de 
historico, mas os clones estruturados tambem sao usados por varios outros padroes relacionados a HTML5 
e vamos ve-los novamente ao longo deste capi'tulo. 


Alem do metodo pushState(), o objeto History tambem define replaceStateQ, que recebe os mes- 
mos argumentos, mas substitui o estado do historico atual, em vez de adicionar um novo estado no 
historico de navegagao. 

Quando o usuario navega para estados de historico salvos usando os botoes Back ou Forward, o 
navegador dispara um evento popstate no objeto Window. O objeto evento associado ao evento 
tern uma propriedade chamada state, a qual contem uma copia (outro clone estruturado) do objeto 
estado passado para pushStateQ. 

O Exemplo 22-3 e um aplicativo Web simples - o jogo de adivinhagao de numeros ilustrado na Fi- 
gura 22-1 - que usa essas tecnicas HTML5 para salvar seu historico, permitindo ao usuario “voltar” 
para rever ou refazer seus palpites. 

Quando este livro foi para a grafica, o Firefox 4 tinha feito duas modificagoes na API History que 
outros navegadores podem acompanhar. Primeiramente, o Firefox 4 torna o estado atual disponivel 
por meio da propriedade state do proprio objeto History, ou seja, as paginas carregadas recentemen- 
te nao precisam esperar por um evento popstate. Segundo, o Firefox 4 nao dispara mais um evento 
popstate para paginas carregadas recentemente que nao tenham algum estado salvo. Essa segunda 
alteragao significa que o exemplo a seguir nao fimciona muito bem no Firefox 4. 



Figura 22-1 Um jogo de adivinhagao de numeros. 

Exemplo 22-3 Gerenciamento de historico com pushStatef) 

<!DOCTYPE html> 

<html><headxtitle>I'm thinking of a number.. .</title> 
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window.onload = newgame; 
window.onpopstate = popState; 
var state, ui; 


// Comeca um novo jogo quando carregamos 
// Trata de eventos de historico 
// Globais inicializadas em newgameQ 


function newgame(playagain) { // Inicia um novo jogo de adivinhacao de numeros 

// Configura um objeto para conter elementos do documento que nos interessam 
ui = { 

heading: null, // 0 <hl> no topo do documento. 

prompt: null, // Pede para o usuario digitar um palpite. 

input: null, // Onde o usuario digita o palpite. 

low: null, // Tres celulas de tabela para a representaqao visual 

mid: null, // ...do intervalo de numeros a adivinhar. 

high: null 

}; 

// Pesquisa cada uma dessas identificaqoes de elemento 
for(var id in ui) ui[id] = document.getElementByld(id); 


// Define uma rotina de tratamento de evento para o campo de entrada 
ui.input.onchange = handleGuess; 


// Escolhe um numero aleatorio 
state = { 

n: Math.floor(99 * Math, 


icializa o estado do jogo 


high: 100, 
guessnum: 0, 
guess: undefined 


randomQ) + 1, // Um inteiro: 0 < 

NO limite inferior (exclusivo) nc 
NO limite superior (exclusivo) nc 
// Ouantos palpites foram dados 
// Oual foi o ultimo palpite 


< 100 
palpites 
palpites 


// Modifica o conteudo do documento para exibir este estado inicial 
display(state); 

// Esta funqao e chamada como rotina de tratamento de evento onload e tambem e 
// chamada pelo botao Play Again, exibido no final de um jogo. 0 argumento 
// playagain vai ser true neste segundo caso. Se e true, salvamos 
// o novo estado do jogo. Mas se fomos chamados em resposta a um evento load, 

// nao salvamos o estado. Isso porque os eventos load tambem vao ocorrer 

// quando retrocedermos pelo historico do navegador a partir de algum outro 

// documento para o estado existente de um jogo. Se fossemos salvar um novo 

// estado inicial, nesse caso sobrescreveriamos o historico atual 

// atual do jogo. Nos navegadores que suportam pushState(), o evento load 

// e sempre seguido de um evento popstate. Assim, em vez de salvar o estado aqui, 

// esperamos por popstate. Se ele nos fornecer um objeto estado, apenas 

// usamos isso. Caso contrario, se popstate tern um estado nulo, sabemos que esse e 

// mesmo um novo jogo e usamos replaceState para salvar o novo estado do jogo. 

if (playagain === true) save(state); 


// Salva o estado do jogo no historico do navegador com pushStateQ, se for suportado 
function save(state) { 

if (Ihistory.pushState) return; // Nao faz nada se pushStateQ nao estiver definido 
// Vamos associar um URL ao estado salvo. Esse URL exibe o 

// numero a adivinhar, mas nao codifica o estado do jogo, de modo que nao e util 
// para marcacao. Nao podemos colocar o estado do jogo no URL facilmente, pois isso 
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} 


// tornaria o numero secreto visivel na barra de endere<;os. 
var url = "#guess" + state.guessnum; 

// Agora salva o objeto com o estado e o URL 
history.pushState(state, // Objeto estado a salvar 

// Titulo do estado: os navegadores atuais ignoram isso 
url); // URL do estado: nao e util para marcacao 


// Esta e a rotina de tratamento de evento onpopstate que restaura estados do historico. 
function popState(event) { 

if (event.state) { // Se o evento tern urn objeto estadoj restaura esse estado 

// Note que event.state e uma copia profunda do objeto estado salvo; 

// portantOj podemos modifica-la sem alterar o valor salvo, 
state = event.state; // Restaura o estado do historico 
display(state); // Exibe o estado restaurado 

} 

else { 

// Ouando carregarmos a pagina pela primeira vez, vamos obter urn evento popstate 
// sem nenhum estado. Substitua esse estado nulo por nosso estado real: consulte o 
// comentario em newgameQ. Nao ha necessidade de chamar displayQ aqui. 
history.replaceState(state, ''#guess'' + state.guessnum); 

} 

}; 


// Esta rotina de tratamento de evento e chamada sempre que o usuario adivinha 
// Ela atualiza o estado do jogo, salva-o e o exibe. 
function handleCuess() { 

// Obtem o palpite do usuario a partir do campo de entrada 
var g = parselnt(this.value); 

// Se e urn numero e esta no intervalo correto 
if ((g > state.low) && (g < state.high)) { 

// Atualiza o objeto estado com base nesse palpite 

if (g < state.n) state.low = g; 

else if (g > state.n) state.high = g; 

state.guess = g; 

state.guessnum++; 

// Agora salva o novo estado no historico do navegador 
save(state); 

// Modifica o documento para responder ao palpite do usuario 
display(state); 

} 

else { // Um palpite invalido: nao coloca urn novo estado de historico 

alert("Please enter a number greater than " + state.low + 

" and less than " + state.high); 

} 


} 


numero. 


// Modifica o documento para exibir o estado atual do jogo. 
function display(state) { 

// Exibe o cabe^alho e o titulo do documento 
ui.heading.innerHTML = document.title = 

"I'm thinking of a number between " + 
state.low + " and " + state.high + 

// Exibe uma representa^ao visual do intervalo de numeros usando uma tabela 
ui.low.style.width = state.low + 
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ui.mid.style.width = (state.high-state.low) + "%"; 
ui. high.style.width = (lOO-state.high) + "%"; 

// Certifica-se de que o campo de entrada esteja visivel, vazio e com o foco 
ui.input.style.visibility = "visible"; 
ui.input.value = 
ui. input. focusQ; 

// Configura o prompt com base no palpite mais recente do usuario 
if (state.guess === undefined) 

ui.prompt.innerHTML = "Type your guess and hit Enter: 
else if (state.guess < state.n) 

ui.prompt.innerHTML = state.guess + " is too low. Guess again: 
else if (state.guess > state.n) 

ui.prompt.innerHTML = state.guess + " is too high. Guess again: 
else { 

// Ouando for correto, oculta o campo de entrada e mostra novamente urn botao Play 
// Again. 

ui.input.style.visibility = "hidden"; // Sem mais palpites agora 
ui.heading.innerHTML = document.title = state.guess + " is correct! "; 
ui.prompt.innerHTML = 

"You Win! cbutton onclick='newgame(true)'>Play Again</button>"; 

} 

} 

</script> 

<style> /* estilos CSS para que o jogo tenha boa aparencia */ 

#prompt { font-size: I6pt; } 

table { width: 90%; margin: 10 px; margin-left:5%; } 

#low, #high { background-color: lightgray; height: lem; } 

#mid { background-color: green; } 

</style> 

</head> 

<body><!-- Os elementos HTML a seguir sao a interface com o usuario do jogo --> 

<!-- Titulo do jogo e representacao textual do intervalo de numeros --> 

<hl id="heading">I'm thinking of a number...</hl> 

<!-- uma representaqao visual dos numeros que nao foram rejeitados --> 
ctablextrxtd id="low"x/tdxtd id="mid"x/tdxtd id="high"x/tdx/trx/table> 

<!-- Onde o usuario digita seus palpites --> 

<label id="prompt"x/labelxinput id="input" type="text"> 

</bodyx/html> 

22.3 Troca de mensagens entre origens 

Conforme mencionado na Secjao 14.8, algumas janelas e guias do navegador fleam completamente 
isoladas umas das outras e o codigo que esta sendo executado em uma ignora completamente o 
das outras. Em outros casos, quando um script abre novas janelas explicitamente ou trabalha com 
quadros aninhados, as varias janelas e quadros sabem da existencia uns dos outros. Se eles content 
documentos do mesmo servidor Web, os scripts dessas janelas e quadros podem interagir e manipu- 
lar os documentos uns dos outros. 

As vezes, no entanto, um script pode se referir a outro objeto Window, mas como o conteudo 
dessa janela e de uma origem diferente, o navegador Web (seguindo a polftica da mesma origem) 
nao permite que o script veja o conteudo do documento dessa outra janela. De modo geral, o na- 
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vegador tambem nao permite que o script leia propriedades ou chame metodos dessa outra janela. 
O metodo de uma janela que scripts de origens diferentes podem chamar e denominado post- 
Message() e ele permite um tipo de comunicaqao limitada — na forma de passagem de mensagem 
assincrona - entre scripts de origens diferentes. Esse tipo de comunicaqao e definido em HTML5 
e e implementado por todos os navegadores atuais (incluindo o IE8 e posteriores). A tecnica e 
conhecida como “troca de mensagens entre documentos”, mas como a API e definida no objeto 
Window e nao no documento, poderia se chamar “passagem de mensagens entre janelas” ou “troca 
de mensagens entre origens”. 

O metodo postMessageQ espera dois argumentos. O primeiro e a mensagem a ser enviada. A espe- 
cifica^ao HTML5 diz que esse pode ser qualquer valor primitivo ou objeto que possa ser clonado 
(consulte “Clones estruturados”, na pagina 672), mas algumas implementaqoes de navegador atuais 
(incluindo o Firefox 4 beta) esperam strings; portanto, se quiser passar um objeto ou array como 
mensagem, deve primeiro serializa-lo com ]S0N. stringify() (Seqao 6.9). 

O segundo argumento e uma string que especifica a origem esperada da janela de destino. Inclua o 
protocolo, nome de host e (opcionalmente) a porta de um URL (voce pode passar um URL com- 
pleto, mas tudo que nao for protocolo, host e porta sera ignorado). Isso e um recurso de seguranqa: 
um codigo mal-intencionado ou usuarios normais podem levar as janelas para novos documentos 
inesperados, de modo que postMessageQ nao vai transmitir sua mensagem se a janela contiver um 
documento de uma origem diferente da que voce especificou. Se a mensagem que esta sendo pas- 
sada nao content informaqoes sigilosas e voce quer passa-la para codigo de qualquer origem, pode 
passar a string como curinga. Se quiser especificar a mesma origem da janela atual, pode usar 
simplesmente "/". 

Se as origens corresponderem, a chamada de postMessageQ vai resultar no disparo de um evento 
mensagem no objeto Window de destino. Um script nessa janela pode deflnir uma funijao de trata- 
mento de evento para ser notificada sobre eventos mensagem. Essa retina de tratamento recebe um 
objeto evento com as seguintes propriedades: 

data 

E uma copia da mensagem passada como primeiro argumento para postMessageQ. 
source 

O objeto Window a partir do qual a mensagem foi enviada. 
origin 

Uma string especificando a origem (como um URL) a partir da qual a mensagem foi enviada. 

A maioria das retinas de tratamento de onmessageQ deve verificar primeiro a propriedade origin de 
seu argumento e ignorar as mensagens de dominios inesperados. 

A troca de mensagens entre origens via postMessageQ e o evento mensagem podem ser uteis quando 
se quer incluir um modulo ou “gadget” de outre site em suas pagina Web. Se o gadget e simples 
e independente, voce pode simplesmente isola-lo em um <iframe>. Suponha, entretanto, que seja 
um gadget mais complexo que defina uma API e sua pagina Web tenha de controla-lo ou interagir 
com ele de algum modo. Se o gadget e definido como um elemento <script>, pode expor uma API 
JavaScript normal, mas incluindo-o na sua pagina permite-se que ele assuma o controle completo da 
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pagina e de seu conteudo. Nao e incomum fazer isso na Web hoje (especialmente para anuncios na 
Web), mas nao e uma boa ideia, mesmo quando se confia no outro site. 

A troca de mensagens entre origens oferece uma alternativa: o autor do gadget pode empacota-lo 
dentro de um arquivo HTML que receba eventos mensagem e envie esses eventos para as fun (joes 
apropriadas de JavaScript. Entao, a pagina Web que inclui o gadget pode interagir com ele enviando 
mensagens com postMessageQ. Os exemplos 22-4 e 22-5 demonstram isso. O Exemplo 22-4 e um 
gadget simples, incluido via <iframe>, que pesquisa o Twitter e exibe tweets que correspondem a um 
termo de busca especificado. Para fazer esse gadget procurar algo, a pagina que o content simples- 
mente envia a ele o termo de busca desejado como uma mensagem. 

Exemplo 22-4 Um gadget de pesquisa no Twitter, controlado por postMessageQ 
<!D0CTYPE html> 

<!-- 

Este e um gadget de busca no Twitter. Inclua-o em qualquer pagina Web, dentro de um 
iframe, e peca a ele para que procure coisas, enviando uma string de consulta com 
postMessageQ. Como ele esta em um <iframe> e nao em um <script>, nao pode 
mexer no documento que o contem. 

<html> 

<head> 

<style>body { font: 9pt sans-serif; }</style> 

<!-- Usa jOuery para seu utilitario jOuery.getlSONQ --> 

cscript src="http://code.jquery.com/jquery-1.4.4.min.js"/x/script> 

// Devemos usar apenas window.onmessage, mas alguns navegadores mais antigos 
// (por exemplo, o Firefox 3) nao suportam isso; portanto, fazemos desta maneira. 
if (window.addEventListener) 

window.addEventListener("message", handleMessage, false); 

else 

window.attachEvent("onmessage", handleMessage); // Para o IE8 

function handleMessage(e) { 

// Nao estamos preocupados com a origem dessa mensagem: queremos 
// procurar no Twitter alguem que nos responda. No entanto, esperamos 
// que a mensagem venha da janela que nos contem. 
if (e.source !== window.parent) return; 

var searchterm = e.data; // Isso e o que foi solicitado a procurarmos 

// Usa utilitarios Ajax da jOuery e a API de busca do Twitter para encontrar 
// tweets correspondentes a mensagem. 

jOuery.get!SON("http://search.twitter.com/search.json?callback=?", 

{ q: searchterm }, 

function(data) { // Chamada com resultados do pedido 
var tweets = data.results; 

// Constroi um documento HTML para exibir esses resultados 
var escaped = searchterm.replace("<", "&lt;"); 
var html = "<h2>" + escaped + "</h2>"; 
if (tweets.length == 0) { 

html += "No tweets found"; 

} 
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else { 

html += "<dl>"; 11 lista de resultados <dl> 

for(var i = 0; i < tweets.length; i++) { 
var tweet = tweets[i]; 
var text = tweet.text; 
var from = tweet.from_user; 
var tweeturl = "http://twitter.eom/#l/" + 
from + "/status/" + tweet.id_str; 
html += "<dtxa target='_blank' href='" + 
tweeturl + + tweet. from_user + 

"</a></dtxdd>" + tweet.text + "</dd>"; 

} 

html += "</dl>"; 


} 

// Configura o documento <iframe> 
document.body.innerHTML = html; 

}); 

} 

$(function() { 

// Permite que nosso container saiba que estamos aqui e prontos para pesquisar. 

// 0 container nao pode no enviar quaisquer mensagens antes de obter esta mensagem 
// nossa, pois ainda nao estaremos aqui para recebe-la. 

// Normalmente, os conteineres so podem esperar urn evento onload para saber que todos os 
// seus <iframe>s foram carregados. Enviamos esta mensagem para os conteineres que 
// queremos, para comecar a pesquisar o Twitter mesmo antes de obterem o evento 
// onload. 

// Nao sabemos a origem de nosso container; portanto, usamos * para que o navegador 
// a envie para qualquer urn. 

window.parent.postMessage("Twitter Search vO.l", 

}); 

</script> 

<body> 

</body> 

</html> 


O Exemplo 22-5 e um arquivo JavaScript simples que pode ser inserido em qualquer pagina Web 
que queira usar o gadget de pesquisa no Twitter. Ele insere o gadget no documento e entao adiciona 
uma rotina de tratamento de evento para todos os links do documento, a fim de que colocar o mou¬ 
se sobre um link chame postMessage() no quadro do gadget para fazer a pesquisa do gadget no URL 
do link. Isso permite que o usuario veja se as pessoas estao tuitando sobre um site antes de visita-lo. 


Exemplo 22-5 Usando o gadget de pesquisa no Twitter com postMessage() 

// Este arquivo de codigo JS insere o Gadget de Pesquisa no Twitter no documento 

// e adiciona uma rotina de tratamento de evento em todos os links do documento para que, 

// quando o usuario colocar o mouse sobre eles, o gadget pesquise o URL do link. 

// Isso permite ao usuario ver o que as pessoas estao tuitando sobre o destino do link, 

// antes de clicar nele. 

window.addEventListener("load", functionQ { // Nao funciona no IE < 9 

var origin = "http://davidflanagan.com"; // Origem do gadget 

var gadget = "/demos/TwitterSearch.html"; // Caminho do gadget 

var iframe = document.createElement("iframe"); // Cria o iframe 
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iframe.src = origin + gadget; 
iframe.width = "250"; 
iframe.height = "100%"; 
iframe.style.cssFloat = "right"; 


// Configura seu URL 
// 250 pixels de largura 
// Altura total do documento 
// Dustificado a direita 


// Insere o iframe no inicio do documento 

document.body.insertBefore(iframe, document.body.firstChild); 


// Agora localiza todos os links e os conecta ao gadget 
var links = document.getElementsByTagName("a"); 
for(var i = 0; i < links.length; i++) { 

// addEventListener nao funciona no IE8 e anteriores 
links[i] .addEventListener(''mouseover"j functionQ { 

// Envia o url como termo de busca e so o envia se o 

// iframe ainda esta exibindo urn documento de davidflanagan.com 

iframe.contentWindow.postMessage(this.href , origin); 

}, false); 

} 

}. false); 


22.4 Web Workers 


Uma das caracterfsticas fundamentals de JavaScript do lado do cliente e o fato de ter uma so thread: 
um navegador nunca vai executar duas rotinas de tratamento de evento ao mesmo tempo e nunca 
vai disparar um timer enquanto uma rotina de tratamento de evento estiver em execu^ao, por exem- 
plo. Atualiza^oes concomitantes no estado do aplicativo ou no documento sao simplesmente impos- 
siveis e os programadores do lado do cliente nao precisam pensar sobre programa^ao concorrente 
(nem mesmo entender disso). Um corolario e que as funijoes de JavaScript do lado do cliente nao 
devem executar por muito tempo: caso contrario, vao interromper o la?o de eventos e o navegador 
Web vai se tornar impassfvel a entrada do usuario. Esse e o motivo pelo qual as APIs Ajax sao sempre 
assincronas e JavaScript do lado do cbente nao tern uma funijao sincrona load() ou require () sim¬ 
ples para carregar bibhotecas JavaScript. 

A especificafao Web Workers 1 abranda muito cuidadosamente o requisito da thread unica para 
JavaScript do lado do cliente. Os “workers” que ela define sao na verdade threads de execufao 
paralelas. Contudo, os Web workers ficam em um ambiente de execufao independente, sem 
acesso ao objeto Window ou Document, comunicando-se com a thread principal somente por 
meio de passagem de mensagem assincrona. Isso significa que modificafoes concomitantes do 
DOM ainda nao sao possfveis, mas tambem significa que agora ha uma maneira de usar APIs 
sincronas e escrever funfoes de execufao longas que nao interrompem o la^o de eventos e nao 
travam o navegador. Criar um novo worker nao e uma operafao peso-pesado, como abrir uma 
nova janela do navegador, mas os workers tambem nao sao threads peso-mosca, sendo que nao 
faz sentido criar novos workers para executar operates triviais. Pode se util criar dezenas de 
workers para aplicativos Web complexes, mas e improvavel que um aplicativo com centenas ou 
milhares de workers seja viavel. 


Originalmente, os Web workers faziam parte da especifica^ao HTML5, mas foram isolados em uma especifica9ao inde¬ 
pendente, porem intimamente relacionada. Quando este livro estava sendo escrito, havia versoes draft da especificatjao nos 
enderetjos http://dev.w3.Org/html5/workers/c http://whatwg.org/ww. 
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Assim como qualquer API de threads, existem duas partes na especificafao Web Workers. A pri- 
meira e o objeto Worker: e como um worker aparece de fora para a thread que o cria. A segunda e 
o WorkerGlobalScope: e o objeto global de um novo worker e e como uma thread worker aparece 
internamente, para si mesmo. As subse^oes a seguir explicam as duas partes. Elas sao seguidas por 
uma secjao de exemplos. 

22.4.1 Objetos Worker 

Para criar um novo worker, basta usar a construtora Worker(), passando um URL que especifique o 
codigo JavaScript que o worker deve executar: 

var loader = new Worker("utils/loader.js"); 

Se voce especifica um URL relativo, ele e solucionado em relapio ao URL do documento que con- 
tem o script que chamou a construtora Worker (). Se voce especifica um URL absoluto, ele deve ter a 
mesma origem (mesmos protocolo, host e porta) do documento container. 

Uma vez que se tenha um objeto Worker, pode enviar dados para ele com postMessageQ. O valor 
passado para postMessageQ sera clonado (consulte “Clones estruturados”, na pagina 672) e a copia 
resultante sera enviada ao worker por meio de um evento mensagem: 

loader. postMessage( "file.txt 11 ); 

Note que o metodo postMessageQ de um Worker nao tern o argumento de origem que o metodo 
postMessageQ de um Window tern (Se^ao 22.3). Alem disso, o metodo postMessageQ de um Worker 
clona corretamente a mensagem nos navegadores atuais, ao contrario de Window.postMessageQ, que 
em alguns navegadores importantes ainda esta restrito as strings de mensagem. 

Voce pode receber mensagens de um worker captando eventos mensagem no objeto Worker: 
worker.onmessage = function(e) { 

var message = e.data; // Obtem a mensagem do evento 

console.logC'URL contents: " + message); // Faz algo com ela 

} 

Se um worker lan^a uma exceqao e nao a captura ou manipula ele mesmo, essa exce^ao se propaga 
como um evento que voce pode captar: 

worker.onerror = function(e) { 

// Registra a mensagem de erro, incluindo o nome de arquivo do worker e o numero da 
// linha 

console.logC'Error at " + e.filename + + e.lineno + ": " + 


Assim como todos os destinos de evento, os objetos Worker definem os metodos padrao 
addEventListenerQ e removeEventListenerQ, sendo que, se quiser gerenciar varias rotinas de trata- 
mento de evento, voce pode usa-los em lugar das propriedades onmessage e onerror. 

O objeto Worker tern apenas um outro metodo, terminateQ, o qual obriga uma thread worker a 
parar de executar. 
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22.4.2 Escopo de worker 

Ao criar um novo worker com a construtora WorkerQ, voce especiflca o URL de um arquivo de 
codigo JavaScript. Esse codigo e executado em um ambiente de execupao JavaScript novo em folha, 
completamente isolado do script que criou o worker. O objeto global desse novo ambiente de execu- 
qao e um objeto WorkerGlobalScope. Um WorkerGlobalScope e mais do que o objeto global basico 
de JavaScript, mas menos do que um objeto Window do lado do cliente completo. 

O objeto WorkerGlobalScope tern um metodo postMessageQ e uma propriedade de tratamento de 
evento onmessage que sao iguais aos do objeto Worker, mas funcionam na direpao oposta: chamar 
postMessageQ dentro de um worker gera um evento mensagem fora dele e as mensagens enviadas 
de fora do worker sao transformadas em eventos e enviadas para a rotina de tratamento onmessage. 
Note que, como WorkerGlobalScope e o objeto global para um worker, postMessageQ e onmessage 
parecem uma funpao global e uma variavel global para o codigo do worker. 

A fun^ao close () permite que um worker termine por si so e tern efeito semelhante ao metodo 
terminate () de um objeto Worker. Note, entretanto, que no objeto Worker nao existe uma API 
para testar se um worker se fechou sozinho e que tambem nao existe uma propriedade de tra¬ 
tamento de evento onclose. Se voce chamar postMessageQ em um worker que fechou, sua men¬ 
sagem sera descartada silenciosamente e nenhum erro sera lanfado. Em geral, se um worker vai 
fechar a si mesmo com closeQ, por ser uma boa ideia postar primeiro algum tipo de mensagem 
“fechando”. 

A fun^ao global mais interessante definida por WorkerGlobalScope e importScriptsQ: os workers 
utilizam essa fun^ao para carregar qualquer codigo de biblioteca que exijam. Por exemplo: 

// Antes de comecarmos a trabalhar, carregamos as classes e os utilitarios de que 
// precisaremos 

importScripts("collections/Set.js", "collections/Map.js", "utils/base64.js"); 

importScriptsQ recebe um ou mais argumentos de URL, cada um dos quais deve se referir a um 
arquivo de codigo JavaScript. Os URLs relativos sao solucionados em rela^ao ao URL passado para a 
construtora WorkerQ. Ela carrega e executa esses arquivos um apos o outro, na ordem em que foram 
especificados. Se o carregamento de um script causa um erro de rede ou se a execupao lanfa um erro 
de qualquer tipo, nenhum dos scripts subsequentes e carregado ou executado. Um script carregado 
com importScriptsQ pode ele mesmo chamar importScriptsQ para carregar os arquivos de que de- 
pende. Note, entretanto, que importScriptsQ nao tenta monitorar quais scripts ja foram carregados 
e nao faz nada para evitar ciclos de dependencia. 

importScriptsQ e uma fun^ao sincrona: ela nao retorna ate que todos os scripts tenham carregado 
e executado. Voce pode comeqar a usar os scripts que carregou assim que import Scripts () retor- 
nar: nao ha necessidade de uma furnjao callback ou de uma rotina de tratamento. Quando voce 
tiver acostumado a natureza assfncrona de JavaScript do lado do cliente, podera parecer estranho 
voltar novamente para a programa?ao sincrona simples. Mas esse e o encanto das threads: voce 
pode usar uma chamada de fun^ao com bloqueio em um worker sem bloquear o la<jo de eventos 
na thread principal e sem bloquear os calculos que estao sendo efetuados concomitantemente nos 
outros workers. 
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Modelo de execugao de worker 

As threads worker executam seu codigo (e todos os scripts importados) de forma smcrona, de cima para 
baixo, e entao entram em uma fase assincrona, na qual respondem a eventos e timers. Se urn worker 
registrar uma rotina de tratamento de evento onmessage, nao sera encerrado enquanto houver uma pos- 
sibilidade de que ainda possam chegar eventos mensagem. Mas se urn worker nao capta mensagens, 
sera executado ate que nao existam mais tarefas pendentes (como download e timers) e todas as fungoes 
callback relacionadas a tarefas sejam chamadas. Uma vez que todas as fungoes callback registradas se- 
jam chamadas, nao ha uma maneira de urn worker iniciar uma nova tarefa; portanto, o encerramento da 
thread e seguro. Imagine urn worker sem rotina de tratamento de evento onmessage que baixe urn arquivo 
usando XMLHttpRequest. Se a rotina de tratamento de onload desse download inicia urn novo download 
ou registra urn tempo-limite com setTimeoutQ, a thread tern novas tarefas e continua a executar. Caso 
contrario, a thread e encerrada. 


Como WorkerGlobalScope e o objeto global para workers, ele tem todas as propriedades do objeto 
global basico de JavaScript, como o objeto JSON, a fungao isNaNQ e a construtora DateQ. (Pesquise 
Global na segao de referenda da linguagem basica para ver uma lista completa.) Alem disso, contudo, 
WorkerGlobalScope tambem tem as seguintes propriedades do objeto Window do lado do cliente: 

• self e uma referenda ao objeto global em si. Note, entretanto, que WorkerGlobalScope nao 
tem a propriedade sinonima window que os objetos Window tem. 

• Os metodos de timer setTimeoutQ, clearTimeoutQ, setlntervalQ e clearlntervalQ. 

• Uma propriedade location que descreve o URL passado para a construtora WorkerQ. Essa 
propriedade se refere a um objeto Location, exatamente como a propriedade location de um 
objeto Window faz. O objeto Location tem propriedades href, protocol, host, hostname, port, 
pathname, search e hash. Em um worker, essas propriedades sao somente de leitura. 

• Uma propriedade navigator que se refere a um objeto com propriedades como as do obje¬ 
to Navigator de uma janela. O objeto navigator de um worker tem propriedades appName, 
appVersion, platform, userAgent e onLine. 

• Os metodos de destino de evento normais addEventListenerQ e removeEventListenerQ. 

• Uma propriedade onerror que pode ser configurada com uma fungao de tratamento de erro, 
como a rotina de tratamento Window, onerror descrita na Segao 14.6. Uma rotina de tratamento 
de erro (se voce registrar uma) recebe a mensagem de erro, o URL e o numero de linha como 
tres argumentos de string. Ela pode retornar false para indicar que o erro foi tratado e nao 
deve ser propagado como um evento erro no objeto Worker. (No entanto, quando este livro 
estava sendo escrito, o tratamento de erros dentro de um worker nao era implementado para 
funcionamento em conjunto nos diversos navegadores.) 

Por fim, o objeto WorkerGlobalScope contem importantes objetos construtores de JavaScript do 
lado do cliente. Isso inclui XMLHttpRequestQ para que os workers possam fazer scripts de HTTP 
(consulte o Capitulo 18) e a construtora WorkerQ, para que possam criar suas proprias threads 
worker. (Contudo, quando este livro estava sendo escrito, a construtora WorkerQ nao estava disponi- 
vel para workers no Chrome e no Safari.) 
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Varias das APIs de HTML5 descritas posteriormente neste capftulo definem recursos que estao 
disponfveis por intermedio de um objeto Window normal e tambem em workers, por meio de 
WorkerGlobalScope. Frequentemente, o objeto Window vai definir uma API assincrona e Worker- 
GlobalScope vai adicionar uma versao sincrona da mesma API basica. Essas APIs “habilitadas para 
workers” serao descritas quando chegarmos a elas, posteriormente no capftulo. 


Recursos avan^ados de worker 

As threads worker descritas nesta segao sao workers dedicados: eles sao associados (ou dedicados) a uma 
unica thread pai. A especificagao Web Workers define outro tipo de worker, o worker compartilhado. 
Quando escrevi isto, os navegadores ainda nao implementavam workers compartilhados. Contudo, a in- 
tengao e que um worker compartilhado seja um tipo de recurso nomeado que possa fornecer um servigo 
computacional para qualquer thread que queira se conectar nele. Na pratica, interagir com um worker 
compartilhado e como se comunicar com um servidor por meio de um soquete de rede. 

O"soquete"de um worker compartilhado e conhecido como MessagePort. Os objetos MessagePort defi¬ 
nem uma API de passagem de mensagens como a que vimos para workers dedicados e para troca de men- 
sagens entre documentos: eles tern um metodo postMessageQ e um atributode tratamento de evento 
onmessage. HTML5 permite criar pares conectados de objetos MessagePort com a construtora Message- 
Channel(). Voce pode passar objetos MessagePort (por meio de um argumento especial postMessageQ) 
para outras janelas ou outros workers e utiliza-los como canais de comunicagao dedicados. MessagePorts 
e MessageChannels sao uma API avangada ainda nao suportada por muitos navegadores e que nao e 
abordada aqui. 



22.4.3 Exemplosde Web Worker 

Vamos concluir esta segao com dois exemplos de Web Worker. O primeiro demonstra como efetuar 
calculos longos em uma thread worker de modo que nao afetem a rapidez de resposta da interface 
com o usuario da thread principal. O segundo exemplo demonstra como as threads worker podem 
usar APIs sfncronas mais simples. 

O Exemplo 22-6 define uma fimgao smearQ que espera um elemento <img> como argumento. Ela 
aplica um efeito de motion blur para “borrar” a imagem a direita. O exemplo usa tecnicas do Capf¬ 
tulo 21 para copiar a imagem em um elemento <canvas> fora da tela e, entao, para extrair os pixels 
da imagem em um objeto ImageData. Voce nao pode passar um elemento <img> ou <canvas> para 
um worker por meio de postMessageQ, mas pode passar um objeto ImageData (os detalhes estao em 
“Clones estruturados”, na pagina 672). O Exemplo 22-6 cria um objeto Worker e chama postMessa¬ 
geQ para enviar a ele os pixels a serem borrados. Quando o worker envia de volta os pixels processa- 
dos, o codigo os copia de volta no elemento <canvas>, os extrai como um URL data : / / e configura 
esse URL na propriedade src do elemento <img> original. 

Exemplo 22-6 Criando um Web Worker para processamento de imagem 

// Substitui de forma sincrona o conteudo da imagem por uma versao borrada. 

// A utiliza como segue: <img src="testimage.jpg" onclick="smear(this)"/> 
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function smear(img) { 

// Cria um elemento <canvas> fora da tela, com o mesmo tamanho da imagem 
var canvas = document.createElement("canvas"); 
canvas.width = img.width; 
canvas.height = img.height; 

// Copia a imagem no canvas e entao extrai seus pixels 
var context = canvas.getContext("2d"); 
context.drawlmage(img, 0, 0); 

var pixels = context.getImageData(0,0,img.width,img.height) 

// Envia os pixels para uma thread worker 

var worker = new Worker("SmearWorker.js"); // Cria o worker 

worker.postMessage(pixels); // Copia e envia os pixels 


// Registra uma rotina de tratamento para obter 
worker.onmessage = function(e) { 
var smeared_pixels = e.data; 
context.putImageData(smeared_pixels, 0, 0); 
img.src = canvas.toDataURL(); 
worker. terminate!); 
canvas.width = canvas.height = 0; 

} 

} 


resposta do worker 

// Pixels do worker 
// Copia-os no canvas 
// E entao na img 
// Para a thread worker 
// Nao mantem os pixels 


O Exemplo 22-7 e o codigo usado pela thread worker criada no Exemplo 22-6. A maior parte desse 
exemplo e a fun^ao de processamento de imagem: uma versao modificada do codigo do Exemplo 
21-10. Note que esse exemplo configura sua infraestrutura de passagem de mensagens em uma uni- 
ca linha de codigo: a rotina de tratamento de evento onmessage simplesmente borra a imagem que 
recebe e a posta de volta. 


Exemplo 22-7 Processamento de imagem em um Web Worker 

// Obtem um objeto ImageData da thread principal, processa-o, envia de volta 
onmessage = function(e) { postMessage(smear(e.data)); } 


// Mancha os pixels de ImageData a direita, produzindo um motion blur. 

// Para imagens grandes, essa funcao faz muitos calculos e causaria problemas de resposta 
// na interface com o usuario se fosse usada na thread principal, 
function smear(pixels) { 

var data = pixels.data, width = pixels.width, height = pixels.height; 
var n = 10 , m = n- 1 ; // Torna n maior para mais mancha 

for(var row = 0; row < height; row++) { // Para cada linha 

var i = row*width*4 + 4; 

for(var col = 1; col < width; col++, i += 4) { 
datafi] = (data[i] + data[i-4]*m)/n; 
data[i+l] = (data[i+l] + data[i-3]*m)/n; 
data[i+2] = (data[i+2] + data[i-2]*m)/n; 
data[i+3] = (data[i+3] + data[i-l]*m)/n; 


} 


} 


// Deslocamento do 22 pixel 
// Para cada coluna 
// Componente de pixel vermelho 
// Verde 
// Azul 

// Componente alfa 


} 
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Note que o codigo do Exemplo 22-7 pode processar qualquer quantidade de imagens enviadas a 
ele. Por simplicidade, contudo, o Exemplo 22-6 cria um novo objeto Worker para cada imagem que 
processa. Para garantir que o worker nao fique apenas esperando mensagens, ele elimina a thread 
com terminate () ao terminar. 


Depurando workers 

Uma das APIs nao dispomveis (pelo menos quando escrevi isto) em WorkerGlobalScope e a API console e 
sua valiosa fungao console. log(). As threads worker nao podem registrar saida e interagir com o docu- 
mento; portanto, podem ser diffceis de depurar. Se um worker langar um erro, a thread principal vai rece- 
ber um evento erro no objeto Worker. Mas muitas vezes voce precisa de um modo de fazer com que um 
worker produza mensagens de depuragao na saida que sejam visfveis na console Web do navegador. Um 
modo simples de fazer isso e modificar o protocolo de passagem de mensagens utilizado com o worker 
para que, de algum modo, este possa enviar mensagens de depuragao. No Exemplo 22-6, por exemplo, 
poderiamos inserir o codigo a seguir no inicio da rotina de tratamento de evento onmessage: 
if (typeof e.data === "string") { 

console.log("Worker: " + e.data); 

} 

Com esse codigo adicional, a thread Worker poderia exibir mensagens de depuragao simplesmente pas- 
sando strings para postMessageQ. 


O exemplo a seguir demonstra como os Web Workers permitem escrever codigo sincrono e utiliza-lo 
com seguranga em JavaScript do lado do cliente. A Segao 18.1.2.1 mostrou como fazer requisigoes 
HTTP sincronos com XMLHttpRequest, mas foi avisado que fazer isso na thread principal do 
navegador era uma pratica muito ruim. Contudo, em um thread worker e perfeitamente razoavel 
fazer pedidos sincronos e o Exemplo 22-8 demonstra codigo de worker que faz exatamente isso. Sua 
rotina de tratamento de evento onmessage espera um array de URLs a serem buscados. Ela usa a API 
XMLHttpRequest sincrona para busca-los e, entao, posta o conteudo textual dos URLs como um 
array de strings de volta na thread principal. Ou entao, se qualquer um dos pedidos HTTP falhar, 
ela langa um erro que se propaga ate a rotina de tratamento de onerror do Worker. 

Exemplo 22-8 Fazendo requisigoes XMLHttpRequest sincronos em um Web Worker 

// Este arquivo sera carregado com um novo WorkerQ, de modo que e executado como um 
// thread independente e pode usar a API XMLHttpRequest sincrona com seguranca. 

// As mensagens devem ser arrays de URLs. Busca de forma sincrona o 

// conteudo de cada URL como uma string e envia de volta um array dessas strings. 

onmessage = function(e) { 

var urls = e.data; // Nossa entrada: os URLs a serem buscados 

var contents = []; // Nossa saida: o conteudo desses URLs 


for(var i = 0; i < urls.length; i++) { 
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} 


var url = urls[i]; 

var xhr = new XMLHttpRequestQ; 

xhr.open("GET", url, false); 

xhr.sendQ; 

if (xhr.status !== 200) 

throw Error(xhr.status + " " 
contents.push(xhr.responseText); 


// Para cada URL 
// Inicia uma requisiqao HTTP 
// false torna isso sincrono 
// Bloqueia ate que a resposta esteja completa 
// Lanqa um erro se a requisipao falhou 
+ xhr.statusText + " + url); 

// Caso contrario, armazena o conteudo do URL 


// Por fim, envia o array de conteudo de URL de volta para a thread principal 
postMessage(contents); 


22.5 Arrays tipados e ArrayBuffers 

Conforme voce aprendeu no Capftulo 7, em JavaScript os arrays sao objetos de uso geral, com pro- 
priedades numericas e uma propriedade especial length. Os elementos do array podem ser qualquer 
valor de JavaScript. Os arrays podem aumentar ou diminuir dinamicamente e podem ser esparsos. 
As implementapoes de JavaScript fazem muitas otimizapoes para que os usos tipicos de arrays de 
JavaScript sejam muito rapidos. Os arrays tipados sao objetos semelhantes a um array (Sepao 7.11) 
que diferem dos arrays normais de algumas maneiras importantes: 

• Todos os elementos de um array tipado sao niimeros. A construtora usada para cria-lo deter- 
mina o tipo (inteiros com sinal ou sem sinal ou em ponto flutuante) e o tamanho (em bits) 
dos niimeros. 

• Os arrays tipados tern comprimento fixo. 

• Os elementos de um array tipado sao sempre inicializados com 0 quando o array e criado. 

Existem oito tipos de arrays tipados, cada um com um tipo de elemento diferente. Voce pode cria- 
-los com as seguintes construtoras: 


Construtora 

Tipo numerico 

Int8Array() 

bytes com sinal 

Uint8Array() 

bytes sem sinal 

Intl6Array() 

inteiros curtos de 16 bits com sinal 

Uintl6Array() 

inteiros curtos de 16 bits sem sinal 

Int32Array() 

inteiros de 32 bits com sinal 

Uint32Array() 

inteiros de 32 bits sem sinal 

Float32Array() 

valor de 32 bits em ponto flutuante 

Float64Array() 

valor de 64 bits em ponto flutuante: um ntimero 
normal de JavaScript 
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Arrays tipados, <canvas> e nucleo de JavaScript 

Os arrays tipados sao uma parte essencial da API grafica 3D WebGL para o elemento <canvas> e os navega- 
dores os tern implementado como parte da WebGL A WebGL nao e abordada neste livro, mas os arrays ti¬ 
pados sao uteis de modo geral e sao abordados aqui. Voce pode lembrar, do Capitulo 21, que a API Canvas 
define um metodo getImageData() que retorna um objeto ImageData. A propriedade data de urn Image- 
Data e um array de bytes. 0 padrao HTML chama isso de CanvasPixelArray, mas e basicamente o mesmo 
que Uint8Array descrito aqui, exceto quanto a maneira de tratar de valores fora do intervalo de 0 a 255. 

Note que esses tipos nao fazem parte da linguagem basica. £ provavel que uma futura versao da lingua- 
gem JavaScript indua suporte para arrays tipados como esses, mas quando este livro estava sendo escrito, 
nao estava claro se a linguagem adotaria a API descrita aqui ou criaria uma nova API. 


Ao criar um array tipado, voce passa o tamanho do array para a construtora ou passa um array ou 
um array tipado para inicializar os elementos de array. Uma vez criado um array tipado, voce pode 
ler e gravar seus elementos com a notagao normal de colchetes, exatamente como faria com qualquer 
outro objeto semelhante a um array: 


var bytes = new Uint8Array(l024); 
for(var i = 0; i < bytes.length; i++) 
bytes[i] = i & OxFF; 
var copy = new Uint8Array(bytes); 
var ints = new Int32Array([0,l,2,3]); 


// Um kilobyte de bytes 

// Para cada elemento do array 

// Configura-o com os 8 bits inferiores do indice 

// Faz uma copia do array 

// Um array tipado contendo esses 4 ints 


As implementagoes modernas de JavaScript otimizam os arrays para torna-los muito eficientes. Con- 
tudo, os arrays tipados podem ser ainda mais eficientes, tanto em tempo de execugao como no uso 
de memoria. A fungao a seguir calcula o maior numero primo menor do que o valor especificado. 
Ela usa o algoritmo do crivo de Eratostenes, o qual exige um grande array para monitorar quais 
numeros sao primos e quais sao compostos. Como apenas um bit de informagao e exigido para 
cada elemento do array, um Int8Array pode ser usado mais eficientemente do que um array normal 


JavaScript: 

// Retorna o maior numero primo menor do 
function sieve(n) { 

var a = new Int8Array(n+l); 

var max = Math.floor(Math.sqrt(n)); 

while(p <= max) { 

forfvar i = 2*p; i <= n; i += p) 

a[i] = i; 

while(a[++p]) /* vazio */; 

} 

while(a[n]) n-; 

> r6tUrn 


que n, usando o crivo de Eratostenes 

// a[x] sera l se x for composto 

// Nao faz fatores mais altos do que isso 

// 2 e o primeiro primo 

// Para primos menores do que max 

// Marca multiplos de p como compostos 

// 0 proximo indice nao marcado e primo 

// Itera para tras para encontrar o ultimo 

// primo 

// E o retorna 


A fungao sieve() continua a funcionar se voce substitui a construtora Int8Array() pela construtora 
Array () tradicional, mas e executada duas a tres vezes mais lentamente e exige significativamente 
mais memoria para valores grandes do parametro n. Voce tambem poderia achar os arrays tipados 
uteis ao trabalhar com numeros de elementos graficos ou matematica: 
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var matrix = new Float64Array(9); 
var 3dPoint = new Intl6Array(3); 
var rgba = new Uint8Array(4); 
var sudoku = new Uint8Array(8l); 


// Uma matriz de 3x3 
// Urn ponto no espaco 3D 
//Urn valor de pixel RGBA de 4 bytes 
// Urn tabuleiro de sudoku de 9x9 


A nota^ao de colchetes de JavaScript permite obter e configurar elementos individuals de um array 
tipado. Mas os arrays tipados tambem definem metodos para configurar e consultar regioes inteiras 
do array. O metodo set() copia os elementos de arrays normais ou tipados em um array tipado: 

var bytes = new Uint8Array(l024) // Um buffer de IK 

var pattern = new Uint8Array([0,l,2,3]); // Um array de 4 bytes 

bytes.set(pattern); // Copia-os no inicio de outro array de bytes 

bytes.set(pattern, 4); // Copia-os novamente, em um deslocamento diferente 

bytes.set([0,l,2,3], 8); // Ou apenas copia valores direto de um array normal 


Os arrays tipados tambem tern um metodo subarray que retorna uma parte do array em que e cha- 
mado: 


var ints = new Intl6Array([0,l,2,3,4,5,6,7,8,9]); // 10 inteiros curtos 

var last3 = ints.subaarray(ints.length-3, ints.length); // Os 3 ultimos deles 
last3[0] // => 7: isso e o mesmo que ints[7] 

Note que subarrayQ nao faz uma copia dos dados - apenas retorna um novo modo de exibicao dos 
mesmos valores subjacentes: 

ints[9] = - 1 ; // Altera um valor no array original e... 

Iast3[2] // => -is ele tambem muda no sub-array 


O fato de o metodo subarrayQ retornar um novo modo de exibicao de um array ja existente revela 
algo importante sobre os arrays tipados: todos eles sao modos de exibicao de um grupo de bytes 
subjacentes, conhecidos como ArrayBuffer. Todo array tipado tern tres propriedades relacionadas ao 
buffer subjacente: 


last3.buffer 

last3.buffer == ints.buffer 

Iast3.byte0ffset 

last3.byteLength 


// => retorna um objeto ArrayBuffer 

// => verdadeiro: ambos sao modos de exibicao do mesmo 

// buffer 

// => 14: este modo de exibicao comeca no byte 14 do buffer 
// => 6: este modo de exibiqao tern 6 bytes (3 ints de 16 
// bits) de comprimento 


O objeto ArrayBuffer em si tern apenas uma propriedade que retorna seu comprimento: 


last3.byteLength // => 6: este modo de exibiqao tern 6 bytes de comprimento 

last3.buffer.byteLength // => 20: mas o buffer subjacente tern 20 bytes 


Os ArrayBuffers sao apenas trechos de bytes opacos. Voce pode acessar esses bytes com arrays tipa¬ 
dos, mas um ArrayBuffer nao e ele mesmo um array tipado. Contudo, tome cuidado: indexa^ao 
numerica de array pode ser usada com ArrayBuffers assim como em qualquer objeto de JavaScript. 
Contudo, fazer isso nao da acesso aos bytes do buffer: 


var bytes = new Uint8Array(8); 
bytes[0] = 1; 
bytes.bufferfo] 
bytes.bufferjl] = 255; 
bytes.bufferfl] 


// Aloca 8 bytes 

// Configura o primeiro byte como 1 
// => indefinido: o buffer nao tern indice 0 
// Tenta incorretamente configurar um byte no buffer 
// => 255: isso apenas configura uma propriedade normal 
// de JS 

// => 0: a linha anterior nao configurou o 


bytes[l] 


byte 
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Voce pode criar ArrayBufFers diretamente com a construtora ArrayBuffer( ) e, dado um objeto Ar- 
rayBufFer, pode criar qualquer numero de modos de exibipao de array tipado desse bufFer: 

var buf = new ArrayBuffer(l024*l024); // Um megabyte 

var asbytes = new Uint8Array(buf); // Visto como bytes 

var asints = new Int32Array(buf); // Visto como inteiro de 32 bits com sinal 

var lastK = new Uint8Array(buf,1023*1024); // Ultimo kilobyte como bytes 

var ints2 = new Int32Array(buf, 1024, 256); // 22 kilobyte como 256 inteiros 

Os arrays tipados permitem ver a mesma sequencia de bytes em trechos de 8, 16, 32 ou 64 bits. Isso 
expoe a “ordem endian”: a ordem na qual os bytes sao organizados em palavras mais longas. Por 
eficiencia, os arrays tipados utilizam a ordem endian nativa do hardware subjacente. Em sistemas 
little-endian, os bytes de um numero sao organizados em um ArrayBufFer, do menos significativo 
para o mais significativo. Em plataFormas big-endian, os bytes sao organizados do mais significativo 
para o menos significativo. Voce pode determinar a ordem endian da plataForma subjacente com 
codigo como o seguinte: 

// Se o inteiro 0x00000001 e organizado na memoria como 01 00 00 00, entao 
// estamos em uma plataforma little-endian. Em uma plataforma big-endian, obteriamos 
//os bytes 00 oo oo 01 . 

var little_endian = new Int8Array(new Int32Array([l]).buffer)[0] === 1; 


Atualmente, as arquiteturas de CPU mais comuns sao little-endian. Contudo, muitos protocolos de 
rede e alguns Formatos de arquivo binarios exigem ordem de bytes big-endian. Na Sepao 22.6, voce 
vai aprender como pode usar ArrayBuFfers para armazenar os bytes lidos de arquivos ou baixados da 
rede. Quando Faz isso, voce nao pode apenas supor que a ordem endian da plataForma corresponde 
a ordem dos bytes dos dados. Em geral, ao trabalhar com dados externos, voce pode usar Int8Array 
e Uint8Array para ver os dados como um array de bytes individuals, mas nao deve usar os outros 
arrays tipados com tamanhos de palavra de varios bytes. Em vez disso, pode usar a classe DataView, 
que define metodos para ler e gravar valores de um ArrayBuFfer com ordem de byte especificada 
explicitamente: 


var view = DataView(data); 
var int = view.getlnt32(0); 
int = view.getlnt32(4,false); 
int = view.getlnt32(8,true) 
view.setlnt32(8,int,false); 


// Presume que isso e um ArrayBuffer da rede 
// Cria um modo de exibi^ao dele 
// int big-endian de 32 bits com sinal do byte 0 
// 0 proximo int de 32 bits tambem e big-endian 
// Proximos 4 bytes como int little-endian com sinal 
// Grava de volta no formato big-endian 


DataView define oito metodos get para cada um dos oito Formatos de array tipado. Eles tern nomes 
como getlnti6(), getUint32() e getFloat64(). O primeiro argumento e o deslocamento de byte den- 
tro do ArrayBufFer em que o valor come^a. Todos esses metodos getter, Fora getlnt8() e getUint8(), 
aceitam um valor booleano opcional como segundo argumento. Se o segundo argumento e omitido 
ou e False, a ordem de byte big-endian e usada. Se o segundo argumento e true, e usada a ordem 
little-endian. 


DataView define oito metodos set correspondentes que gravam valores no ArrayBufFer subjacente. 
O primeiro argumento e o deslocamento em que o valor comepa. O segundo argumento e o valor a 
gravar. Cada um dos metodos, exceto setlnt8() e setUint8(), aceita um terceiro argumento opcio¬ 
nal. Se o argumento e omitido ou e false, o valor e gravado no Formato big-endian, com o byte mais 
significativo primeiro. Se o argumento e true, o valor e gravado no Formato little-endian, com o byte 
menos significativo primeiro. 
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22.6 Blobs 

Um Blob e uma referenda opaca para (ou al$a para) um trecho de dados. O nome vem dos bancos 
de dados SQL, onde significa “Binary Large Object” (objeto binario grande). Em JavaScript, os Blo¬ 
bs frequentemente representam dados binarios e podem ser grandes, mas nenhuma das duas coisas e 
obrigatoria: um Blob tambem poderia representar o conteudo de um arquivo de texto pequeno. Os 
Blobs sao opacos: tudo que pode ser feito diretamente com eles e determinar seu tamanho em bytes, 
solicitar seu tipo MIME e decompo-los em Blobs menores: 

var blob = ... // Vamos ver posteriormente como obter um Blob 

blob.size // Tamanho do Blob em bytes 

blob.type // Tipo MIME do Blob ou se for desconhecido 

var subblob = blob.slice(0,1024, "text/plain"); // Primeiro IK do Blob como texto 

var last = blob.slice(blob.size-1024, 1024); // Ultimo IK do Blob, nao tipado 

O navegador Web pode armazenar Blobs na memoria ou no disco e os Blobs podem representar 
trechos de dados enormes (como arquivos de video), grandes demais para caber na memoria prin¬ 
cipal sem primeiro serem decompostos em partes menores com sliceQ. Como os Blobs podem ser 
muito grandes e exigir acesso a disco, as APIs que trabalham com eles sao assincronas (com versoes 
sfncronas disponiveis para uso por threads worker). 

Os Blobs em si nao sao extremamente interessantes, mas servem como um mecanismo de troca de 
dados fundamental para varias APIs JavaScript que trabalham com dados binarios. A Figura 22-2 
ilustra como os Blobs podem ser lidos e gravados na Web, no sistema de arquivo local, em bancos de 
dados locais e tambem em outras janelas e workers. Mostra tambem como o conteudo do Blob pode 
ser acessado como texto, como arrays tipados ou como URLs. 

Antes de poder trabalhar com um Blob, voce deve obter um de algum modo. Existem varias manei- 
ras de fazer isso, algumas envolvendo APIs que ja abordamos e algumas envolvendo APIs descritas 
posteriormente neste capitulo: 

• Os Blobs sao suportados pelo algoritmo de clone estruturado (consulte “Clones estruturados”, 
na pagina 672), ou seja, voce pode obter um de outra janela ou thread por meio do evento 
mensagem. Consulte a Secjao 22.3 e a Secjao 22.4. 

• Os Blobs podem ser recuperados de bancos de dados do lado do cliente, conforme descrito na 
Se$ao 22.8. 

• Os Blobs podem ser baixados da Web por meio de scripts HTTP, usando-se recursos de ponta 
da especificaQo XHR2. Isso esta abordado na SeQo 22.6.2. 

• Voce pode criar seus proprios blobs, usando um objeto BlobBuilder para construi-los a partir 
de strings, de objetos ArrayBuffer (SeQo 22.5) e de outros Blobs. O objeto BlobBuilder esta 
demonstrado na SeQo 22.6.3. 

• Por fim, e mais importante, o objeto File de JavaScript do lado do cliente e um subtipo de 
Blob: um File e apenas um Blob de dados com um nome e uma data de modificaQo. Voce 
pode obter objetos File a partir de elementos <input type="file"> e da API de arrastar e soltar, 
conforme explicado na SeQo 22.6.1. Os objetos File tambem podem ser obtidos usando-se a 
API Filesystem, o que e abordado na SeQo 22.7. 

Uma vez que voce tenha um Blob, existem varias coisas que podem ser feitas com ele, muitas delas 
simetricas aos itens anteriores: 
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Figura 22-2 Blobs e as APIs que os utilizam. 


• Urn Blob pode ser enviado para outra janela ou thread worker com postMessage(). Consulte a 
Segao 22.3 e a Se^ao 22.4. 

• Um Blob pode ser armazenado em um banco de dados do lado do cliente. Consulte a Se^ao 

22 . 8 . 

• Um Blob pode ser carregado em um servidor, passando-o para o metodo send() de um objeto 
XMLHttpRequest. O exemplo de upload de arquivo (Exemplo 18-9) demonstrou como fazer 
isso (lembre-se de que um objeto File e apenas um tipo especializado de Blob). 

• A ftunjao createObjectURLQ pode ser usada para obter um URL blob: // especial que se refira 
ao conteudo de um Blob e, entao, esse URL pode ser usado com o DOM ou com CSS. A 
Segao 22.6.4 demonstra isso. 

• Um objeto FileReader pode ser usado para extrair de forma assincrona (ou de forma sincrona, 
em uma thread worker) o conteudo de um Blob em uma string ou em um ArrayBuffer. A 
Segao 22.6.5 demonstra a tecnica basica. 
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• A API Filesystem e o objeto File Writer, descritos na Secjao 22.7, podem ser usados para gravar 
um Blob em um arquivo local. 

As subsefoes a seguir demonstram maneiras simples de obter e usar Blobs. As tecnicas mais compli- 
cadas, envolvendo o sistema de arquivo local e bancos de dados do lado do cliente, sao abordadas 
posteriormente, em suas proprias seqoes. 

22.6.1 Arquivos como Blobs 

O elemento cinput type="file"> se destinava originalmente a habilitar uploads de arquivo em for- 
mularios HTML. Os navegadores sempre tiveram o cuidado de implementar esse elemento de modo 
a permitir apenas o upload de arquivos explicitamente selecionados pelo usuario. Scripts nao podem 
configurar a propriedade value desse elemento com um nome de arquivo, de modo que nao podem 
carregar arquivos arbitrarios do computador do usuario. Mais recentemente, os fornecedores de 
navegador estenderam esse elemento para permitir acesso do lado do cliente a arquivos selecionados 
pelo usuario. Note que permitir a um script do lado do cliente ler o conteudo de arquivos seleciona¬ 
dos nao e mais nem menos seguro do que permitir que esses arquivos sejam carregados no servidor. 

Nos navegadores que suportam acesso a arquivos locais, a propriedade files de um elemento 
cinput type="file"> sera um objeto FileList. Trata-se de um objeto semelhante a um array cujos 
elementos sao zero ou mais objetos File selecionados pelo usuario. Um objeto File e um Blob que 
tambem tern propriedades name e lastModifiedDate: 

// Registra informaqoes sobre uma lista de arquivos selecionados 
function fileinfo(files) { 

for(var i = 0; i < files.length; i++) { // files e um objeto semelhante a um array 

var f = files[i]; 

console.log(f.name, // Somente nome: sem caminho 

f.size, f.type, // size e type sao propriedades do Blob 

f.lastModifiedDate); // outra propriedade de File 

} 

} 

</script> 

<!-- Permite a selecao de varios arquivos de imagem, bem como passa-los para fileinfo()--> 
cinput type="file" accept="image/*" multiple onchange="fileinfo(this.files)"/> 

A capacidade de exibir os nomes, tipos e tamanhos de arquivos selecionados nao e tremendamente 
interessante. Na Seqao 22.6.4 e na Se^ao 22.6.5, vamos ver como e possivel utilizar o conteudo do 
arquivo. 

Alem de selecionar arquivos com um elemento cinput>, o usuario tambem pode dar a um script 
acesso a arquivos locais, soltando-os no navegador. Quando um aplicativo receber um evento drop, 
a propriedade dataTransfer.files do objeto evento sera o objeto FileList associado a soltura, caso te- 
nha havido uma. A API de arrastar e soltar foi abordada na Seq:ao 17.7 e o Exemplo 22-10, a seguir, 
demonstra seu uso com arquivos. 

22.6.2 Baixando Blobs 

O Capftulo 18 abordou os scripts HTTP com o objeto XMLHttpRequest e tambem documen- 
tou alguns dos novos recursos da versao preliminar da especifica?ao XMLHttpRequest Level 2 
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(XHR2). Quando este livro estava sendo escrito, a XHR2 definia uma maneira de baixar o con¬ 
teudo de um URL como um Blob, mas as implementapoes de navegador ainda nao a suportavam. 
Como o codigo ainda nao pode ser testado, esta sepao e apenas um esbopo simples da API XHR2 
para trabalhar com Blobs. 

O Exemplo 22-9 mostra a tecnica basica para baixar um Blob da Web. Compare esse exemplo com 
o Exemplo 18-2, que baixa o conteudo de um URL como texto puro: 


Exemplo 22-9 Baixando um Blob com XMLHttpRequest 

// Obtem (com GET) o conteudo do url como um B 
// especificada. 

// Este codigo nao esta testado: nenhum navegador suportava 
// escrito. 

function getBlob(url, callback) { 

var xhr = new XMLHttpRequestQ; // Cria 
xhr.open("GET", url); 
xhr.responseType = "blob" 
xhr.onload = function() { 
callback(xhr.response) 

} 

xhr.send(null); 


passa-o para a funpao callback 
API quando ele foi 


} 


objeto XHR 
Especifica o URL a ser buscado 
// Gostariamos de um Blob, por favor 
// onload e mais facil do que onreadystatechange 
// Passa o blob para nossa funcao callback 
// Note .response e nao .responseText 
// Envia o pedido agora 


Se o Blob e muito grande e voce quiser comepar a processa-lo enquanto ele esta sendo baixado, 
pode usar uma rotina de tratamento de evento onprogress, junto com as tecnicas de leitura de Blob 
demonstradas na Sepao 22.6.5. 


22.6.3 Construindo Blobs 

Os Blobs frequentemente representam trechos de dados de uma fonte externa, como um arquivo lo¬ 
cal, um URL ou um banco de dados. Mas as vezes um aplicativo Web quer criar seus proprios Blobs 
para carregar na Web ou armazenar em um arquivo ou banco de dados ou passar para outra thread. 
Para criar um Blob a partir de seus proprios dados, use um BlobBuilder: 

// Cria um novo BlobBuilder 
var bb = new BlobBuilderQ; 

// Anexa uma string no blob e marca o final da string com um caractere NUL 

bb.append("This blob contains this text and 10 big-endian 32 bits signed ints."); 

bb.append("\0"); // Termina a string com NUL para marcar seu fim 

// Armazena alguns dados em um ArrayBuffer 

var ab = new ArrayBuffer(4*lO); 

var dv = new DataView(ab); 

for(var i = 0; i < 10; i++) dv.setlnt32(i*4,i); 

// Anexa o ArrayBuffer ao Blob 
bb.append(ab); 

// Agora obtem o blob do construtor, especificando um tipo MIME ficticio 
var blob = bb.getBlob("x-opcional/mime-type-here"); 

Vimos no irn'cio desta sepao que os Blobs tern um metodo slice() que os decompoem em partes. 
Voce pode unir Blobs passando-os para o metodo append() de um BlobBuilder. 
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22.6.4 URLs de Blob 

As segoes anteriores mostraram como voce pode obter ou criar Blobs. Agora vamos avangar e come- 
gar a falar sobre o que e possfvel fazer com os Blobs obtidos ou criados. Uma das coisas mais simples 
que podem ser feitas com um Blob e criar um URL que se refira a ele. Entao, voce pode usar esse 
URL em qualquer lugar onde usaria um URL normal: no DOM, em uma folha de estilo ou mesmo 
como destino de um XMLHttpRequest. 

Crie um URL de Blob com a fungao createObjectl)RL(). Quando este livro estava sendo escrito, a 
versao preliminar da especificagao e o Firefox 4 colocavam essa fungao em um objeto global chama- 
do URL, sendo que o Chrome e o Webkit colocam um prefixo nesse novo objeto global, chamando-o 
de webkitURL. As versoes anteriores da especificagao (e as implementagoes de navegador anteriores) 
colocam a fungao diretamente no objeto Window. Para criar URLs de Blob de forma portavel entre 
os navegadores, voce pode definir um utilitario como segue: 

var getBlobURL = (window.URL && URL.createObjectURL.bind(URL)) || 

(window.webkitURL && webkitURL.createObjectURL.bind(webkitURL)) || 
window.createObjectURL; 

Os Web workers tambem podem usar essa API e ter acesso a essas mesmas fungoes, no mesmo ob¬ 
jeto URL (ou webkitURL). 

Passe um blob para createObjectURLQ e ela retorna um URL (como uma string normal). O URL 
vai comegar com blob: / / e esse esquema de URL sera seguido por uma string de texto curta, iden- 
tificando o Blob com algum tipo de identificador opaco exclusivo. Note que isso e muito diferente 
de um URL data://, que codifica seu proprio conteudo. Um URL de Blob e simplesmente uma 
referenda a um Blob armazenado pelo navegador na memoria ou no disco. Os URLs blob:// tam¬ 
bem sao muito diferentes dos URLs file://, que se referem diretamente a um arquivo no sistema 
de arquivo local, expondo o caminho do arquivo, permitindo navegagao pelo diretorio e levantando 
problemas de seguranga. 

O Exemplo 22-10 demonstra duas tecnicas importantes. Primeiramente, ele implementa um “alvo 
de soltura” que capta eventos arrastar e soltar envolvendo arquivos. Entao, quando o usuario solta 
um ou mais arquivos no alvo de soltura, o exemplo usa createObjectURLQ para obter um URL para 
cada um e, entao, cria elementos <img> para exibir miniaturas das imagens referenciadas por esses 
URLs. 

Exemplo 22-10 Exibindo arquivos de imagem soltos com URLs de Blob 
<!DOCTYPE html> 

<htmlxhead> 

// Quando este livro estava sendo escrito, o Firefox e o Webkit discordavam quanto ao 
// nome da fungao createObjectURLQ 

var getBlobURL = (window.URL && URL.createObjectURL.bind(URL)) || 

(window.webkitURL && webkitURL.createObjectURL.bind(webkitURL)) || 
window.createObjectURL; 

var revokeBlobURL = (window.URL && URL.revokeObjectURL.bind(URL)) || 

(window.webkitURL && webkitURL.revokeObjectURL.bind(webkitURL)) || 
window.revokeObjectURL; 
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// Ouando o documento e carregado, adiciona rotinas de tratamento de evento no elemento 
// droptarget para que ele possa tratar de solturas de arquivos 
window.onload = functionQ { 

// Localiza o elemento em que queremos adicionar rotinas de tratamento. 
var droptarget = document.getElementById("droptarget"); 

// Ouando o usuario comeca a arrastar arquivos sobre o droptarget, realqa-o. 
droptarget.ondragenter = functionQ) { 

II Se o arrasto e de algo que nao sejam arquivos, ignora-o. 

// 0 atributo dropzone de HTML5 vai simplificar isso, quando for implementado. 
var types = e.dataTransfer.types; 
if (!types || 

(types.contains && types.contains("Files")) || 

(types.indexOf && types.indexOf("Files") != -l)) { 

droptarget.classList.add(”active"); // Realca droptarget 

return false; // Estamos interessados no arrasto 

} 

h 

// Retira o realce da zona de soltura, caso o usuario saia dela 
droptarget.ondragleave = functionQ { 

droptarget.classList.remove("active"); 

}; 


// Esta rotina de tratamento apenas diz ao navegador para que continue a enviar 
// notificaqoes 

droptarget.ondragover = function(e) { return false; }; 


// Quando o usuario solta arquivos em nos, obtemos 
droptarget.ondrop = function(e) { 
var files = e.dataTransfer.files; 
for(var i = 0; i < files.length; i++) { 
var type = files[i].type; 
if (type.substring(o,6) !== "image/") 
continue; 

var img = document.createElement("img"); 
img.src = getBlobURL(files[i]); 
img.onload = functionQ { 
this.width = 100; 
document.body.appendChild(this); 
revokeBlobURL(this.src); 

} 


seus URLs e exibimos miniaturas. 

// Os arquivos soltos 
// Itera por todos eles 

// Pula o que nao for imagem 

// Cria urn elemento <img> 

// Usa URL de Blob com <img> 
// Ouando ele for carregado 
// ajusta seu tamanho e 
// insere no documento. 

// Mas nao vaza memorial 


droptarget.classList.remove("active”); II 

return false; // 

} 

}; 

<style> /* Estilos simples para o alvo de soltura de arquivo 
#droptarget { border: solid black 2px; width: 200px; height: 
#droptarget.active { border: solid red 4px; } 


Retira o realce de 
droptarget 
Tratamos da soltura 
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</style> 

</head> 

<body> <!-- 0 documento comeca apenas com o alvo de soltura de arquivo --> 

<div id="droptarget">Drop Image Files Here</div> 

</body> 

</html> 

Os URLs de Blob tem a mesma origem (Se^ao 13.6.2) do script que os cria. Isso os torna muito mais 
versateis do que os URLs file://, que tem uma origem separada e, portanto, sao diffceis de usar 
dentro de um aplicativo Web. Um URL de Blob e valido apenas em documentos da mesma origem. 
Se, por exemplo, voce passasse um URL Blob via postMessageQ para uma janela com uma origem 
diferente, o URL nao teria significado para essa janela. 

Os URLs de Blob nao sao permanentes. Um URL de Blob nao sera mais valido quando o usuario 
tiver fechado ou saido do documento cujo script criou o URL. Nao e possivel, por exemplo, salvar 
um URL de Blob no armazenamento local e entao reutiliza-lo quando o usuario iniciar uma nova 
sessao com um aplicativo Web. 

Tambem e possivel “revogar” manualmente a validade de um URL de Blob, chamando URL.revoke- 
ObjectURL() (ou webkitURL.revokeObjectURL()) - e voce pode ter notado que o Exemplo 22-10 faz 
isso. Essa e uma questao de gerenciamento de memoria. Uma vez exibida a imagem em miniatura, 
o Blob nao e mais necessario e deve ser eliminado pela coleta de lixo. Mas se o navegador Web esta 
mantendo um mapeamento do URL de Blob que criamos para o Blob, esse Blob nao pode ir para a 
coleta de lixo, mesmo que nao o estejamos usando. O interpretador JavaScript nao pode monitorar 
a utiliza^ao de strings e, se o URL ainda e valido, o interpretador tem de supor que ele ainda pode 
ser usado. Isso significa que o Blob nao pode ir para a coleta de lixo ate que o URL seja revogado. O 
Exemplo 22-10 usa arquivos locais que nao exigem limpeza, mas voce pode imaginar um problema 
de gerenciamento de memoria mais serio se o Blob em questao fosse construido na memoria com 
um BlobBuilder ou baixado com XMLHttpRequest e armazenado em um arquivo temporario. 

O esquema de URL blob : / / e explicitamente projetado para funcionar como um URL http : / / sim- 
plificado e, quando URLs blob: / / sao solicitados, os navegadores sao obrigados a atuar como mini- 
-servidores HTTP. Se e solicitado um URL de Blob que nao e mais valido, o navegador deve enviar 
um codigo de status 404 Not Found. Se e solicitado um URL de Blob de uma origem diferente, o 
navegador deve responder com 403 Not Allowed. Os URLs de Blob so funcionam com solicita^oes 
GET e, quando um e solicitado com sucesso, o navegador envia um codigo de status HTTP 200 
OK e tambem um cabe^alho Content-Type que utiliza a propriedade type do Blob. Como os URLs 
de Blob funcionam como URLs HTTP simples, voce pode “baixar” seus conteudos com XMLHtt¬ 
pRequest. (Contudo, conforme vamos ver na proxima se<jao, voce pode ler o conteudo de um Blob 
mais diretamente, usando um objeto FileReader.) 

22.6.5 Lendo Blobs 

Ate aqui, os Blobs tem sido trechos de dados opacos que permitem apenas acesso indireto ao seu 
conteudo por meio de URLs de Blob. O objeto FileReader nos permite acesso de leitura aos ca- 
racteres ou bytes contidos em um Blob, sendo que voce pode considera-lo como o oposto de um 
BlobBuilder. (Um nome melhor seria BlobReader, pois ele funciona com qualquer Blob e nao 
apenas com Files.) Como os Blobs podem ser objetos muito grandes armazenados no sistema 
de arquivos, a API para le-los e assfncrona, muito parecida com a API XMLHttpRequest. Uma 
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versao si'ncrona da API, FileReaderSync, esta disponrvel em threads worker, embora workers 
tambem possam usar a versao assi'ncrona. 

Para usar um FileReader, primeiro crie uma instancia com a construtora FileReader( ). Em seguida, 
defina rotinas de tratamento de evento. Normalmente, voce vai definir rotinas de tratamento para 
eventos load e error e possivelmente tambem para eventos progress. Isso pode ser feito com onload, 
onerror e onprogress ou com o metodo padrao addEventListenerQ. Os objetos FileReader tambem 
disparam eventos loadstart, loadend e abort, os quais sao como os eventos XMLHttpRequest de 
nomes iguais: consulte a Serjao 18.1.4. 

Uma vez que voce tenha criado um FileReader e registrado rotinas de tratamento de evento conve- 
nientes, deve passar o Blob que deseja ler para um dos quatro metodos: readAsTextQ, readAsArray 
BufferQ, readAsDataURL() e readAsBinaryStringQ. (Evidentemente, voce pode chamar um desses 
metodos primeiro e depois registrar rotinas de tratamento de evento - a natureza de thread unica 
de JavaScript, descrita na Sepao 22.4, significa que rotinas de tratamento de evento nunca serao 
chamadas ate que sua funpao tenha retornado e o navegador esteja de volta ao seu la^o de eventos.) 
Os dois primeiros metodos sao os mais importantes e sao abordados aqui. Cada um desses metodos 
de leitura recebe um Blob como primeiro argumento. readAsTextQ recebe um segundo argumento 
optional, especificando o nome de uma codifica?ao de texto. Se voce omitir a codifica^ao, ele vai 
trabalhar automaticamente com texto ASCII e UTF -8 (e tambem texto UTF-16, com uma marca 
de ordem de byte ou BOM - de byte-order mark). 

Quando o FileReader le o Blob especificado, ele atuakza sua propriedade readyState. O valor come- 
9 a em 0, indicando que nada foi lido. Ele muda para 1 quando dados estiverem dispom'veis e para 2 
quando a leitura tiver terminado. A propriedade result content um resultado partial ou completo 
como uma string ou como um ArrayBufFer. Normalmente, voce nao sonda as propriedades state e 
result, mas as utibza a partir de sua retina de tratamento de evento onprogress ou onload. 

O Exemplo 22-11 demonstra como usar o metodo readAsTextQ para ler arquivos de texto locais 
selecionados pelo usuario. 


Exemplo 22-11 Lendo arquivos de texto com FileReader 


// Le 0 arquivo de texto especificado e 0 exibe no elemento <pre> a seguir 
function readfile(f) { 

var reader = new FileReaderQ; // Cria um objeto FileReader 
reader.readAsText(f); // Le 0 arquivo 

reader.onload = functionQ { // Define uma rotina de tratamento de evento 


r text = reader.result; 
var out = document.getElementById("output"); 
out.innerFITML = 

out.appendChild(document.createTextNode(text)); 

} 

reader.onerror = function(e) { 
console.logC'Error”, e); 

}; 


/ Este e 0 conteudo do arquivo 
/ Localiza 0 elemento de saida 

/ Exibe 0 conteudo do arquivo 

/ Se algo der errado 
/ Apenas registra 


} 

</script> 

Select the file to display: 

<input type="file" onchange="readfile(this.files[ 0 ])"x/input> 
<pre id="output"x/pre> 
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O metodo readAsArrayBufferQ e semelhante a readAsText(), exceto que geralmente da um pouco 
mais de trabalho usar o resultado de um ArrayBuffer do que o resultado de uma string. O Exemplo 
22-12 utiliza readAsArrayBufferQ para ler os quatro primeiros bytes de um arquivo como um inteiro 
big-endian. 


/ Le apenas o inicio do arquivo 
/ Cria um FileReader assincrono 
/ Le a fatia do arquivo 


Exemplo 22-12 Lendo os quatro primeiros bytes de um arquivo 
<script> 

// Examina os 4 primeiros bytes do blob especificado. Se ess 
// identifica o tipo do arquivo, configura uma propriedade n 
function typefile(file) { 

var slice = file.slice(0,4); 
var reader = new FileReaderQ; 
reader.readAsArrayBuffer(slice); 
reader.onload = function(e) { 

var buffer = reader.result; // 0 ArrayBuffer resultante 

var view = new DataView(buffer); // Obtem acesso aos bytes resultantes 

var magic = view.getllint32(0, false); // Le 4 bytes, big-endian 

switch(magic) { // Determina o tipo de arquivo a partir deles 

case 0x89504E47: file.verifiedjtype = "image/png"; break; 

case 0x47494638: file.verifiedjtype = "image/gif"; break; 

case 0x25504446: file.verifiedjtype = "application/pdf"; break; 

case 0x504b0304: file.verifiedjtype = "application/zip"; break; 

} 

console.log(file.name, file.verifiedjtype); 


</script> 

<input type="file" onchange="typefile(this.fiies[0])"x/input> 


Nas threads worker voce pode usar FileReaderSync, em vez de FileReader. A API sfncrona define 
os mesmos metodos readAsTextQ e readAsArrayBufferQ que recebem os mesmos argumentos dos 
metodos assincronos. A diferenqa e que os metodos sincronos bloqueiam ate que a operaqao esteja 
concluida e retornam a string resultante ou ArrayBuffer diretamente, sem necessidade de retinas de 
tratamento de evento. O Exemplo 22-14 usa FileReaderSync. 


22.7 A API Filesystem 

Na Seqao 22.6.5, vimos a classe FileReader usada para ler o conteudo de arquivos selecionados pelo 
usuario ou de qualquer Blob. Os tipos File e Blob sao definidos por uma versao preliminar da espe- 
cificaqao conhecida como API File. Outra versao draft de especificaqao, ainda mais recente do que a 
API File, fornece aos aplicativos Web acesso controlado a uma “caixa de areia” do sistema de arquivo 
local privativo, na qual podem gravar arquivos, ler arquivos, criar diretorios, listar diretorios, etc. 
Quando este livro estava sendo escrito, essa API Filesystem era implementada apenas pelo navegador 
Chrome do Google, mas e uma forma local de armazenamento poderosa e importante, de modo que e 
abordada aqui, mesmo sendo essa API ainda menos estavel do que a maioria das outras descritas neste 
capitulo. Esta seqao aborda tarefas basicas de sistema de arquivos, mas nao demonstra todos os recursos 
da API. Como a API e nova e instavel, nao esta documentada na seqao de referenda deste livro. 

Trabalhar com arquivos no sistema de arquivos local e um processo de varias etapas. Primeiramente, 
voce precisa obter um objeto que represente o sistema de arquivos em si. Existe uma API sincrona 
para fazer isso em threads worker e uma API assfncrona para usar na thread principal: 
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// Obtendo um sistema de arquivo de forma sincrona. Passa a vida util e o tamanho do 
// sistema de arquivos. 

// Retorna um objeto sistema de arquivo ou lanca uma excecao. 
var fs = requestFileSystemSync(PERSISTENT, 1024*1024); 


// A versao assincrona usa funcoes callback para sucesso e erro 


requestFileSystem(TEMPORARY, 

50*1024*1024, 
function(fs) { 

// Usa fs aqui 

}, 

function(e) { 
console.log(e); 
»J 


// vida util 
// tamanho: 50 Mb 

// chamada com o objeto filesystem 


// chamada com um objeto de erro onerror 
// Ou a manipula de algum outro modo 



Tanto na versao sincrona como na assmcrona da API, voce especifica a vida util e o tamanho do 
sistema de arquivo desejado. Um sistema de arquivos PERSISTENT e conveniente para aplicativos Web 
que querem armazenar dados do usuario permanentemente. O navegador nao vai exclui-los, a nao 
ser que o usuario solicite isso explicitamente. Um sistema de arquivo TEMPORARY e apropriado para 
aplicativos Web que querem colocar dados na cache, mas ainda podem funcionar caso o navegador 
Web exclua o sistema de arquivos. O tamanho do sistema de arquivo e especificado em bytes e deve 
ter um limite razoavelmente superior ao volume de dados que voce precisa armazenar. Um navega¬ 
dor pode impor isso como uma quota. 


O sistema de arquivos obtido com essas funcoes depende da origem do documento conteiner. Todos 
os documentos ou aplicativos Web de mesma origem (host, porta e protocolo) compartilham um 
sistema de arquivos. Dois documentos ou aplicativos de origens diferentes tern sistemas de arquivos 
completamente distintos e separados. O sistema de arquivo tambem e isolado do restante dos arqui¬ 
vos na unidade de disco rigido do usuario: nao ha como um aplicativo Web “escapar” do diretorio- 
-raiz local ou acessar arquivos arbitrarios de algum modo. 


Note que essas funcoes tern “request” em seus nomes. Na primeira vez que uma delas e chamada, 
o navegador pode solicitar permissao ao usuario, antes de criar um sistema de arquivos e garantir 
acessoT Uma vez concedida a permissao, as chamadas subsequentes ao metodo de requisifao devem 
simplesmente retornar um objeto representando o sistema de arquivos local ja existente. 


O objeto filesystem obtido com um dos metodos anteriores tem uma propriedade root que se re- 
fere ao diretorio-raiz do sistema de arquivo. Trata-se de um objeto DirectoryEntry e ele pode ter 
diretorios aninhados que sao eles proprios representados por objetos DirectoryEntry. Cada dire- 
torio no sistema de arquivos pode conter arquivos representados por objetos FileEntry. O objeto 
DirectoryEntry define metodos para obter objetos DirectoryEntry e FileEntry pelo nome de ca- 
minho (opcionalmente, eles criam novos diretorios ou arquivos, caso voce especifique um nome 
inexistente). DirectoryEntry tambem define um metodo de fabrica createReaderQ que retorna um 
Directory Reader para listar o conteudo de um diretorio. 


A classe FileEntry define um metodo para obter o objeto File (um Blob) representando o conteudo 
de um arquivo. Voce pode entao usar um objeto FileReader (como mostrado na Se^ao 22.6.5) para 
ler o arquivo. FileEntry define outro metodo para retornar um objeto File Writer, que pode ser usado 
para gravar conteudo em um arquivo. 


Quando este livro estava sendo escrito, o Chrome nao solicitava permissao, mas exigia ser lan<;ado com o flag de linha de 
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Ler ou gravar um arquivo com essa API e um processo de varias etapas. Primeiro, voce obtem o 
objeto filesystem. Entao, usa o diretorio-raiz desse objeto para pesquisar (e, opcionalmente, criar) o 
objeto FileEntry para o arquivo em que voce esta interessado. Depois, voce usa o objeto FileEntry 
para obter o objeto File ou File Writer para leitura ou grava^ao. Esse processo de varias etapas e espe- 
cialmente complexo ao se usar a API assincrona: 


// Le o arquivo de texto "hello.txt" e registra seu conteudo. 

// A API assincrona aninha fun^oes a quatro niveis de profundidade. 
// Este exemplo nao inclui qualquer funcao callback de erro. 
requestFileSystem(PERSISTENT, 10*1024*1024, function(fs) { 
fs.root.getFileC'hello.txt", {}, function(entry) { 
entry.file(function(file) { 

var reader = new FileReaderQ; 
reader.readAsText(file); 
reader.onload = functionQ { 


console.log(reader.result); 


// Obtem o sistema de arquivo 
// Obtem FileEntry 
// Obtem File 


// Obtem o conteudo do 
// arquivo 


O Exemplo 22-13 e mais completo. Ele demonstra como usar a API assincrona para ler arquivos, 
gravar arquivos, excluir arquivos, criar diretorios e listar diretorios. 


Exemplo 22-13 Usando a API de sistema de arquivo assincrona 

* Estas fun^oes foram testadas no Google Chrome 10.0 dev. 

* Talvez seja preciso lan^ar o Chrome com as seguintes op^oes: 

* --unlimited-quota-for-files : permite acesso ao sistema de arquivo 

* --allow-file-access-from-files : permite testar URLs file:// 


// Muitas das fun^oes assincronas que usamos aceitam uma funcao callback de erro 
// opcional. 

// Esta apenas registra o erro. 
function logerr(e) { console.log(e); } 


// requestFileSystem() obtem um sistema de arquivo local em caixa de areia, acessivel 
// somente aos aplicativos desta origem. Podemos ler e gravar arquivos a vontade, mas 
// nao podemos sair da caixa de areia para acessar o restante do sistema. 


var filesystem; // Presume que isto e 
// chamadas. 
requestFileSystem(PERSISTENT, 
10*1024*1024, 
function(fs) { 

filesystem = fs; 

}, 

logerr); 


nicializado antes que as fun^oes a seguir sejam 

// Ou TEMPORARY para arquivos em cache 
// Gostariamos de 10 megabytes, por favor 
// Ao terminar, chama esta funcao 
// Apenas salva o sistema de arquivo em 
// uma variavel global. 

// Chama isto, caso ocorra um erro 


// Le o conteudo do arquivo especificado como texto e passa para a funcao callback, 
function readTextFile(path, callback) { 

// Chama getFileQ para encontrar o FileEntry para o nome de arquivo especificado 
filesystem.root.getFile(path, {}, function(entry) { 

// Esta funcao e chamada com o FileEntry do arquivo 
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// Agora chamamos o metodo FileEntry.file() para obtermos o objeto File 


entry.file(function(file) { 

var reader = new FileReaderQ; 
reader.readAsText(file); 
reader.onload = functionQ { 
callback(reader.result); 

} 

reader.onerror = logerr; 

}, logerr); 


} 


/ Chama isto com o File 
// Cria urn FileReader 
// E le o arquivo 

// Ouando a leitura e bem-sucedida 
// Passa para a funcao callback 

// Registra erros de readAsTextQ 

// Registra erros de file() 

// Registra erros de getFileQ 


// Anexa o conteudo especificado 
// um novo arquivo, caso ainda ns 
// ao terminar. 

function appendToFile(path, contents, callback) { 
// filesystem.root e o diretorio-raiz. 


) arquivo, no caminho especificado, criando 
exista nenhum com esse nome. Chama a funqao callback 


filesystem.root.getFile( 

{create:true}, 
function(entry) { 

entry.createWriter( 
function(writer) { 
// Por padrao. 


// Oueremos comeqar a gravar 
writer.seek(writer.length); 


// Obtem um objeto FileEntry 
// 0 nome e o caminho do arquivo desejado 
// Cria-o, caso ainda nao exista 
// Chama isto quando ele for encontrado 
// Cria um objeto FileWriter para o arquivo 
// Chama esta funqao quando criado 
writer comeca no inicio do arquivo. 

final do arquivo 
Move para o final do arqui 


} 


}, 

logerr); 


// Converte o conteudo do arquivo < 
// pode ser uma string, um Blob ou 
var bb = new BlobBuilderQ 
bb.append(contents); 
var blob = bb.getBlobQ; 

// Agora grava o blob no arquivo 
writer.write(blob); 
writer.onerror = logerr; // 

if (callback) // 

writer.onwrite = callback; // 

}, 

logerr); // 


em um Blob. 0 argumento contents 
um ArrayBuffer. 


Registra erros de write() 

Se houver uma funcao callback 
a chama em caso de sucesso 

Registra erros de createWriter() 


// Registra erros de getFileQ 


// Exclui o arquivo nomeado, chamando a funqao callback opcional ao terminar 
function deleteFile(name, callback) { 

filesystem.root.getFile(name, {}, // Obtem FileEntry para o arquivo nomeado 

function(entry) { // Passa o FileEntry aqui 

entry.remove(callback, // Exclui o FileEntry 

logerr); // Ou registra erro de removeQ 

}, 

logerr); // Registra um erro de getFileQ 

} 
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// Cria um novo diretorio com o nome especificado 
function makeDirectory(name, callback) { 
filesystem.root.getDirectory(name, 

{ 

exclusive:true 


// Nome do diretorio a criar 
// Opcoes 

// Cria, caso nao exista 
// Erro se nao existir 


}, 

callback, // Chama isto ao terminar 

logerr); // Registra qualquer erro 


// Le o conteudo do diretorio especificado e o passa como um array 
// de strings para a funcao callback especificada 
function listFiles(path, callback) { 

// Se nenhum diretorio for especificado, lista o diretorio-raiz. Caso contrario, 
// pesquisa o diretorio nomeado e lista-o (ou registra um erro ao pesquisa-lo). 
if (!path) getFiles(filesystem.root); 

else filesystem.root.getDirectory(path, {}, getFiles, logerr); 


function getFiles(dir) { 

var reader = dir.createReaderQ; 
var list = []; 

reader.readEntries(handleEntries, 
logerr); 


// Esta funcao e usada anteriormente 
// Um objeto DirectoryReader 
// Onde armazenamos nomes de arquivo 
// Passa entradas para a funcao a seguir 
// ou registra um erro. 


// Ler diretorios pode ser um processo de varias etapas. Temos de continuar 
// chamando readEntries() ate obtermos um array vazio. Entao, terminamos 
// e podemos passar a lista completa para a funcao callback do usuario. 
function handleEntries(entries) { 

if (entries.length == 0) callback(list); // Terminamos 

else { 

// Caso contrario, adiciona essas entradas na lista e solicita mais 
// 0 objeto semelhante a um array contem objetos FileEntry e 
// precisamos obter o nome de cada um. 
for(var i = 0; i < entries.length; i++) { 

var name = entries[i].name; // Obtem o nome da entrada 

if (entries[i].isDirectory) name += "/"; // Marca diretorios 
list.push(name); // Adiciona na lista 

} 

// Agora obtemos o proximo lote de entradas 
reader.readEntries(handleEntries, logerr); 

} 

} 

} 

} 

Trabalhar com arquivos e com o sistema de arquivo e muito mais facil em threads worker, onde e 
possivel fazer chamadas com bloqueio e onde podemos usar a API smcrona. O Exemplo 22-14 defi¬ 
ne as mesmas fun (joes utilitarias de sistema de arquivo do Exemplo 22-13, mas utiliza a API smcrona 
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Exemplo 22-14 A API sincrona de sistema de arquivos 

// Utilitarios de sistema de arquivos usando a API sincrona em uma thread worker 
var filesystem = requestFileSystemSync(PERSISTENT, 10*1024*1024); 
function readTextFile(name) { 

// Obtem urn File de um FileEntry do DirectoryEntry raiz 
var file = filesystem.root.getFile(name).file(); 

// Usa a API FileReader sincrona para le-lo 
return new FileReaderSyncQ.readAsText(file); 

} 

function appendToFile(name, contents) { 

// Obtem um FileWriter de um FileEntry do DirectoryEntry raiz 

var writer = filesystem.root.getFile(name, {create:true}).createWriterQ; 

writer.seek(writer.length); // Comeca no final do arquivo 

var bb = new BlobBuilderQ // Constroi o conteudo do arquivo em um Blob 

bb.append(contents); 

writer.write(bb.getBlobQ); // Agora grava o blob no arquivo 

} 

function deleteFile(name) { 

filesystem.root.getFile(name).remove(); 

} 

function makeDirectory(name) { 

filesystem.root.getDirectory(name, { create: true, exclusive:true }); 

} 

function listFiles(path) { 

var dir = filesystem.root; 

if (path) dir = dir.getDirectory(path); 

var lister = dir.createReader(); 
var list = []; 
do { 

var entries = lister.readEntries(); 
for(var i = 0; i < entries.length; i++) { 
var name = entries[i].name; 
if (entries[i].isDirectory) name += "/"; 
list.push(name); 

} 

} while(entries.length > 0); 
return list; 

} 

// Permite que a thread principal use esses utilitarios enviando uma mensagem 
onmessage = function(e) { 

// Esperamos que a mensagem seja um objeto como segue: 

// { function: "appendToFile", args: ["test", "testing, testing"]} 

// Chamamos a funqao especificada com os args especificados e 

// postamos a mensagem de volta 

var f = self[e.data.function]; 

var result = f.apply(null, e.data.args); 

postMessage(result); 

}; 
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22.8 Bancos de dados do lado do cliente 

Tradicionalmente, a arquitetura de aplicativo Web contem HTML, CSS e JavaScript no cliente e 
um banco de dados no servidor. Portanto, dentre as APIs mais surpreendentes de HTML5 estao os 
bancos de dados do lado do cliente. Nao sao apenas APIs do lado do cliente para acessar servidores 
de banco de dados pela rede, mas bancos de dados reais do lado do cliente, armazenados no compu- 
tador do usuario e acessados diretamente por codigo JavaScript no navegador. 

A API Web Storage descrita na Se^ao 20.1 pode ser considerada um tipo especialmente simples de 
banco de dados que persiste pares chave/valor simples. Mas, alem disso, existem duas APIs de banco 
de dados do lado do cliente que sao bancos de dados “reais”. Uma delas, conhecida como Web SQL 
Database, e um banco de dados relacional simples que suporta consultas SQL basicas. O Chrome, 
o Safari e o Opera implementaram essa API, mas o Firefox e o IE, nao - e provavelmente nunca vao 
implementar. O trabalho na especificaQo oficial dessa API parou e esse banco de dados SQL com- 
pleto provavelmente nunca vai se tornar um padrao oficial nem extra-oficial, mas uma caracteristica 
interoperavel da plataforma Web. 

Agora os trabalhos de padronizaQo estao concentrados em outra API de banco de dados, conhecida 
como IndexedDB. E cedo demais para documentar essa API em detalhes (ela nao e abordada na 
Parte IV), mas o Firefox 4 e o Chrome 11 incluem implementa^oes e esta secjao contem um exemplo 
funcional que demonstra alguns dos recursos mais importantes da API IndexedDB. 

IndexedDB e um banco de dados de objetos e nao um banco de dados relacional, sendo muito 
mais simples do que os bancos de dados que suportam consultas SQL. Contudo, e mais poderoso, 
eficiente e robusto do que o armazenamento de chave/valor fornecido pela API Web Storage. Assim 
como a API Web Storage e Filesystem, o escopo dos bancos de dados IndexedDB e a origem do do- 
cumento conteiner: duas paginas Web com a mesma origem podem acessar os dados uma da outra, 
mas paginas Web de origens diferentes, nao podem. 

Cada origem pode ter qualquer niimero de bancos de dados IndexedDB. Cada um tern um nome 
que deve ser exclusivo dentro da origem. Na API IndexedDB, um banco de dados e simplesmente 
uma coleQo de object stores nomeados. Conforme o nome indica, um object store armazena objetos 
(ou qualquer valor que possa ser clonado - consulte “Clones estruturados”, na pagina 672). Cada 
objeto deve ter uma chave, por meio da qual pode ser classificado e recuperado do “store”. As chaves 
devem ser exclusivas - dois objetos no mesmo store nao podem ter a mesma chave - e ter uma or- 
dem natural para que possam ser classificadas. Strings JavaScript, numero e objetos Date sao chaves 
validas. Um banco de dados IndexedDB pode gerar automaticamente uma chave exclusiva para cada 
objeto inserido no banco de dados. Frequentemente, contudo, os objetos inseridos em um object 
store ja tern uma propriedade conveniente para uso como chave. Nesse caso, voce especifica um 
“caminho de chave” para essa propriedade, ao criar o object store. Conceitualmente, um caminho de 
chave e um valor que diz ao banco de dados como extrair a chave de um objeto. 

Alem de recuperar objetos de um object store pelo valor de sua chave primaria, talvez voce queira 
pesquisar com base no valor de outras propriedades do objeto. Para fazer isso, voce pode definir 
qualquer quantidade de indices no object store. (A capacidade de indexar um object store explica o 
nome “IndexedDB”.) Cada indice define uma chave secundaria para os objetos armazenados. Esses 
indices geralmente nao sao exclusivos e varios objetos podem corresponder a um unico valor de 
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chave. Assim, ao consultar um object store por meio de um indice, voce geralmente utiliza um cur¬ 
sor, o qual define uma API para recuperar resultados de consulta continuos, um por vez. Os cursores 
tambem podem ser usados ao se consultar um object store (ou mdice) para um intervalo de chaves 
e a API IndexedDB inclui um objeto para descrever intervalos (com limite superior e/ou inferior, 
limites inclusivos ou exclusivos) de chaves. 

A IndexedDB fornece garantia de atomicidade: as consultas e atualiza^oes no banco de dados sao 
agrupadas dentro de uma transagao para que todas sejam bem-sucedidas juntas ou todas falhem 
juntas e nunca deixem o banco de dados em um estado indefinido, parcialmente atualizado. As tran- 
sa^oes na IndexedDB sao mais simples do que em muitas APIs de banco de dados; vamos menciona- 
-las novamente a seguir. 

Conceitualmente, a API IndexedDB e muito simples. Para consultar ou atualizar um banco de da¬ 
dos, voce primeiro abre o banco de dados desejado (especificando-o pelo nome). Em seguida, voce 
cria um objeto transagao e usa esse objeto para pesquisar onde o objeto desejado esta armazenado 
dentro do banco de dados, tambem pelo nome. Por fim, voce pesquisa um objeto chamando o me- 
todo get() objeto armazenado ou armazena um novo objeto chamando put(). (Ou chamando add(), 
se nao quiser sobrescrever objetos ja existentes.) Se quiser pesquisar os objetos de um intervalo de 
chaves, crie um objeto IDBRange e passe-o para o metodo openCursor() no objeto armazenado. Ou 
entao, se quiser fazer uma pesquisa usando uma chave secundaria, pesquise o mdice nomeado do 
objeto armazenado e entao chame o metodo get() ou openCursorQ do objeto indice. 

Contudo, essa simplicidade conceitual e complicada pelo fato de que a API precisa ser assincrona 
para que os aplicativos Web possam utiliza-la sem bloquear a thread da interface com o usuario prin¬ 
cipal do navegador. (A especifica^ao IndexedDB define uma versao sincrona da API para uso com 
threads worker, mas quando este livro estava sendo escrito, nenhum navegador ainda tinha imple- 
mentado essa versao da API, de modo que nao ela nao e abordada aqui.) Criar transa^oes e pesquisar 
objetos armazenados e indices sao operates sincronas faceis. Mas abrir um banco de dados, atua¬ 
lizar um objeto armazenado com put() e consultar um objeto armazenado ou indice com get() ou 
open Cursor() sao todas operates assincronas. Todos esses metodos assincronos retornam o objeto 
requisitado imediatamente. O navegador dispara um evento success ou error no objeto requisitado, 
quando o pedido e bem-sucedido ou falha, sendo que voce pode definir rotinas de tratamento com 
as propriedades onsuccess e onerror. Dentro de uma rotina de tratamento de onsuccess, o resultado 
da opera^ao esta disponivel como a propriedade result do objeto requisitado. 

Uma caracteristica conveniente dessa API assincrona e que ela simplifica o gerenciamento de tran- 
sa^oes. Em um uso tipico da API IndexedDB, primeiro voce abre o banco de dados. Essa e uma 
opera^ao assincrona, de modo que dispara uma rotina de tratamento de onsuccess. Nessa rotina de 
tratamento de evento, voce cria um objeto transagao e entao o utiliza para pesquisar o(s) objeto(s) 
armazenado(s) que vai usar. Em seguida, voce faz qualquer numero de chamadas de get () e put () no 
armazenamentos de objetos. Elas sao assincronas, de modo que nada acontece imediatamente, mas 
os pedidos gerados por essas chamadas de get() e put () sao automaticamente associados ao objeto 
transagao. Caso seja necessario, voce pode cancelar todas as operates pendentes (e desfazer qualquer 
uma que ja tenha terminado) na transagao, chamando o metodo abort() do objeto transagao. Em 
muitas outras APIs de banco de dados, voce esperaria que o objeto transagao tivesse um metodo 
commit() para finalizar a transagao. Contudo, na IndexedDB a transagao e efetivada depois que a 
rotina de tratamento de evento onsuccess original que a criou termina e o navegador retorna ao seu 
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lago de eventos e depois que todas as operagoes pendentes nessa transagao terminam (sem iniciar 
novas operagoes em suas fungoes callback). Isso parece complicado, mas na pratica e simples. A API 
IndexedDB o obriga a criar objetos transagao para pesquisar objetos armazenados, mas nos casos de 
uso comuns, voce nao precisa pensar muito nas transagoes. 

Por fim, existe um tipo especial de transagao que habilita uma parte muito importante da API In¬ 
dexedDB. Criar um novo banco de dados na API IndexedDB e facil: basta escolher um nome e so- 
licitar que esse banco de dados seja aberto. Porem, um banco de dados novo e completamente vazio 
e inutil, a nao ser que voce adicione nele um ou mais objetos armazenados (e possivelmente alguns 
indices tambem). A linica maneira de criar object stores e indices e dentro da rotina de tratamento 
de evento onsuccess do objeto requisitado retornado por uma chamada ao metodo setVersion() do 
objeto banco de dados. Chamar setVersion() permite especificar um numero de versao para o banco 
de dados - na utilizagao tipica, voce atualiza o numero de versao sempre que altera a estrutura do 
banco de dados. Mais importante, contudo, setVersion() inicia implicitamente um tipo especial de 
transagao que permite chamar o metodo createObject Store ( ) do objeto banco de dados e o metodo 
createlndexQ de um objeto armazenado. 

Tendo em mente essa visao geral de alto nivel da IndexedDB, agora voce deve ser capaz de entender o 
Exemplo 22-15. Esse exemplo usa IndexedDB para criar e consultar um banco de dados que mapeia 
codigos postais dos EUA (zipcodes) nas cidades norte-americanas. Ele demonstra muitos (mas nao 
todos) dos recursos basicos da IndexedDB. Quando este livro estava sendo escrito, o exemplo funcio- 
nava no Firefox 4 e no Chrome 11, mas como a especificagao ainda estava em processo de mudanga 
e as implementagoes ainda eram bastante preliminares, ha a possibilidade de que, quando voce ler 
isto, nao funcione exatamente conforme foi escrito. Contudo, a estrutura global do exemplo ainda 
deve ser util. O Exemplo 22-15 e longo, mas tern muitos comentarios que facilitam o entendimento. 

Exemplo 22-15 Um banco de dados IndexedDB de codigos postais dos EUA 
<IDOCTYPE html> 

<title>Zipcode Database</title> 

// As implementagoes de IndexedDB ainda usam prefixos de API 
var indexedDB = window.indexedDB | | // Usa a API DB padrao 

window.mozIndexedDB || // Ou uma versao antiga do Firefox dela 

window.webkitlndexedDB; // Ou uma versao antiga do Chrome 

// 0 Firefox nao prefixa estas duas: 

var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction; 
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange; 

// Vamos usar esta funcao para registrar quaisquer erros de banco de dados que ocorrerem 
function logerr(e) { 

console.log("IndexedDB error" + e.code + " + e.message); 

} 


// Esta fungao obtem o objeto banco de dados de forma assincrona (criando e 
// inicializando o banco de dados, se necessario) e passa-o para a funcao f(). 
function withDB(f) { 

var request = indexedDB.open("zipcodes"); // Solicita o banco de dados de codigos 
// postais 
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request.onerror = logerr; // Registra quaisquer erros 

request.onsuccess = functionQ { // Ou chama isto ao terminar 

var db = request.result; // 0 resultado da requisicao e o banco de dados 


// Voce sempre pode abrir um banco de dados, mesmo que ele nao exista. 

// Conferimos a versao para saber se o BD ja foi criado e 

// inicializado. Se nao foi, precisamos fazer isso. Mas se o bd ja 

// esta configurado, apenas o passamos para a funcao callback f(). 

if (db.version === "l") f(db); // Se o bd esta inicializado, passa-o para f() 

else initdb(dbjf); // Caso contrario, inicializa-o primeiro 

} 

} 


// Dado um codigo postal, descobre a qual cidade ele pertence e, de forma assincrona, 
// passa o nome dessa cidade para a funqao callback especificada. 
function lookupCity(zip, callback) { 
withDB(function(db) { 

// Cria um objeto transacao para essa consulta 

var transaction = db.transaction(["zipcodes"], // Objeto armazenado de que 
// precisamos 

IDBTransaction.READ_0NLY, // Sem atualizaqoes 
0); // Sem tempo-limite 

// Obtem o objeto armazenado a partir da transacao 
var objects = transaction.objectStore("zipcodes"); 



// Agora solicita o objeto correspondente a chave zipcode especificada. 

// As linhas anteriores eram sincronas, mas esta e assincrona 
var request = objects.get(zip); 

request.onerror = logerr; // Registra qualquer erro que ocorra 

request.onsuccess = functionQ { // Passa o resultado para esta funcao 

// 0 objeto resultante agora esta em request.result 
var object = request.result; 

if (object) // Se encontramos uma correspondence, passa a cidade e o estado 
// para a funqao callback 
callback(object.city + ”, " + object.state); 
else // Caso contrario, informa a funcao callback que falhamos 
callback("Unknown zip code”); 

} 

}); 

} 


// Dado o nome de uma cidade, encontra todos os codigos postais de todas as cidades (em 
// qualquer estado) 

// com esse nome (diferencia letras maiusculas e minusculas). Passa os resultados de 
// forma assincrona, um por vez, para a funqao callback especificada 
function lookupZipcodes(city, callback) { 
withDB(function(db) { 

// Como acima, criamos uma transacao e obtemos o objeto armazenado 
var transaction = db.transaction(["zipcodes"], 

IDBTransaction.READ_0NLY, 0); 
var store = transaction.objectStore("zipcodes"); 

// Desta vez, obtemos o indice da cidade do objeto armazenado 
var index = store.index("cities"); 
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// E provavel que esta consulta tenha muitos resultados; portanto, temos de usar 
// um objeto cursor para recuperar todos eles. Para criar um cursor, precisamos 
// de um objeto intervalo que represente o intervalo de chaves 
var range = new IDBKeyRange.only(city); // Um intervalo com uma chave only() 


} 


// Tudo acima foi sincrono. 

// Agora solicitamos um cursor, o qual sera retornado de forma assincrona. 
var request = index.openCursor(range); // Solicita o cursor 
request.onerror = logerr; // Registra erros 

request.onsuccess s function() { // Passa o cursor para esta funqao 

// Esta rotina de tratamento de evento sera chamada varias vezes, uma 
// para cada registro que corresponda a consulta e, entao, mais uma vez 
// com um cursor nulo para indicar que terminamos. 
var cursor = request.result// 0 cursor esta em request.result 
if (!cursor) return; // Nenhum cursor significa que nao existem mais 

// resultados 

var object = cursor.value // Obtem o recurso correspondente 
callback(object); // Passa-o para a funcao callback 

cursor.continueQ; // Solicita o proximo registro coincidente 

}; 

}); 


// Esta funqao e usada por uma funcao callback de onchange no documento a seguir 
// Ela faz uma requisicao de BD e exibe o resultado 
function displayCity(zip) { 

lookupCity(zip, function(s) { document.getElementById('city').value = s; }); 

} 


// Esta e outra funqao callback de onchange, usada no documento a seguir. 
// Ela faz uma requisiqao de BD e exibe os resultados 
function displayZipcodes(city) { 

var output = document.getElementById("zipcodes"); 
output.innerHTML = "Matching zipcodes:"; 
lookupZipcodes(city, function(o) { 

var div = document.createElement("div"); 

var text = o.zipcode + " + o.city + ", " + o.state; 

div.appendChild(document.createTextNode(text)); 

output.appendChild(div); 

}); 


// Configura a estrutura do banco de dados e o preenche com dados; em seguida, passa 
// o banco de dados para a funcao f(). withDBQ chama essa funcao, caso o 
// banco de dados ainda nao esteja inicializado. Esta e a parte mais complicada do 
// programa; portanto, a deixamos por ultimo, 
function initdb(db, f) { 

// Baixar dados de codigo postal e armazena-los no banco de dados pode demorar 
// um pouco na primeira vez que um usuario executar este aplicativo. Assim, 

// precisamos fornecer notificaqao enquanto isso esta acontecendo. 
var statusline = document.createElement("div"); 
statusline.style.cssText = 

"position:fixed; left:0px; top:0px; width:100%;" + 

"color:white; background-color: black; font: bold I8pt sans-serif;" + 
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"padding: lOpx; 

document.body.appendChild(statusline); 

function status(msg) { statusline.innerHTML = msg.toString(); }; 
status("Initializing zipcode database"); 

// A unica vez em que voce pode definir ou alterar a estrutura de urn banco de dados 
// IndexedDB 

// e na rotina de tratamento de onsucess de uma requisicao setVersion. 
var request = db.setVersion("1"); // Tentar atualizar a versao do BD 

request.onerror = status; // Exibe status em caso de falha 

request.onsuccess = functionQ { // Caso contrario, chama esta funcao 

// Nosso banco de dados de codigos postais contem apenas urn objeto armazenado. 

// Ele vai conter objetos como segue: { 

// zipcode: "02134", // envia para Zoom! :-) 

// city: "Allston", 

// state: "MA", 

// latitude: "42.355147", 

// longitude: "-71.13164" 

n } 

// Vamos usar a propriedade "zipcode" como chave de banco de dados 
// E tambem vamos criar urn indice usando o nome da cidade 

// Cria o objeto armazenado, especificando urn nome para ele e 
// urn objeto options que inclui o "caminho da chave", especificando o 
// nome de propriedade do campo de chave desse object store. (Se omitirmos o 
// caminho da chave, IndexedDB vai definir sua propria chave inteira exclusiva.) 
var store = db.createObjectStore("zipcodes", // armazena o nome 
{ keyPath: "zipcode” }); 

// Agora indexa o objeto armazenado pelo nome da cidade e tambem pelo codigo 

// Com esse metodo, a string do caminho da chave e passada diretamente como urn 
// argumento obrigatorio, em vez de como parte de urn objeto options, 
store.createlndex("cities", "city"); 

// Agora precisamos baixar nossos dados de codigo postal, analisa-los em objetos 
// e armazenar esses objetos no object store que criamos anteriormente. 

// Nosso arquivo de dados brutos contem linhas formatadas como segue: 

// 

// 02130,Jamaica Plain,MA,42.309998,-71.11171 

// 02131,Roslindale,MA,42.284678,-71.13052 

// 02132,West Roxbury,MA,42.279432,-71.1598 

// 02133,Boston,MA,42.338947,-70.919635 

// 02134,Allston,MA,42.355147,-71.13164 

// 

// Surpreendentemente, o Serviqo Postal dos EUA nao torna esses dados 
// disponiveis gratuitamente, de modo que utilizamos dados de codigo postal 
// desatualizados de: 

// http://mappinghacks.com/2008/04/28/civicspace-zip-code-database/ 

// Usamos XMLHttpRequest para baixar os dados. Mas use os novos eventos 
// onload e onprogress da XHR2 para processa-los, quando isso chegar 
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var xhr = new XMLHttpRequestQ; 

xhr.open("GET", "zipcodes.csv"); 

xhr.sendQ; 

xhr.onerror = status; 

var lastChar = 0, numlines = 0; 


// Um XHR para baixar os dados 
// HTTP GET para este URL 
// Comeca imediatamente 
// Exibe os codigos de erro 
// Quanto ja processamos? 


// Manipula o arquivo de banco de dados em trechos, a medida que chega 
xhr.onprogress = xhr.onload = function(e) { // Duas rotinas de tratamento em uma! 
// Vamos processar o trecho entre lastChar e a ultima nova linha 
// que tivermos recebido. (Precisamos procurar novas linhas para nao 
// processarmos registros parciais) 
var lastNewline = xhr.responseText.lastIndexOf("\n"); 
if (lastNewline > lastChar) { 

var chunk = xhr.responseText.substring(lastChar, lastNewline) 
lastChar = lastNewline + 1; // Onde comecar na proxima vez 


// Agora decompoe o novo trecho de dados em linhas individuals 
var lines = chunk.split("\n"); 
numlines += lines.length; 

// Para inserir dados de codigo postal no banco de dados, precisamos de um 
// objeto transacao. Todas as inserqoes no banco de dados que fizermos 
// usando esse objeto vao ser efetivadas no banco de dados quando esta 
// funcao retornar e o navegador voltar ao laqo 

// de eventos. Para criar nosso objeto transacao, precisamos especificar 
// quais objetos armazenados vamos usar (temos apenas um) e 
// precisamos dizer a ele que vamos fazer gravacoes no banco de dados 
// e nao apenas leituras: 

var transaction = db.transaction(["zipcodes"], // object store 
IDBTransaction.READ_WRITE); 

// Obtem nosso objeto armazenado a partir da transaqao 
var store = transaction.objectStore("zipcodes"); 


// Agora itera pelas linhas do arquivo de codigos postais, cria 
// objetos para eles e os adiciona no object store. 
for(var i = 0; i < lines.length; i++) { 

var fields = lines[i].split(","); // Valores separados com virgulas 
var record = { // Este e o objeto que vamos armazenar 

zipcode: fields[o], // Todas as propriedades sao strings 

city: fields[l], 
state: fields[ 2 ], 
latitude: fields[3], 
longitude: fields[4] 


// A melhor parte da API IndexedDB e que os objects stores sao 
// *realmente* simples. Aqui esta como adicionamos um registro: 
store.put(record); // Ou entao use add() para nao sobrescrever 

} 

status("Initializing zipcode database: loaded " 

+ numlines + " records."); 

} 
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if (e.type == "load") { 

// Se esse foi o ultimo evento load, entao enviamos todos os nossos 
// dados de codigo postal para o banco de dados. Mas como acabamos de 
// carrega-lo com uns 40.000 registros, ele ainda pode estar 
// processando. 

// Assim, vamos fazer uma consulta simples. Ouando ela for bem-sucedida, 
// saberemos que o banco de dados esta pronto e entao poderemos remover 
// a linha de status e finalmente chamar a funqao f() que foi 
// passada para withDB() a muito tempo atras 
lookupCity("02134", function(s) { // Allston, MA 

document.body.removeChild(statusline); 
withDB(f); 

}); 

} 

} 

} 

} 


<body> 

<p>Enter a zip code to find its city:</p> 

Zipcode: cinput onchange="displayCity(this.value)"x/input> 

City: coutput id="city"x/output> 

</div> 

<div> 

<p>Enter a city name (case sensitive, without state) to find cities and their zipcodesx/ 
P> 

City: <input onchange="displayZipcodes(this.value)"x/input> 

<div id="zipcodes"x/div> 

<pxi>This example is only known to work in Firefox 4 and Chrome ll.</ix/p> 

<pxi>Your first query may take a very long time to complete.</ix/p> 

<pxi>You may need to start Chrome with --unlimited-quota-for-indexeddb</ix/p> 

</html> 


22.9 Web Sockets 

O Capftulo 18 mostrou como codigo JavaScript do lado do cliente pode se comunicar pela rede. 
Todos os exemplos daquele capftulo usavam HTTP, ou seja, todos estavam restritos a natureza fun¬ 
damental do HTTP: e um protocolo sem estado que consiste em requisites do cliente e respostas 
do servidor. HTTP e um protocolo de rede bastante especializado. As conexoes de rede mais gerais 
pela Internet (ou intranets locais) frequentemente sao mais duradouras e envolvem troca bidirecio- 
nal de mensagens em soquetes TCP. Nao e seguro dar acesso a soquetes TCP de baixo nfvel a codigo 
JavaScript do lado do cliente nao confiavel, mas a API WebSocket define uma alternativa segura: 
ela permite que codigo do lado do cliente crie conexoes bidirecionais tipo soquete com servidores 
que suportem o protocolo WebSocket. Isso torna muito mais facil executar certos tipos de tarefas de 
conepio em rede. 
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0 protocolo WebSocket 

Para usar WebSockets em JavaScript, voce so precisa entender a API WebSocket do lado do cliente 
descrita aqui. Nao existe uma API equivalente do lado do servidor para escrever servidores WebSocket, 
mas esta segao inclui um exemplo de servidor simples que utiliza Node (Segao 12.2) junto com uma bi- 
blioteca de servidor WebSocket externa. 0 cliente e o servidor se comunicam por meio de um soquete 
TCP de longa duragao, seguindo regras definidas pelo protocolo WebSocket. Os detalhes do protocolo 
nao sao relevantes aqui, mas e interessante notar que o protocolo WebSocket e cuidadosamente pro- 
jetado para que os servidores Web possam manipular conexoes HTTP e WebSocket facilmente pela 
mesma porta. 

Os WebSockets usufruem de amplo suporte entre os fornecedores de navegador Web. Contudo, foi des- 
coberta uma importante brecha na seguranga de uma antiga versao prelinimar do protocolo WebSocket 
e, quando este livro estava sendo escrito, alguns navegadores tinham desativado seu suporte para Web¬ 
Socket ate que uma versao segura do protocolo fosse padronizada. No Firefox 4, por exemplo, talvez seja 
preciso habilitar os WebSockets explicitamente, visitando a pagina about: conf ig e definindo a variavel de 
configuragao"network.websocket.override-security-block" como true. 


A API WebSocket e muito facil de usar. Primeiro, crie um soquete com a construtora WebSocket (): 
var socket = new WebSocket("ws://ws.example.com:1234/resource"); 

O argumento da construtora WebSocketQ e um URL que utiliza o protocolo ws:// (ou wss:// para 
uma conexao segura, como aquela utilizada por https: //). O URL especifica o host a ser conectado 
e tambem pode especificar uma porta (os WebSockets usam as mesmas portas padrao de HTTP e 
HTTPS) e um caminho ou recurso. 

Uma vez criado um soquete, geralmente voce registra rotinas de tratamento de evento nele: 

socket.onopen = function(e) { /* Agora o soquete esta conectado. */ }; 

socket.onclose = function(e) { /* 0 soquete fechado. *1 }; 

socket.onerror = function(e) { /* Algo deu errado! */ }; 

socket.onmessage = function(e) { 

var message = e.data; /* 0 servidor nos enviou uma mensagem. */ 

}; 

Para enviar dados ao servidor por meio do soquete, voce chama o metodo send() do soquete: 
socket.send(''HellOj server!"); 

A versao atual da API WebSocket suporta apenas mensagens textuais e as envia como strings codifi- 
cadas em UTF-8. Entretanto, o protocolo WebSocket atual inclui suporte para mensagens binarias 
e uma futura versao da API podera permitir que dados binarios sejam trocados com um servidor 
WebSocket. 

Quando seu codigo estiver se comunicando com o servidor, voce pode fechar um WebSocket cha- 
mando seu metodo closeQ. 
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WebSocket e completamente bidirecional e uma vez estabelecida uma conexao de WebSocket, o 
cliente e o servidor podem enviar mensagens um para o outro a qualquer momento, sendo que essa 
comunicapao nao precisa assumir a forma de requisites e respostas. Cada servipo baseado em We¬ 
bSocket vai definir seu proprio “subprotocolo” para transferir dados entre cliente e servidor. Com o 
tempo, esses “subprotocolos” podem evoluir e voce pode acabar com clientes e servidores que preci- 
sam suportar mais de uma versao de um subprotocolo. Felizmente, o protocolo WebSocket contem 
um mecanismo de negotiate para escolher um subprotocolo que tanto o cliente como o servidor 
possam entender. Voce pode passar um array de strings para a construtora WebSocketQ. O servidor 
vai aceita-las como uma lista dos subprotocolos entendidos pelo cliente. Ele vai escolher um para 
usar e vai envia-lo de volta ao cliente. Uma vez estabelecida a conexao, o cliente pode determinar 
qual subprotocolo esta sendo usado, verificando a propriedade protocol do soquete. 

A Sepao 18.3 explicou a API EventSource e a demonstrou com um cliente e servidor de chat online. 
Os WebSockets tornam ainda mais facil escrever esse tipo de aplicativo. O Exemplo 22-16 e um 
cliente de chat muito simples: e muito parecido com o Exemplo 18-15, mas usa um WebSocket para 
comunica^ao bidirecional, em vez de usar um EventSource para receber mensagens e um XMLHt- 
tpRequest para envia-las. 

Exemplo 22-16 Um cliente de chat baseado em WebSocket 
<script> 

window.onload = functionQ { 

// Cuida de alguns detalhes da interface do usuario 

var nick = prompt("Enter your nickname''); // Obtem o apelido do usuario 

var input = document.getElementById("input"); // Localiza o campo de entrada 

input.focusQ; // Configura o foco do teclado 

// Abre um WebSocket para enviar e receber mensagens de bate-papo. 

// Presume que o servidor HTTP de onde baixamos tambem funciona como 
// servidor websocket e usa os mesmos nome de host e porta, mas muda 
//do protocolo http:// para ws:// 

var socket = new WebSocket("ws://" + location.host + "/"); 

// E assim que recebemos mensagens do servidor por meio do soquete web 
socket.onmessage = function(event) { // Ouando chega uma nova mensagem 

var msg = event.data; // Obtem o texto do objeto evento 

var node = document.createTextNode(msg); // 0 transforma em um no de texto 
var div = document.createElement("div"); // Cria um <div> 
div.appendChild(node); // Adiciona no de texto no div 

document.body.insertBefore(div, input); // E adiciona div antes da entrada 
input.scrollIntoView(); // Carante que o elemento de entrada esteja visivel 

} 


// E assim que enviamos mensagens para o servidor por meio do soquete web 
input.onchange = functionQ { // Ouando o usuario pressiona return 

var msg = nick + ": " + input.value; // Nome de usuario mais a entrada do usuario 
socket.send(msg); // Envia por meio do soquete 

input.value = ""; // Apronta-se para mais entrada 

} 

h 

</script> 

<!-- A interface com o usuario de chat e apenas um grande campo de entrada de texto --> 
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<!-- As novas mensagens de chat vao ser inseridas antes desse elemento --> 
cinput id="input" style="width:100%"/> 

O Exemplo 22-17 e um servidor de chat baseado em WebSocket, destinado a ser executado em 
Node (Se^ao 12.2). Compare esse exemplo com o Exemplo 18-17 para ver que os WebSockets sim- 
plificam o lado do servidor do aplicativo de chat e tambem o lado do cliente. 

Exemplo 22-17 Um servidor de chat usando WebSockets e Node 

* Isto e codigo JavaScript do lado do servidor para ser executado com NodeJS. 

* Ele executa um servidor WebSocket em cima de um servidor HTTP, usando uma biblioteca 

* websocket externa do endereco https://github.com/miksago/node-websocket-server/ 

* Se recebe uma requisicao HTTP para "/", retorna o rquivo HTML do cliente de chat. 

* Oualquer outra requisicao HTTP retorna 404. As mensagens recebidas via 

* protocolo WebSocket sao simplesmente transmitidas para todas as conexoes ativas. 

*/ 

var http = require('http'); // Usa a API de servidor HTTP de Node 

var ws = require!'websocket-server'); // Usa uma biblioteca WebSocket externa 

// Le a origem do cliente de chat na inicializaqao. Usado a seguir. 
var clientui = require!’fs’).readFileSync("wschatclient.html"); 

// Cria um servidor HTTP 

var httpserver = new http.Server!); 

// Ouando o servidor HTTP recebe uma nova requisicao, executa esta funcao 
httpserver.on("request", function (request, response) { 

// Se a requisicao foi por "/", envia a interface com o usuario de chat do lado 
// do cliente. 

if (request.url === "/") { // Um pedido para a interface com o usuario de chat 
response.writeHead(200, {"Content-Type": "text/html"}); 
response.write(clientui); 
response.end(); 

} 

else { // Para qualquer outra requisicao, envia um codigo 404 "Not Found" 

response.writeHead(404); 
response.end(); 

} 

}); 


// Agora empacota um servidor WebSocket em torno do servidor HTTP 
var wsserver = ws.createServer({server: httpserver}); 


// Chama esta funcao quando recebemos uma nova 
wsserver.on("connection", function(socket) { 
socket.send("Welcome to the chat room."); 
socket.on("message", function(msg) { 
wsserver.broadcast(msg); 

}); 


requisicao de conexao 

// Cumprimenta o novo cliente 
// Capta msgs do cliente 
// E as transmite para todos 


// Executa o servidor na porta 8000. Iniciar o servidor WebSocket inicia tambem o 
// servidor HTTP. Conecte http://localhost:8000/ para usa-lo. 
wsserver.listen(8000); 
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Referenda de JavaScript basica 


Esta parte do livro e uma referenda que documenta classes, metodos e propriedades definidos pela 
linguagem JavaScript basica. Esta referenda esta organizada em ordem alfabetica por nome de classe 


Arguments EvalError 

Array Function 

Boolean Global 

Date ISON 

Error Math 


Number 

Object 

RangeError 

ReferenceError 

RegExp 


String 

SyntaxError 

TypeError 

URIError 


As paginas de referenda dos metodos e propriedades das classes estao em ordem alfabetica por seus 
nomes completos, os quais incluem os nomes das classes que os definem. Por exemplo, se quisesse 
ler a respeito do metodo replaceQ da classe String, voce procuraria String. replaceQ e nao apenas 
replace. 


JavaScript basica define algumas fun^oes e propriedades globais, como eval() e NaN. Tecnicamente, 
essas sao propriedades do objeto global. Contudo, como o objeto global nao tern nome, elas estao 
listadas nesta se^ao de referenda sob seus proprios nomes nao qualificados. Por conveniencia, o con- 
junto completo de funfoes e propriedades globais de JavaScript basica esta resumido em uma pagina 
de referenda especial chamada “Global” (mesmo nao existindo qualquer objeto ou classe com esse 
nome). 



Esta pagina foi deixada em branco intencionalmente. 
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arguments!] 

um array de argumentos de fungao 

Sinopse 

arguments 

Descri^ao 

O array arguments [] e definido somente dentro do corpo de uma fun^ao. Dentro do corpo de uma 
funpio, arguments se refere ao objeto Arguments da fim^ao. Esse objeto tem propriedades numeradas e 
serve como um array contendo todos os argumentos passados para a funpio. O identificador arguments 
e basicamente uma variavel local declarada e inicializada automaticamente dentro de cada fun^ao. Ele se 
refere a um objeto Arguments somente dentro do corpo de uma funpio e e indefinido em codigo global. 

Consulte tambem 

Arguments; Capfmlo 8 

Arguments 

argumentos e outras propriedades de uma fungao Object Arguments 

Sinopse 

arguments 

argumentsjn] 

Elementos 

O objeto Arguments e definido somente dentro do corpo de uma funpio. Embora nao seja tecnica- 
mente um array, o objeto Arguments tem propriedades numeradas que funcionam como elementos 
de array e uma propriedade length que especifica o niimero de elementos do array. Seus elementos 
sao os valores passados como argumentos para a funpio. O elemento 0 e o primeiro argumento, o 
elemento 1 e o segundo argumento e assim por diante. Todos os valores passados como argumentos 
se tornam elementos de array do objeto Arguments, recebam esses argumentos nomes ou nao na 
declarapio da funpio. 
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Propriedades 

callee 

Uma referenda a funijao que esta sendo executada. 
length 

O numero de argumentos passados para a funQo e o numero de elementos do array no objeto 
Arguments. 

Descri^ao 

Quando uma funQo e chamada, um objeto Arguments e criado para ela e a variavel local arguments 
e inicializada automaticamente para se referir a esse objeto Arguments. O principal objetivo do 
objeto Arguments e fornecer uma maneira de determinar quantos argumentos sao passados para a 
funQo e se referir a argumentos nao nomeados. Contudo, alem dos elementos do array e da proprie- 
dade length, a propriedade callee permite que uma fun910 nao nomeada fa^a referenda a si mesma. 

Para a maioria dos propositos, o objeto Arguments pode ser considerado um array com a adiQo da 
propriedade callee. Contudo, nao se trata de uma instancia de Array e a propriedade Arguments, 
length nao tern nenhum dos comportamentos especiais da propriedade Array. length e nao pode ser 
usada para mudar o tamanho do array. 

No modo nao restrito, o objeto Arguments tern uma caracterfstica muito incomum. Quando uma 
funfao tern argumentos nomeados, os elementos do array do objeto Arguments sao sinonimos das 
variaveis locais que contem os argumentos da funQo. O objeto Arguments e os nomes de argumento 
oferecem duas maneiras diferentes de fazer referenda a mesma variavel. Mudar o valor de um argu¬ 
mento com um nome muda o valor recuperado por meio do objeto Arguments e mudar o valor de 
um argumento por meio do objeto Arguments muda o valor recuperado pelo nome do argumento. 

Consulte tambem 

Function; Capitulo 8 

Arguments.callee nao definido no modo restrito 

a fungao que esta sendo executada 

Sinopse 

arguments.callee 

Descri^ao 

arguments. callee se refere a fun^ao que esta em execuQo. Fornece uma maneira para uma funQo nao 
nomeada se referir a si mesma. Essa propriedade e definida somente dentro do corpo de uma funQo. 


Exemplo 

// Uma funcao literal nao nomeada utiliza a propriedade callee para se referir 
II a si mesma, de modo que possa ser recursiva 
var factorial = function(x) { 
if (x < 2) return 1; 
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else return x * arguments.callee(x-l); 

} 

var y = factorial^); // Retorna 120 


Arguments.length 

o numero de argumentos passados para lima funcao 

Sinopse 

arguments.length 

Descri^ao 

A propriedade length do objeto Arguments especifica o numero de argumentos passados para a fun- 
pio corrente. Essa propriedade e definida somente dentro do corpo de uma funqao. 

Note que essa propriedade especifica o numero de argumentos realmente passados e nao o nu¬ 
mero esperado. Consulte Function. length para ver o numero de argumentos declarados. Note 
tambem que essa propriedade nao tern nenhum comportamento especial da propriedade Array, 
length. 

Exemplo 

// Usa urn objeto Arguments para verificar se o n^ correto de args foi passado 
function check(args) { 

var actual = args.length; // 0 numero real de argumentos 

var expected = args.callee.length; // 0 numero esperado de argumentos 
if (actual != expected) { // Lanca exce^ao, caso nao coincidam 

throw new Error("Wrong number of arguments: expected: ” + 
expected + "; actually passed " + actual); 

} 

} 

// Uma funcao demonstrando como usar a funcao anterior 
function f(x, y, z) { 

check(arguments); // Verifica o numero correto de argumentos 
return x + y + z; // Agora executa o restante da funcao normalmente 

} 

Consulte tambem 

Array.length, Function.length 


Array 

suporte interno para arrays Object -f Array 

Construtora 

new Array() 

new Array (tamanho) 

new Array(elementoO, elementol, elementon) 
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Argumentos 

tamanho 

O numero desejado de elementos no array. O array retornado tem seu campo length configu- 
rado com tamanho. 
elementoO, ... elementon 

Uma lista de argumentos de dois ou mais valores arbitrarios. Quando a construtora Array () 
e chamada com esses argumentos, o array recentemente criado e inicializado com os valores 
de argumento especificados como seus elementos e seu campo length e configurado com o 
numero de argumentos. 

Retorna 

O array recentemente criado e inicializado. Quando Array () e chamada sem argumentos, o array 
retornado e vazio e tem um campo length igual a 0. Quando chamada com apenas um argumento 
numerico, a construtora retorna um array com o numero especificado de elementos indefinidos. 
Quando chamada com qualquer outro argumento, a construtora inicializa o array com os valores 
especificados pelos argumentos. Quando a construtora ArrayQ e chamada como uma fun<;ao, sem o 
operador new, se comporta exatamente como quando chamada com o operador new. 

Lan^a 

RangeError 

Quando apenas um argumento inteiro tamanho e passado para a construtora ArrayQ, uma 
exceQo RangeError e lan^ada, caso tamanho seja negativo ou maior do que 2 32 -l. 

Sintaxe literal 

ECMAScript v3 especifica uma sintaxe literal de array. Voce tambem pode criar e inicializar um 
array colocando entre colchetes uma lista de expressoes separadas por virgulas. Os valores dessas 
expressoes se tornam os elementos do array. Por exemplo: 
var a = [ 1 , true, 'abc']; 
var b = [a[0], a[o]*2, f(x)]j 

Propriedades 

length 

Um inteiro de leitura/gravaqao especificando o numero de elementos no array ou, quando o 
array nao tem elementos adjacentes, um numero uma unidade maior do que o indice do ulti¬ 
mo elemento no array. Alterar o valor dessa propriedade trunca ou estende o array. 

Metodos 

Os metodos everyQ, filterQ, forEachQ, indexOfQ, lastlndexOfQ, map(), reduceQ, reduceRight() 
e some( ) sao novidades de ECMAScript 5, mas foram implementados pelos navegadores (fora o IE) 
antes de ES5 ser padronizada. 
concatQ 

Concatena elementos em um array. 
every() 

Testa se um predicado e verdadeiro para cada elemento do array. 
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filterQ 

Retorna elementos do array que satisfazem uma funpio predicado. 
forEach() 

Chama uma firn^ao para cada elemento do array. 
index0f() 

Pesquisa um array em busca de um elemento coincidente. 

j°in() 

Converte todos os elementos do array em strings e as concatena. 
lastlndexOfQ 

Pesquisa para tras em um array. 

map() 

Calcula novos elementos do array a partir dos seus elementos. 

Pop() 

Remove um item do final de um array. 

P u sh() 

Coloca um item no final de um array. 
reduceQ 

Calcula um valor a partir dos elementos desse array. 
reduceRight() 

Reduz esse array da direita para a esquerda. 
reverse() 

Inverte, no local, a ordem dos elementos de um array. 
shiftQ 

Desloca um elemento do inicio de um array, 

slice() 

Retorna uma fatia (subarray) de um array. 
some() 

Testa se um predicado e verdadeiro para pelo menos um elemento desse array. 
sortQ 

Classifica, no local, os elementos de um array. 
spliceQ 

Insere, exclui ou substitui elementos do array. 
toLocaleString() 

Converte um array em uma string localizada. 
toString() 

Converte um array em uma string. 
unshift() 

Insere elementos no imcio de um array. 
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Describe) 

Os arrays sao um recurso basico de JavaScript e estao documentados em detalhes no Capftulo 7. 

Consulte tambem 

Capftulo 7 


Array.concatO 

concatena arrays 

Sinopse 

array .concat (valor, ...) 

Argumentos 

valor, ... 

Qualquer quantidade de valores a serem concatenados com um array. 

Retorna 

Um novo array, formado pela concatena^ao de cada um dos argumentos especificados em 


Descri^ao 

concat () cria e retorna um novo array que e o resultado da con cate na^ao de cada um de seus ar¬ 
gumentos em array. Ela nao modifica array. Se qualquer um dos argumentos de concat() for ele 
proprio um array, os elementos desse array sao concatenados, em vez do array em si. 


Exemplo 

var a = [1,2,3]; 
a.concat(4, 5) 
a.concat([4,5]); 
a.concat([4,5],[6,7]) 
a.concat(4, [5,[6,7]]) 


// Retorna [1,2,3,4,5] 

// Retorna [1,2,3,4,5] 

// Retorna [1,2,3,4,5,6,7] 

// Retorna [1,2,3,4,5,[6,7]] 


Consulte tambem 

Array.join(), Array.push(), Array.splice() 


Array.everyO ECMAScripts 

testa se um predicado e verdadeiro para cada elemento 

Sinopse 

array .every (predicado) 
array .every (predicado , o) 
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Argumentos 

predicado 

Uma funfao predicado para testar elementos do array 
o 

O valor optional this para chamadas de predicado. 


Retorna 

true se predicate retorna true (ou qualquer valor verdadeiro) para cada elemento de array ou false 
se o predicado retorna false (ou um valor falso) para qualquer elemento. 

Descri^ao 

O metodo every() testa se alguma condi^ao vale para todos os elementos de um array. Ele itera 
pelos elementos de array, em ordem crescente, e chama a fun^ao predicado especificada em cada 
elemento por sua vez. Se predicado retorna false (ou qualquer valor que seja convertido em false), 
entao every() interrompe o la^o e retorna false imediatamente. Se toda chamada de predicado re¬ 
torna true, entao every() retorna true. Quando chamada em um array vazio, every () retorna true. 

Para cada indice do array i, predicado e chamada com tres argumentos: 
predicado(array[i], i, array ) 

O valor de retorno de predicado e interpretado como um valor booleano. true e todos os valores 
verdadeiros indicam que o elemento do array passa no teste ou satisfaz a condi^ao descrita por essa 
fimfao. Um valor de retorno false ou qualquer valor falso significa que o elemento do array nao 
passa no teste. 

Consulte Array.forEach() para ver mais detalhes. 


Exemplo 

[1,2,3].every(function(x) { return x < 5; }) 

[1,2,3].every(function(x) { return x < 3; }) 
[].every(function(x) { return false; }); 


// => verdadeiro: todos os elementos sao 
// < 5 

// => falso: todos os elementos nao sao < 3 
// => verdadeiro: sempre verdadeiro para [] 


Consulte tambem 

Array.filterQ, Array.forEachQ, Array.some() 


Array.filterO ECMAScripts 

retorna elementos de array que passam um predicado 

Sinopse 

array. map (predicado ) 
array.map(predicado, o) 
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Argumentos 

predicado 

A funfao a ser chamada determina se um elemento de anay sera inclufdo no array retornado. 
o 

Um valor opcional no qual predicado e chamada. 

Retorna 

Um novo array contendo somente os elementos de array para os quais predicado retornou true (ou 
um valor verdadeiro). 

Descri^ao 

filter() cria um novo array e entao o preenche com os elementos de array para os quais a fun910 
predicado retorna true (ou um valor verdadeiro). O metodo filter() nao modifica array em si (em- 
bora a funpio predicado possa modificar). 

filter() itera pelos indices de array, em ordem crescente, e chama predicado uma vez para cada 
elemento. Para um indice i, predicado e chamada com tres argumentos, 
predicado(array[i], i, array) 

Se predicado retorna true ou um valor verdadeiro, entao o elemento no indice i de array e anexado 
ao array recentemente criado. Depois de filterQ ter testado cada elemento de array, retorna o novo 
array. 

Consulte Array.forEach() para ver mais detalhes. 

Exemplo 

[1,2,3].filter(function(x) { return x > 1; }); // => [2,3] 

Consulte tambem 

Array.every(), Array.forEachQ, Array.indexOfQ, Array.map(), Array.reduceQ 

Array.forEachO ECMAScripts 

chama uma fun$ao para cada elemento do array 

Sinopse 

array. forEach(/) 
array. forEach(/, 0) 

Argumentos 

f 

A fun^ao a ser chamada para cada elemento de array. 


Um valor opcional no qual / e chamada. 
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Retorna 

Esse metodo nao retorna nada. 

Descri^ao 

forEach() itera i, /e chamada com tres argumentos: 
f(array[i], i, array) 

O valor de retorno de /, se houver, e ignorado. Note que forEachQ nao tem valor de retorno. Em 
especial, nao retorna array. 

Detalhes de metodos de array 

Os detalhes a seguir se aplicam ao metodo forEachQ e tambem aos metodos relacionados map(), 
filterQ, every() e someQ. 

Cada um desses metodos espera uma fun^ao como primeiro argumento e aceita um segundo ar- 
gumento opcional. Se for especiflcado um segundo argumento o, a funpio sera chamada como se 
fosse um metodo de o. Isto e, dentro do corpo da funpio, this sera avaliado como o. Se o segundo 
argumento nao for especiflcado, a funpio sera chamada como funpio mesmo (nao como metodo) e 
this sera o objeto global em codigo nao restrito ou null, em codigo restrito. 

Cada um desses metodos observa o comprimento de array antes de iniciar o lap). Se a funpio cha¬ 
mada anexar novos elementos em array, esses elementos recentemente adicionados nao vao parti- 
cipar no lap). Se a funpio altera elementos ja existentes que ainda nao participaram do lap), serao 
passados os valores alterados. 

Quando chamados em arrays esparsos, esses metodos nao chamam a funpio para indices nos quais 
nao existe nenhum elemento. 

Exemplo 

var a = [1,2,3]; 

a.forEach(function(x,i,a) { a[i]++; }); // a agora e [2,3,4] 

Consulte tambem 

Array.every(), Array.filterQ, Array.indexOfQ, Array.map(), Array.reduceQ 

Array.indexOfO ECMAScripts 

pesquisa um array 

Sinopse 

array .in d exOf (valor) 
array. indexOf (valor, inlcio) 

Argumentos 

valor 


O valor a ser procurado em array. 
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inicio 

Um indice de array optional para iniciar a busca. Se for omitido, e usado 0 . 

Retorna 

O menor mdice >= inicio do array no qual o elemento e === a valor ou - 1 , caso nao exista elemento 
coincidente. 

Descri^ao 

Esse metodo pesquisa array em busca de um elemento que seja igual a valor e retorna o indice do pri- 
meiro elemento encontrado. A busca come^a no indice do array especificado por inicio (ou no indice 
0) e continua com indices sucessivamente mais altos ate que seja encontrada uma coincidencia ou que 
todos os elementos sejam verificados. O operador === e usado para testar igualdade. O valor de retorno e 
o indice do primeiro elemento coincidente encontrado ou -1, caso nao seja encontrada uma coincidencia. 

Exemplo 

['a','b','c ! J.indexOf('b') // => l 

[ 'a','b','c'].index0f('d'| // => -l 

['a','b','c'].indexOf('a',l) // => -l 

Consulte tambem 

Array.lastlndexOf(), String.indexOf() 

Array.joinO 

concatena elementos do array para formar uma string 

Sinopse 

array. joinQ 
array. join (separador) 

Argumentos 

separador 

Um caractere ou string opcional usada para separar um elemento do array do seguinte na 
string retornada. Se esse argumento e omitido, e usada uma virgula. 

Retorna 

A string resultante da conversao de cada elemento de array em uma string, seguida da sua concate- 
na<jao, com a string separador entre os elementos. 

Descri^ao 

join() converte cada elemento de um array em uma string e depois concatena essas strings, inserin- 
do a string separador especificada entre os elementos. Retorna a string resultante. 

A conversao pode ser feita na dire^ao oposta - decompondo uma string nos elementos do array - 
com o metodo splitQ do objeto String. Consulte String.split() paraveros detalhes. 
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Exemplo 

a = new Array(l, 2, 3, "testing"); 
s = a.join("+"); //sea string "1+2+3+testing" 

Consultetambem 

String.split() 


Array.lastlndexOfO 

pesquisa um array para tras 

Sinopse 

array. lastlndexOf (valor) 
array. lastlndexOf (valor, in'icio) 


ECMAScript 5 



Argumentos 

valor 

O valor a ser pesquisado no array, 
inlcio 

Um fndice de array opdonal para iniciar a busca. Se for omitido, a busca vai come^ar no ulti¬ 
mo elemento do array. 


Retorna 

O fndice mais alto <= inlcio de array no qual o elemento e === a valor ou - 1 , caso nao exista um 
elemento coincidente. 

Descri^ao 

Esse metodo pesquisa para tras em elementos sucessivamente menores de array em busca de um 
elemento que seja igual a valor e retorna o fndice do primeiro elemento coincidente que encontra. 
Se inlcio for especificado, sera usado como posi^ao inicial da busca; caso contrario, a busca vai co- 
me^ar no final do array. O === operador e usado para testar igualdade. O valor de retorno e o fndice 
do primeiro elemento coincidente encontrado ou -1, caso nao seja encontrada uma coincidencia. 

Consultetambem 

Array.indexOf(), String.lastlndexOf() 

Array.lenght 

otamanhodeum array 

Sinopse 

array. length 
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Descri^ao 

A propriedade length de um array e sempre uma unidade maior do que o fndice do elemento mais 
alto definido no array. Para arrays “densos” tradicionais, que tern elementos adjacentes e come^am 
com o elemento 0, a propriedade length especifica o numero de elementos no array. 

A propriedade length de um array e inicializada quando o array e criado com o metodo construtor 
ArrayQ. Adicionar novos elementos em um array atualiza a propriedade length, se necessario: 
a = new ArrayQ; // a.length inicializada com 0 

b = new Array(lO); // b.length inicializada com 10 

c = new Array("one", "two", "three"); // c.length inicializada com 3 

c[3] = "four"; // c.length atualizada para 4 

c[ 10] = "blastoff"; // c.length se torna n 

O valor da propriedade length pode ser configurado para mudar o tamanho de um array. Se length 
for configurada com um valor menor do que o anterior, o array sera truncado e os elementos do final 
serao perdidos. Se length for configurada com um valor maior do que o anterior, o array vai se tornar 
maior e os novos elementos adicionados no final do array terao o valor undefined. 

Array.mapO ECMAScripts 

calcula novos elementos do array a partir dos antigos 

Sinopse 

array .map (/) 
array. map(/, o) 

Argumentos 

/ 

A fun^ao a ser chamada para cada elemento de array. Seus valores de retorno se tornam ele¬ 
mentos do array retornado. 
o 

Um valor opcional no qual / e chamada. 

Retorna 

Um novo array com elementos calculados pela funqao /. 

Describe) 

map() cria um novo array com o mesmo comprimento de array e calcula os elementos desse novo 
array passando os elementos de array para a funqao /. mapQ itera pelos indices de array, em ordem 
crescente, e chama / uma vez para cada elemento. Para um fndice i, / e chamada com tres argumen¬ 
tos e seu valor de retorno e armazenado no fndice i do array recentemente criado: 
a[i] =/(array [i], i, array) 

Quando map() tiver passado cada elemento de array para / e armazenado o resultado no novo array, 
retorna esse novo array. 

Consulte Array.forEachQ para ver mais detalhes. 




Referenda de JavaScript basica 715 


Exemplo 

[1,2,3].map(function(x) { return x*x; }); // => [1,4,9] 

Consultetambem 

Array.every(). Array.filter(). Array.forEach(), Array.indexOfQ, Array.reduce() 


Array.popO 

remove e retorna o ultimo elemento de urn array 

Sinopse 

array. pop () 

Retorna 

O ultimo elemento de array. 



Descri^ao 

pop() exclui o ultimo elemento de array, decrementa o comprimento do array e retorna o valor do 
elemento excluido. Se o array ja esta vazio, pop() nao o altera e retorna o valor undefined. 


Exemplo 

pop() e seu metodo acompanhante push() fornecem a funcionalidade de 
Por exemplo: 


var stack = []; 

// 

stack: 

[] 


stack.push(i, 2); 

// 

stack: 

[1,2] 

Retorna 2 

stack.pop(); 

// 

stack: 

[1] 

Retorna 2 

stack.push([4,5]); 

// 

stack: 

[1,[4,5]] 

Retorna 2 

stack.pop() 

II 

stack: 

[1] 

Retorna [4,5] 

stack.pop(); 

II 

stack: 

[] 

Retorna 1 


pilha first-in, last-out. 


Consulte tambem 

Array. pushQ 


Array.pushO 

anexa elementos em urn array 

Sinopse 

array. push (valor, ...) 

Argumentos 

valor, ... 

Um ou mais valores a serem anexados no final de array. 






716 Parte III Referenda de JavaScript basica 


Retorna 

O novo comprimento do array, apos os valores especificados serem anexados nele. 

Descri^ao 

push() anexa seus argumentos, em ordem, no final de array. Modifica array diretamente, em vez de 
criar um novo array. pushQ e seu metodo acompanhante pop() usam arrays parafornecer a funciona- 
lidade de uma pilha first-in, last-out. Consulte Array.pop () para ver um exemplo. 

Consulte tambem 

Array.pop() 

Array.reduceO ECMAScripts 

calcula um valor a partir dos elementos de um array 

Sinopse 

array. reduce(/) 
array. reduce(/, inicial) 

Argumentos 

f 

Uma fiinfao que combina dois valores (como dois elementos do array) e retorna um novo 
valor “reduzido”. 
inicial 

Um valor inicial optional para servir de base para a redu^ao do array. Se esse argumento e 
especificado, reduce () se comporta como se fosse inserido no initio de array. 

Retorna 

O valor reduzido do array, que e o valor de retorno da ultima chamada de /. 

Descri^ao 

O metodo reduce( ) espera uma firnfao / como primeiro argumento. Essa fiinfao deve se comportar 
como um operador binario: ela recebe dois valores, efetua alguma opera^ao com eles e retorna um 
resultado. Se array tern n elementos, o metodo reduce () chama/ n -1 vezes para reduzir esses elemen¬ 
tos a um unico valor combinado. (Talvez voce conhe^a essa opera^ao de redu^ao de array de outras 
linguagens de programa^ao, onde as vezes e chamada de “fold” ou “inject”.) 

A primeira chamada de / recebe os dois primeiros elementos de array. Cada chamada subsequente 
de / recebe o valor de retorno da chamada anterior e o proximo elemento (em ordem crescente) de 
array. O valor de retorno da ultima chamada de / se torna o valor de retorno do metodo reduce () 

reduce() pode ser chamado com um segundo argumento opcional, inicial. Se inicial for especifi¬ 
cado, reduceQ vai se comportar como se esse argumento fosse inserido no initio de array (contudo, 
nao modifica array). Outro modo de dizer isso e que, se reduceQ e chamado com dois argumentos, 
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entao inicial e usado como se fosse retornado anteriormente de /. Nesse caso, a primeira chamada 
de f recebe inicial e o primeiro elemento de anay. Quando inicial e especificado, existem n +1 
elementos para reduzir (n elementos de array, mais o valor inicial) e / e chamada n vezes. 

Se array esta vazio e inicial nao e especificado, reduceQ lan^a um TypeError. Se array esta vazio e 
inicial e especificado, reduce () retorna inicial e nunca chama/. Se array tem apenas um elemento 
e inicial nao e especificado, reduce( ) retorna o unico elemento de array sem chamar /. 

Os paragrafos anteriores descreveram dois argumentos para/, mas na verdade reduce () chama essa 
funfao com quatro argumentos. O terceiro argumento e o rndice de array do segundo argumento. 
O quarto argumento e array em si. / e sempre chamada como uma funijao e nao como um metodo. 

Exemplo 

[1,2,3,4].reduce(function(x,y) { return x*y; }) // => 24: ((l*2)*B)*4 

Consulte tambem 

Array.forEachQ, Array.map(), Array.reduceRight() 

Array.reduceRightO ECMAScripts 

reduz um array da direita para a esquerda 

Sinopse 

array. reduceRight(/) 
array. reduceRight(/, inicial) 

Argumentos 

f 

Uma funijao que combina dois valores (como dois elementos de array) e retorna um novo 
valor “reduzido”. 
inicial 

Um valor inicial opcional para servir de base para a redu^ao do array. Se esse argumento e 
especificado, reduceRightQ se comporta como se fosse inserido no final de array. 


Retorna 

O valor reduzido do array, que e o valor de retorno da ultima chamada de /. 

Descri^ao 

reduceRightQ fiinciona como o metodo reduceQ: chama a fun910 / n-1 vezes para reduzir os n ele¬ 
mentos de array a um unico valor. reduceRightQ difere de reduceQ somente pelo fato de enumerar 
os elementos do array da direita para a esquerda (do rndice mais alto para o mais baixo), em vez de 
da esquerda para a direita. Consulte Array.reduceQ para ver os detalhes. 

Exemplo 

[ 2 , 10, 60].reduceRight(function(x,y) { return x/y }) // => 3: (60/10)72 
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Consulte tambem 

Array. reduceQ 

Array.reverseO 

inverte os elementos de um array 

Sinopse 

anay. reverse () 

Describe) 

O metodo reverse () de um objeto Array inverte a ordem dos elementos de um array. Ele faz isso no 
local: reorganizando os elementos do anay especificado sem criar um novo array. Se existem varias 
referencias para anay, a nova ordem dos elementos do array e visfvel por meio de todas as referencias. 

Exemplo 

a = new Array(l, 2, 3); // a[0] == 1, a[ 2 ] == 3; 
a.reverse!); // Agora a[0] == 3, a[2] == i; 

Array.shiftO 

desloca elementos do array para baixo 

Sinopse 

anay. shift () 

Retorna 

O antigo primeiro elemento do array. 

Descri^ao 

shift() remove e retorna o primeiro elemento de anay, deslocando todos os elementos subsequen- 
tes uma casa para baixo, a fim de ocupar o espa^o vago no infeio do array. Se o array esta vazio, 
shift!) nao faz nada e retorna o valor undefined. Note que shift!) nao cria um novo array; em vez 
disso, modifica anay diretamente. 

shift!) e semelhante a Array. pop(), exceto que opera no irn'cio de um array e nao no final. shift() e 
frequentemente usado em conjunto com unshiftQ. 

Exemplo 

var a = [l, [2,3], 4] 

a.shift!); // Retorna 1; a = [[2,3], 4] 

a.shift!); // Retorna [2,3]; a = [4] 

Consulte tambem 

Array.pop(), Array.unshiftQ 
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Array.sliceO 

retorna parte de um array 


Sinopse 

array. slice(inicio, fim) 


Argumentos 

inicio 

O l'ndice do array no qual a fatia deve come^ar. Se for negativo, esse argumento especifica 
uma posi^ao medida a partir do fim do array. Isto e, -1 indica o ultimo elemento, -2 indica o 
penultimo elemento e assim por diante. 

fim 

O fndice do array imediatamente apos o fim da fatia. Se nao for especificado, a fatia vai incluir 
todos os elementos do array, desde inicio ate o fim dele. Se esse argumento for negativo, vai 
especificar um elemento do array medido a partir do fim do array. 



Retorna 

Um novo array contendo os elementos de array a partir do elemento especificado por inicio, ate 
(mas nao incluindo) o elemento especificado por fim. 


Descri^ao 

sliceQ retorna uma fatia (ou subarray) de array. O array retornado contem o elemento especificado 
por inicio e todos os elementos subsequentes, ate (mas nao incluindo) o elemento especificado por 
fim. Se fim nao for especificado, o array retornado vai corner todos os elementos desde o inicio ate 
o fim de array. 


Note que slice () nao modifica o array. Se quiser remover uma fatia de um array, use Array. 
spliceQ. 


Exemplo 


var a = [1,2,3,4,5]; 
a.slice(0,3); // Retorna [l,2,3] 

a.slice(3); // Retorna [4,5] 

a.slice(l,-l); // Retorna [2,3,4] 

a.slice(-3,-2); // Retorna [3]j errc 


IE 4: retorna [1,2,3] 


Erros 

inicio nao pode ser um niimero negativo no Internet Explorer 4 . Isso foi corrigido nas versoes pos- 
teriores do IE. 

Consulte tambem 

Array. spliceQ 
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Array.someO ECMAScripts 

testa se um predicado e verdadeiro para qualquer elemento 

Sinopse 

array.some(predicado) 
array.some(predicado, o) 

Argumentos 

predicado 

Uma funijao predicado para testar elementos do array 
o 

O valor optional de this para chamadas de predicado. 

Retorna 

true se predicado retorna true (ou um valor verdadeiro) para pelo menos um elemento de array ou 
false, se o predicado retorna false (ou um valor falso) para todo os elementos. 

Descri^ao 

O metodo some() testa se uma condifao vale para pelo menos um elemento de um array. Ele itera 
pelos elementos de array, em ordem crescente, e chama a funijao predicado especificada em cada 
elemento por sua vez. Se predicado retorna true (ou um valor que e convertido em true), some() 
interrompe o la^o e retorna true imediatamente. Se toda chamada de predicado retorna false (ou 
um valor que e convertido em false), some() retorna false. Quando chamado em um array vazio, 
some() retorna false. 

Esse metodo e muito parecido com every (). Consulte Array.every () e Array.forEachQ para ver mais 
detalhes. 

Exemplo 

[1,2,3].some(function(x) { return x > 5; }) 

[1,2,3].some(function(x) { return x > 2; }) 

[],some(function(x) { return true; }); 

Consulte tambem 

Array.every(), Array.filter(), Array .forEachQ 


// => falso: nenhum elemento e > 5 
// => verdadeiro: alguns elementos sao 
// > 3 

// => falso: sempre falso para [] 


Array.sortO 

dassifica os elementos de um array 

Sinopse 

array. sort() 

array.sort(ordemclass) 
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Argumentos 

ordemclass 

Uma funpio opdonal usada para especificar a ordem de dassifica?ao. 

Retorna 

Uma referenda para o array. Note que o array e classificado no local e nenhuma copia e feita. 

Descri^ao 

O metodo sort() classifies os elementos de array no local: nenhuma copia do array e feita. Se sort() 
e chamado sem argumentos, os elementos do array sao organizados em ordem alfabetica (mais pre- 
cisamente, na ordem determinada pela codificapio de caractere). Para fazer isso, primeiramente os 
elementos sao convertidos em strings, se necessario, para que possam ser comparados. 

Se quiser classificar os elementos do array em alguma outra ordem, fornepi uma funpio de com- 
parapio que compare dois valores e retorne um numero indicando sua ordem relativa. A funpio de 
comparapio deve receber dois argumentos, a e fa, e deve retornar uma das op^oes a seguir: 

• Um valor menor do que zero se, de acordo com seus criterios de classificapio, a for menor do 
que fa e deve aparecer antes de b no array classificado. 

• Zero, se o e fa sao equivalentes para os propositos dessa classificapio. 

• Um valor maior do que zero, se a for maior do que fa para os propositos da classificapio. 

Note que elementos indefinidos de um array sao sempre classificados no fim do array. Isso e verdade 
mesmo que voce fornepi uma funpio de ordenapio personalizada: valores indefinidos nunca sao 
passados para o argumento ordemclass fornecido. 

Exemplo 

O codigo a seguir mostra como voce poderia escrever uma funpio de comparapio para classificar um 
array de niimeros em ordem numerica, em vez de alfabetica: 

// Uma funcao de ordenacao para uma classifica^ao numerica 
function numberorder(a, b) { return a - b; } 
a = new Array(33, 4, 1111, 222 ); 

a.sortQ; // Classificacao alfabetica: mi, 222, 33, 4 

a.sort(numberorder); // Classificacao numerica: 4, 33, 222, 1111 

Array.spliceO 

insere, remove ou substitui elementos do array 

Sinopse 

array. splice(inicio, contExcl, valor, ...) 

Argumentos 

inicio 

O elemento do array no qual a inserpio el ou exclusao deve comepir. 
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contExcl 

O numero de elementos, come^ando em (e incluindo) inicio, a serem exclufdos de array. 
Especifique 0 para inserir elementos sem excluir nenhum. 
valor, ... 

Zero ou mais valores a serem inseridos em array, come^ando no mdice especificado por inicio. 

Retorna 

Um array contendo os elementos, se houver, exclufdos de array. 

Descri^ao 

spliceQ exclui zero ou mais elementos do array, come^ando com (e incluindo) o elemento inicio, 
e os substitui por zero ou mais valores especificados na lista de argumentos. Os elementos do array 
que aparecem apos a inser^ao ou exclusao sao movidos, conforme o necessario, para que permane- 
5am adjacentes ao restante do array. Note que, ao contrario do metodo de nome parecido sliceQ, 
splicef) modifica array diretamente. 

Exemplo 

O funcionamento de splice() e mais facilmente entendido por meio de um exemplo: 
var a = [1,2,3,4,5,6,7,8] 

a.splice(l,2); // Retorna [2,3]; a e [1,4] 

a.spliceQ,l); // Retorna [4]; a e [l] 

a.splice(i,0,2,3); // Retorna []; a e [l 2 3] 

Consulte tambem 

Array.slice() 

Array.toLocaleStringO 

converte um array em uma string localizada Anula Object.toLocaleString() 

Sinopse 

array. toLocaleStringQ 

Retorna 

Uma representa^ao de string localizada de array. 

Lan^a 

TypeError 

Se esse metodo e chamado em um objeto que nao e Array. 

Descri^ao 

O metodo toLocaleString( ) de um array retorna uma representa^ao de string localizada de um array. 
Ele faz isso chamando o metodo toLocaleStringQ de todos os elementos do array, concatenando 
entao as strings resultantes, utilizando um caractere separador especffico da localidade. 
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Consulte tambem 

Array. toStringQ, Object.toLocaleString() 

Array.toStringO 

converte um array em uma string Anula Object.toStringO 

Sinopse 

array. toStringQ 

Retorna 

Uma representagao de string de array. 

Langa 

TypeError 

Se esse metodo e chamado em um objeto que nao e Array. 

Descri^ao 

O metodo toString( ) de um array converte-o em uma string e retorna a string. Quando um array e 
usado em um contexto de string, JavaScript o converte automaticamente em uma string, chamando 
esse metodo. Contudo, em algumas ocasioes, talvez voce queira chamar toString( ) explicitamente. 

toString() converte um array em uma string, convertendo primeiramente cada elemento do array 
em strings (chamando seu metodo toStringQ). Quando cada elemento for convertido em uma 
string, toString( ) os apresenta na saida como uma lista separada com virgulas. Esse valor de retorno 
e a mesma string que seria retornada pelo metodo joinQ sem argumentos. 

Consulte tambem 

Array.toLocaleString(), Object.toStringO 

Array. unshift() 

insere elementos no inicio de um array 

Sinopse 

array. unshift(voior, ...) 

Argumentos 

valor, ... 

Um ou mais valores que sao inseridos no inicio de array. 

Retorna 

O novo comprimento do array. 
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Describe) 

unshift () insere seus argumentos no inicio de anay, deslocando os elementos existentes para indices 
mais altos a fim de dar espa<;o. O primeiro argumento de shiftQ se torna o novo elemento 0 do 
array; o segundo argumento, se houver, se torna o novo elemento 1 e assim por diante. Note que 
unshift () nao cria um novo array; ele modifica array diretamente. 

Exemplo 

unshiftQ e frequentemente usado em conjunto com shiftQ. Por exemplo: 


'ar a = []; // i 

n[] 


i.unshiftQ); II ; 

»*[l] 

Retorna: 1 

i.unshift(22); // i 

J: [22,1] 

Retorna: 2 

i.shiftQ; // : 

»*[1] 

Retorna: 22 

i.unshift(33j[4,5]); // ; 

n[33,[4,5]Q] 

Retorna: 3 


Consulte tambem 

Array.shift() 

Boolean 

suporte para valores booleanos Object —» Boolean 

Construtora 

new Boolean(volor) // Fun^ao construtora 
Boolean (valor) II Fun^ao de conversao 

Argumentos 

valor 

O valor a ser mantido pelo objeto Boolean ou a ser convertido em um valor booleano. 

Retorna 

Quando chamado como construtora com o operador new, Boolean () convene seu argumento em um 
valor booleano e retorna um objeto Boolean contendo esse valor. Quando chamado como funQo, 
sem o operador new, Boolean () simplesmente convene seu argumento em um valor booleano primi¬ 
tive e retorna esse valor. 

Os valores 0, NaN, null, a string vazia ”eo valor undefined sao todos convertidos em false. Todos 
os outros valores primitivos, exceto false (mas incluindo a string “false”), e todos os objetos e arrays 
sao convertidos em true. 

Metodos 

toString() 

Retorna “ttue” ou “false”, dependendo do valor booleano representado pelo objeto Boolean. 
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valueOf() 

Retorna o valor booleano primitivo contido no objeto Boolean. 

Descri^ao 

Os valores booleanos sao um tipo de dados fundamental em JavaScript. O objeto Boolean e um 
objeto empacotador em torno do valor booleano. Esse tipo de objeto Boolean existe principalmen- 
te para fornecer um metodo toStringQ para converter valores booleanos em strings. Quando o 
metodo toStringQ e chamado para converter um valor booleano em uma string (e ele e chamado 
implicitamente muitas vezes por JavaScript), JavaScript convene internamente o valor booleano em 
um objeto Boolean transiente no qual o metodo pode ser chamado. 

Consulte tambem 

Object 

Boolean.toStringO 

converte um valor booleano em uma string Anula Object.toStringO 

Sinopse 

b. toStringQ 

Retorna 

A string “true” ou “false”, dependendo do valor do numero booleano primitivo ou do objeto Boo¬ 
lean b. 

Lan^a 

TypeError 

Se esse metodo e chamado em um objeto que nao e Boolean. 

Boolean.valueOfO 

o valor booleano de um objeto Boolean Anula Object.valueOf() 

Sinopse 

b.valueOfQ 

Retorna 

O numero booleano primitivo mantido pelo objeto Boolean b. 

Langa 

TypeError 

Se esse metodo e chamado em um objeto que nao e Boolean. 
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Date 

manipula datas e horas Object —> Date 

Construtora 

new Date() 

new Date(milissegundos) 
new Date(stringdata) 

new DateQno, mes, dia, horas, minutos, segundos, ms) 

Sem argumentos, a construtora DateQ cria um objeto Date configurado com a data e hora atuais. 
Quando e passado um argumento numerico, ele e aceito como a represen ta$ao numerica interna da 
data, em milissegundos, conforme retornado pelo metodo getTimeQ. Quando e passado um argu¬ 
mento de string, e uma representa<;ao de string de uma data, no formato aceito pelo metodo Date. 
parseQ. Caso contrario, a construtora recebe entre dois e sete argumentos numericos especificando 
os campos individuais da data e hora. Todos os argumentos, menos os dois primeiros - os campos de 
ano e mes - sao opcionais. Note que esses campos de data e hora sao especificados usando-se a hora 
local e nao UTC (Coordinated Universal Time) - que e similar a GMT [Greenwich Mean Time]). 
Consulte o metodo estatico Date.UTC() para ver uma alternativa. 

DateQ tambem pode ser chamado como uma funQo, sem o operador new. Quando chamado dessa 
maneira, DateQ ignora qualquer argumento passado a ele e retorna uma representaQo de string da 
data e hora atuais. 

Argumentos 

milissegundos 

O numero de milissegundos entre a data desejada e a meia-noite de 1° de Janeiro de 1970 
(UTC). Por exemplo, passar o argumento 5000 cria uma data que representa cinco segundos 
apos a meia-noite de 1/1/70. 
stringdata 

Um unico argumento especificando a data e, opcionalmente, a hora como uma string. A string 
deve estar em um formato aceito por Date.parseQ. 
ano 

O ano, no formato de quatro digitos. Por exemplo, especifique 2001 para o ano 2001. Por 
compatibilidade com implementa^oes anteriores de JavaScript, se esse argumento estiver entre 
0 e 99, 1900 sera adicionado a ele. 
mes 

O mes, especificado como um inteiro de 0 (janeiro) all (dezembro). 
dia 

O dia do mes, especificado como um inteiro de 1 a 31. Note que esse argumento usa 1 como 
menor valor, enquanto outros argumentos usam 0. Opcional. 

horas 

A hora, especificada como um inteiro de 0 (meia-noite) a 23 (11 p.m.). Opcional. 
minutos 

Os minutos na hora, especificados como um inteiro de 0 a 59. Opcional. 
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segundos 

Os segundos no minuto, especificados como um inteiro de 0 a 59. Opcional. 
ms 

Os milissegundos no segundo, especificados como um inteiro de 0 a 999. Opcional. 

Metodos 

O objeto Date nao tern propriedades que possam ser lidas e gravadas diretamente; em vez disso, 
todo acesso aos valores de data e hora e feito por meio de metodos. A maioria dos metodos do objeto 
Date aparece em duas formas: uma que funciona usando hora local e uma que funciona usando hora 
universal (UTC ou GMT). Se um metodo tern “UTC” em seu nome, ele funciona usando hora 
universal. Esses pares de metodos estao listados juntos a seguir. Por exemplo, a listagem de get [UTC] 
Day() se refere aos metodos getDayQ e getUTCDayQ. 

Os metodos Date so podem ser chamados em objetos Date e lan^am um TypeError se voce tenta 

chama-los em qualquer outro tipo de objeto: 

get[UTC]Date() 

Retorna o dia do mes de um objeto Date, em hora local ou universal, 
get[UTC]Day() 

Retorna o dia da semana de um objeto Date, em hora local ou universal. 
get[UTC]FullYear() 

Retorna o ano da data na forma de quatro digitos completa, em hora local ou universal. 
get[UTC]Hours() 

Retorna o campo de horas de um objeto Date, em hora local ou universal, 
get[UTC]Milliseconds() 

Retorna o campo de milissegundos de um objeto Date, em hora local ou universal. 
get[UTC]Minutes() 

Retorna o campo de minutos de um objeto Date, em hora local ou universal. 
get[UTC]Month() 

Retorna o campo de mes de um objeto Date, em hora local ou universal. 
get[UTC]Seconds() 

Retorna o campo de segundos de um objeto Date, em hora local ou universal. 
getTime() 

Retorna representa^ao de milissegundos interna de um objeto Date. Note que esse valor e 
independente do fuso horario e, portanto, nao existe um metodo getUTCTimeQ separado. 
getTimezoneOffsetQ 

Retorna a diferen^a, em minutos, entre as rep resen taffies local e UTC dessa data. Note que o 
valor retornado depende de o horario de verao estar em vigor na data especificada. 
getYearQ 

Retorna o campo de ano de um objeto Date. Desaprovado em favor de getFullYearQ. 
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set[UTC]Date() 

Configura o campo de dia do mes da data, usando hora local ou universal. 
set[UTC]FullYear() 

Configura o campo de ano (e opcionalmente mes e dia) da data, usando hora local ou universal. 
set[UTC]Hours() 

Configura o campo de hora (e opcionalmente os campos de minutos, segundos e milissegun- 
dos) da data, usando hora local ou universal. 
set[UTC]Milliseconds() 

Configura o campo de milissegundos de uma data, usando hora local ou universal. 
set[UTC]Minutes() 

Configura o campo de minutos (e opcionalmente os campos de segundos e milissegundos) de 
uma data, usando hora local ou universal. 
set[UTC]Month() 

Configura o campo de mes (e opcionalmente o dia do mes) de uma data, usando hora local 
ou universal. 
set[UTC]Seconds() 

Configura o campo de segundos (e opcionalmente o campo de milissegundos) de uma data, 
usando hora local ou universal. 
setTime() 

Configura os campos de um objeto Date usando o formato de milissegundos. 
setYearQ 

Configura o campo de ano de um objeto Date. Desaprovado em favor de setFullYearQ. 
toDateString() 

Retorna uma string representando a parte da data da data, expressa no fuso horario local. 
toGMTString() 

Converte um objeto Date em uma string, usando o fuso horario GMT. Desaprovado em favor 
de toUTCStringQ. 
toISOStringQ 

Converte um objeto Date em uma string, usando o formato de data/hora ISO-8601 combi- 
nado e UTC. 
toJSONQ 

JSON serializa um objeto Date, usando toISOStringQ. 
toLocaleDateStringO 

Retorna uma string representando a parte da data, expressa no fuso horario local, usando as 
convenedes locais de formata^ao de data. 
toLocaleString() 

Converte um objeto Date em uma string, usando o fuso horario local e as convenijoes de for- 
mata?ao locais de data. 
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toLocaleTimeStringO 

Retorna uma string representando a parte da hora da data, expressa no fuso horario local, 
usando as conven^oes de formatafao locais de hora. 
toString() 

Converte um objeto Date em uma string usando o fuso horario local. 
toTimeString() 

Retorna uma string representando a parte da hora da data, expressa no fuso horario local. 
toUTCString() 

Converte um objeto Date em uma string, usando hora universal. 
valueOf() 

Converte um objeto Date em seu formato interno de milissegundos. 

Metodos estaticos 

Alem dos muitos metodos de instancia listados anteriormente, o objeto Date tambem define tres 
metodos estaticos. Esses metodos sao chamados por meio da propria construtora DateQ e nao dos 
objetos Date individuals: 

Date.nowQ 

Retorna a hora atual, como milissegundos desde a epoca. 

Date.parseQ 

Analisa uma represen ta$ao de string de uma data e hora e retorna a represen tapio interna dessa 
data em milissegundos. 

Date.UTCQ 

Retorna a representa^ao da data e hora UTC especificadas em milissegundos. 

Descri^ao 

O objeto Date e um tipo de dados interno da linguagem JavaScript. Os objetos Date sao criados 
com a sintaxe de newDate() mostrada anteriormente. 

Uma vez criado um objeto Date, varios metodos permitem operar nele. A maioria dos metodos 
simplesmente permite obter e configurar os campos de ano, mes, dia, hora, minuto, segundo e milis¬ 
segundos do objeto, usando hora local ou UTC (universal, ou GMT). O metodo toString() e suas 
variantes convertem datas em strings legiveis por seres humanos. getTime() e setTimeQ convertem 
para (e da) representafao interna do objeto Date - o numero de milissegundos desde a meia-noite 
(GMT) de 1° de janeiro de 1970. Nesse formato de milissegundos padrao, a data e a hora sao re- 
presentadas por um unico inteiro, o que torna a aritmetica com datas especialmente facil. O padrao 
ECMAScript exige que o objeto Date possa representar qualquer data e hora, com precisao de mi¬ 
lissegundos, no periodo de 100 milhoes de dias antes ou depois de 1/1/1970. Esse e um intervalo 
de mais ou menos 273.785 anos, de modo que o clock de JavaScript nao vai “estourar a data” ate o 
ano 275755. 
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Exemplos 

Quando um objeto Date e criado, existem varios metodos que podem ser usados para operar nele: 
d = new Date(); // Obtem a data e hora atuais 

document.write('Today is: " + d.toLocaleDateStringQ + ');// Exibe a data 

document.write('The time is: ' + d.toLocaleTimeStringQ); // Exibe a hora 

var dayOfWeek = d.getDay(); // Oual e o dia da semana? 

var weekend = (dayOfWeek == o) || (dayOfWeek == 6); // E um fim de semana? 

Outro uso comum do objeto Date e na subtra^ao das representa?6es de milissegundos da hora atual 
de alguma outra hora para determinar a diferenija entre as duas. O exemplo do lado do cliente a 
seguir mostra dois usos assim: 

<script language="JavaScript"> 

today = new Date(); // Toma nota da data de hoje 

Christmas = new Date(); // Obtem uma data com o ano atual 

Christmas.setMonth(ll); // Configura o mes como dezembro... 

Christmas.setDate(25); // e o dia como o 25 s 

// Se o Natal ainda nao passoUj calcula o numero de 
// milissegundos entre agora e o Natal, converte isso 
// em um numero de dias e imprime uma mensagem 
if (today.getTimeQ < Christmas.getTimeQ) { 

difference = Christmas.getTimeQ - today.getTimeQ; 
difference = Math.floor(difference / (1000 * 60 * 60 * 24)); 
document.write('Only ' + difference + ' days until Christmas!<p>'); 

} 

</script> 

II ... restante do documento HTML aqui ... 
cscript language="JavaScript"> 

// Aqui, usamos objetos Date para cronometragem 

// Dividimos por 1000 para converter milissegundos em segundos 

now = new DateQ; 

document.write('<p>It took ' + 

(now.getTime()-today.getTime())/1000 + 

'seconds to load this page.'); 

</script> 

Consulte tambem 

Date.parse(), Date.UTCQ 


Date.getDateQ 

retorna o campo de dia do mes de um objeto Date 

Sinopse 

data. getDate() 

Retorna 

O dia do mes do objeto Date data especificado, usando hora local. Os valores de retorno estao entre 

1 e31. 
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Date.getPayQ 

retorna o campo de dia da semana de um objeto Date 

Sinopse 

data. getDay() 

Retorna 

O dia da semana do objeto Date data especificado, usando hora local. Os valores de retorno estao 
entre 0 (domingo) e 6 (sabado). 


Date.getFullYearO 

retorna o campo de ano de um objeto Date 

Sinopse 

data. getFullYearQ 

Retorna 

O ano resultante quando data e expresso na hora local. O valor de retorno e um ano completo de 
quatro dfgitos, incluindo o seculo, e nao uma abrevia^ao de dois dfgitos. 


Date.getHoursO 

retorna o campo de horas de um objeto Date 

Sinopse 

data. getHoursQ 

Retorna 

O campo de horas, expresso na hora local, do objeto Date data especificado. Os valores de retorno 
estao entre 0 (meia-noite) e 23 (11 p.m.). 


Date.getMillisecondsO 

retorna o campo de milissegundos de um objeto Date 

Sinopse 

data. getMilliseconds() 

Retorna 

O campo de milissegundos de data, expresso na hora local. 
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Date.getMinutesO 

retorna o campo de minutos de um objeto Date 

Sinopse 

data. getMinutesQ 

Retorna 

O campo de minutos, expresso na hora local, do objeto Date data especificado. Os valores de retor- 
no estao entre 0 e 59. 

Date.getMonthO 

retorna o campo de mes de um objeto Date 

Sinopse 

data. getMonthQ 

Retorna 

O campo de mes, expresso na hora local, do objeto Date data especificado. Os valores de retorno 
estao entre 0 (janeiro) ell (dezembro). 

Date.getSecondsO 

retorna o campo de segundos de um objeto Date 

Sinopse 

data. getSeconds() 

Retorna 

O campo de segundos, expresso na hora local, do objeto Date data especificado. Os valores de retor¬ 
no estao entre 0 e 59. 

Date.getTimeO 

retorna um objeto Date em milissegundos 

Sinopse 

data. getTimeQ 

Retorna 

A represen ta<;ao em milissegundos do objeto Date data especificado - isto e, o numero de milisse¬ 
gundos entre meia-noite (GMT) de 1/1/1970 e a data e hora especificadas por data. 
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Descri^ao 

getTimeQ converte uma data e hora em um unico inteiro. Isso e util quando se quer comparar 
dois objetos Date ou determinar o tempo decorrido entre duas datas. Note que a representa^ao 
em milissegundos de uma data e independente do fuso horario, de modo que nao ha um metodo 
getUTCTime() alem desse. Nao confunda esse metodo getTime() com os metodos getDay() e getDa- 
te(), que retornam o dia da semana e o dia do mes, respectivamente. 

Date.parse() e Date.UTC() permitem converter uma especifica^ao de data e hora em uma represen- 
ta?ao em milissegundos sem a sobrecarga de primeiro criar um objeto Date. 

Consultetambem 

Date, Date.parseQ, Date.setTime(), Date.UTC() 


Date.getTimezoneOffsetO 

determina o deslocamento em relagao a GMT 

Sinopse 

data .getTimezoneOffset() 

Retorna 

A diferen^a, em minutos, entre a hora GMT e a local. 

Descri^ao 

getTimezoneOffset() retorna a diferen^a no niimero de minutos entre a hora GMT ou UTC e a hora 
local. Na verdade, essa fun^ao informa em qual fuso horario o codigo JavaScript esta sendo executa- 
do e se o horario de verao esta (ou estaria) em vigor ou nao na data especificada. 

O valor de retorno e medido em minutos, em vez de horas, pois alguns pafses tern fusos horarios em 
intervalos que nao sao de hora cheia. 


Date.getUTCDateO 

retorna o campo de dia do mes de um objeto Date (hora universal) 

Sinopse 

data. getUTCDateQ 

Retorna 

O dia do mes (um valor entre 1 e 31) resultante quando data e expressa na hora universal. 
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Date.getUTCDayQ 

retorna o campo de dia da semana de um objeto Date (hora universal) 

Sinopse 

data.getUTCDay() 

Retorna 

O dia da semana resultante quando data e expressa em hora universal. Os valores de retorno estao 
entre 0 (domingo) e 6 (sabado). 

Date.getUTCFullYearQ 

retorna o campo de ano de um objeto Date (hora universal) 

Sinopse 

data. getUTCFullYear() 

Retorna 

O ano resultante quando data e expressa em hora universal. O valor de retorno e um ano completo 
de quatro dfgitos e nao uma abrevia^ao de dois digitos. 

Date.getUTCHoursQ 

retorna o campo de horas de um objeto Date (hora universal) 

Sinopse 

data. getUTCHoursQ 

Retorna 

O campo de horas de data, expresso em hora universal. O valor de retorno e um inteiro entre 0 
(meia-noite) e 23 (11 p.m.). 


Date.getUTCMillisecondsO 

retorna o campo de milissegundos de um objeto Date (hora universal) 

Sinopse 

data. getUTCMilliseconds() 

Retorna 

O campo de milissegundos de data, expresso em hora universal. 
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Date.getUTCMinutesQ 

retorna o campo de minutos de um objeto Date (hora universal) 

Sinopse 

data. getUTCMinutes() 

Retorna 

O campo de minutos de data, expresso em hora universal. O valor de retorno e um inteiro entre 0 
e 59. 

Date.getUTCMonthO 

retorna o campo de mes do ano de um objeto Date (hora universal) 

Sinopse 

data. getUTCMonth() 

Retorna 

O mes do ano resultante quando data e expressa em hora universal. O valor de retorno e um inteiro 
entre 0 (Janeiro) ell (dezembro). Note que o objeto Date representa o primeiro dia do mes como 
1, mas representa o primeiro mes do ano como 0. 

Date.getUTCSecondsQ 

retorna o campo de segundos de um objeto Date (hora universal) 

Sinopse 

data. getUTCSecondsQ 

Retorna 

O campo de segundos de data, expresso em hora universal. O valor de retorno e um inteiro entre 0 
e 59. 


Date.getYearO desaprovado 

retorna o campo de ano de um objeto Date 

Sinopse 

data. getYearQ 

Retorna 

O campo de ano do objeto Date data especificado, menos 1900. 
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Descri^ao 


getYearQ retorna o campo de ano de um objeto Date especificado, menos 1900. Conforme EC- 
MAScript v3, nao e obrigatorio a estar de acordo com as implementa^oes de JavaScript; em vez 
disso, use getFullYearQ. 

Date.nowO 

ECMAScript 5 

retorna a hora atual, em milissegundos 


Sinopse 


Date.now() 


Retorna 


A hora atual, em milissegundos, a partir de meia-noit 

:e GMT de 1° de Janeiro de 1970. 

Descri^ao 

Antes de ECMAScript 5, voce podia implementar ess 

>e metodo como segue: 

Date.now = functionQ { return (new Date()).getTimeQ; } 

Consulte tambem 


Date, Date.getTimeQ 


Date.parseO 



analisa uma string de data/hora 


Sinopse 

Date.parse(data) 

Argumentos 

data 

Uma string contendo a data e hora a serem analisadas. 

Retorna 

O niimero de milissegundos entre a data e hora especificadas e a meia-noite GMT de 1° de Janeiro 
de 1970. 

Descri^ao 

Date.parse () e um metodo estatico de Date. Ele analisa a data especificada por seu argumento de 
string e a retorna como o niimero de milissegundos desde a epoca. Esse valor de retorno pode ser 
usado diretamente, usado para criar um novo objeto Date ou usado para configurar a data em um 
objeto Date ja existente com Date.setTime(). 
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ECMAScript 5 exige que esse metodo seja capaz de analisar strings retornadas pelo metodo Date. 
toISOStringQ. Em ECMAScript 5 e anteriores, esse metodo tambem e obrigado a analisar as strings 
dependentes da implementa^ao retornadas pelos metodos toUTCString() e toString(). 

Consulte tambem 

Date, Date.setTimeQ, Date.toISOString(), Date.toStringQ 

Date.setDateO 

configura o campo de dia do mes de um objeto Date 

Sinopse 

data. setDat e(dia_do_mes) 

Argumentos 

dia_do_mes 

Um inteiro entre 1 e 31 que e utilizado como o novo valor (na hora local) do campo de dia 
do mes de data. 

Retorna 

A representa?ao, em milissegundos, da data ajustada. Antes da padroniza^ao ECMAScript, esse 
metodo nao retornava nada. 

Date.setFullYearO 

configura o campo de ano e, opcionalmente, os campos de mes e data de um objeto Date 

Sinopse 

data. setFullYear (ano) 
data. setFullYear(ano, mes) 
data. setFullYear (ano, mes, dia) 

Argumentos 

ano 

O ano a ser configurado em data, expresso na hora local. Esse argumento deve ser um inteiro 
que inclua o seculo, como 1999; nao deve ser uma abrevia^ao, como 99. 
mes 

Um inteiro opcional entre 0 e 11, usado como o novo valor (na hora local) do campo de mes 
de data, 
dia 

Um inteiro opcional entre 1 e 31, usado como o novo valor (na hora local) do campo de dia 
do mes de data. 
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Retorna 

A representagio interna, em milissegundos, da data ajustada. 

Date.setHours() 

configura os campos de horas, minutos, segundos e milissegundos de urn objeto Date 

Sinopse 

data .setHours( horas ) 
data.setHours (horas, minutos ) 
data.setHours(/ioraSj minutos, segundos) 
data.setHours(/ioras, minutos, segundos, miliss) 

Argumentos 

horas 

Urn inteiro entre 0 (meia-noite) e 23 (11 p.m.), hora local, que e configurado como o novo 
valor de horas de data, 
minutos 

Um inteiro opcional, entre 0 e 59, usado como o novo valor (na hora local) do campo de mi¬ 
nutos de data. Esse argumento nao era suportado antes da padroniza^ao ECMAScript. 
segundos 

Um inteiro opcional, entre 0 e 59, usado como o novo valor (na hora local) do campo de 
segundos de data. Esse argumento nao era suportado antes da padroniza^ao ECMAScript. 
miliss 

Um inteiro opcional, entre 0 e 999, usado como o novo valor (na hora local) do campo de mi¬ 
lissegundos de data. Esse argumento nao era suportado antes da padroniza^ao ECMAScript. 

Retorna 

A representa^ao, em milissegundos, da data ajustada. Antes da padroniza^ao ECMAScript, esse 
metodo nao retornava nada. 

Date.setMillisecondsO 

configura o campo de milissegundos de um objeto Date 

Sinopse 

data.setMilliseconds(miliss) 

Argumentos 

miliss 

O campo milissegundos a ser configurado em data, expresso na hora local. Esse argumento 
deve ser um inteiro entre 0 e 999. 
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Retorna 

A representa^ao, em milissegundos, da data ajustada. 

Date.setMinutesO 

configure os campos de minutos, segundos e milissegundos de um objeto Date 

Sinopse 

data. setMinutes ( minutos ) 

data. setMinutes (minutos, segundos ) 

data.setMinutes(mimftos, segundos, miliss) 

Argumentos 

minutos 

Um inteiro entre 0 e 59 configurado como o valor em minutos (na hora local) do objeto Date 
data, 
segundos 

Um inteiro opcional, entre 0 e 59, usado como o novo valor (na hora local) do campo de 
segundos de data. Esse argumento nao era suportado antes da padroniza^ao ECMAScript. 
miliss 

Um inteiro opcional, entre 0 e 999, usado como o novo valor (na hora local) do campo de mi¬ 
lissegundos de data. Esse argumento nao era suportado antes da padroniza^ao ECMAScript. 

Retorna 

A representa^ao, em milissegundos, da data ajustada. Antes da padroniza^ao ECMAScript, esse 
metodo nao retornava nada. 

Date.setMonthO 

configura os campos de mes e dia de um objeto Date 

Sinopse 

data. setMonth(mes) 
data.setMonth(mes, dia) 

Argumentos 

mes 

Um inteiro entre 0 (janeiro) ell (dezembro) configurado como o valor do mes (na hora local) 
do objeto Date data. Note que os meses sao numerados a partir de 0, enquanto os dias dentro 
do mes sao numerados a partir de 1. 
dia 

Um inteiro opcional entre 1 e 31 usado como o novo valor (na hora local) do campo de dia do 
mes de data. Esse argumento nao era suportado antes da padroniza^ao ECMAScript. 
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Retorna 

A representa^ao, em milissegundos, da data ajustada. Antes da padroniza^ao ECMAScript, esse 
metodo nao retornava nada. 

Date.setSecondsO 

configura os campos de segundos e milissegundos de urn objeto Date 

Sinopse 

data.setSeconds(segundos) 
data.setSeconds(segundos, miliss) 

Argumentos 

segundos 

Um inteiro entre 0 e 59 configurado como o valor dos segundos do objeto Date data, 
miliss 

Um inteiro opcional, entre 0 e 999, usado como o novo valor (na hora local) do campo de mi¬ 
lissegundos de data. Esse argumento nao era suportado antes da padroniza^ao ECMAScript. 

Retorna 

A representa^ao, em milissegundos, da data ajustada. Antes da padroniza^ao ECMAScript, esse 
metodo nao retornava nada. 

Date.setTimeO 

configura um objeto Date em milissegundos 

Sinopse 

data .setTime( milissegundos) 

Argumentos 

milissegundos 

O numero de milissegundos entre a data e hora desejadas e a meia-noite GMT de 1° de janei- 
ro de 1970. Um valor em milissegundos desse tipo tambem pode ser passado para a constru- 
tora Date () e pode ser obtido chamando-se os metodos Date . UTC () e Date. parse (). Representar 
uma data nesse formato de milissegundos a torna independente do fuso horario. 


Retorna 

O argumento milissegundos. Antes da padroniza^ao ECMAScript, esse metodo nao retornava nada. 


Date.setUTCDateQ 


configura o campo de dia do mes de um objeto Date (hora universal) 
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Sinopse 

data . setUTCDate(dio_do_mes) 

Argumentos 

dia_dojnes 

O dia do mes a ser configurado em data, expresso em hora universal. Esse argumento deve ser 
um inteiro entre 1 e 31. 


Retorna 

A representafao em milissegundos interna da data ajustada. 

Date.setUTCFullYearQ 

configura os campos de ano, mes e dia de um objeto Date (hora universal) 

Sinopse 

data . setUTCFullYear (ano) 

data . setSeconds (segundos, miliss) 

data. setUTCFullYear(ono ) mes, dia ) 

Argumentos 

ano 

O ano, expresso em hora universal, a ser configurado em data. Esse argumento deve ser um 
inteiro que inclua o seculo, como 1999, e nao uma abrevia^ao, como 99. 
mes 

Um inteiro opcional entre 0 e 11 usado como o novo valor (em hora universal) do campo de 
mes de data. Note que os meses sao numerados a partir de 0, enquanto os dias dentro do mes 
sao numerados a partir de 1. 
dia 

Um inteiro opcional entre 1 e 31 usado como o novo valor (em hora universal) do campo de 
dia do mes de data. 

Retorna 

A representafao interna da data ajustada em milissegundos. 


Date.setUTCHoursQ 

configura os campos de horas, minutos, segundos e milissegundos de um objeto Date (hora universal) 

Sinopse 

data . setUTCHours (hoias) 

data. setUTCFIours(/iorfls, minutos ) 

data. setUTCHours(lioros ) minutos, segundos) 

data. setUTCHours(lioros ) minutos, segundos, miliss) 
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Argumentos 

hoi as 

O campo a ser configurado em data, expresso em hora universal. Esse argumento deve ser um 
inteiro entre 0 (meia-noite) e 23 (11 p.m.). 
minutos 

Um inteiro opcional, entre 0 e 59, usado como o novo valor (em hora universal) do campo de 
minutos de data, 
segundos 

Um inteiro opcional, entre 0 e 59, usado como o novo valor (em hora universal) do campo de 
segundos de data, 
miliss 

Um inteiro opcional, entre 0 e 999, usado como o novo valor (em hora universal) do campo 
de milissegundos de data. 

Retorna 

A representa^ao, em milissegundos, da data ajustada. 

Date.setUTCMillisecondsO 

configura o campo de milissegundos de um objeto Date (hora universal) 

Sinopse 

data. setUTCMilliseconds (miliss) 

Argumentos 

miliss 

O campo de milissegundos a ser configurado em data, expresso em hora universal. Esse argu¬ 
mento deve ser um inteiro entre 0 e 999. 

Retorna 

A represen ta^ao, em milissegundos, da data ajustada. 

Date.setUTCMinutesO 

configura os campos de minutos, segundos e milissegundos de um objeto Date (hora universal) 

Sinopse 

data. setUTCMinutes (minutos) 

data. setUTCMinutes (minutos, segundos ) 

doto.setUTCMinutes(minutos, segundos, miliss) 
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Argumentos 

minutos 

O campo de minutos a ser configurado em data, expresso em hora universal. Esse argumento 
deve ser um inteiro entre 0 e 59. 


segundos 

Um inteiro opdonal entre 0 e 59 usado como o novo valor (em hora universal) do campo de 
segundos de data, 
miliss 

Um inteiro optional entre 0 e 999 usado como o novo valor (em hora universal) do campo de 
milissegundos de data. 


Retorna 

A representa^ao, em milissegundos, da data ajustada. 



Date.setUTCMonthQ 

configura os campos de mes e dia de um objeto Date (hora universal) 

Sinopse 

data.setUTCMonth(mes) 
data. setUTCMonth(mes, dia) 

Argumentos 

mes 

O mes a ser configurado em data, expresso em hora universal. Esse argumento deve ser um 
inteiro entre 0 (janeiro) ell (dezembro). Note que os meses sao numerados a partir de 0, 
enquanto os dias dentro do mes sao numerados a partir de 1. 
dia 

Um inteiro opcional entre 1 e 31 usado como o novo valor (em hora universal) do campo de 
dia do mes de data. 

Retorna 

A representa^ao, em milissegundos, da data ajustada. 

Date.setUTCSecondsO 

configura os campos de segundos e milissegundos de um objeto Date (hora universal) 

Sinopse 

data. setUTCSeconds (segundos ) 
data. setUTCSeconds (segundos, miliss) 
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Argumentos 

segundos 

O campo de segundos a ser configurado em data, expresso em hora universal. Esse argumento 
deve ser um inteiro entre 0 e 59. 
miliss 

Um inteiro opcional entre 0 e 999 usado como o novo valor (em hora universal) do campo de 
milissegundos de data. 

Retorna 

A representa^ao, em milissegundos, da data ajustada. 


Date.SetYearO desaprovado 

configura o campo de ano de um objeto Date 

Sinopse 

data. setYear(nno) 

Argumentos 

ano 

Um inteiro configurado como o valor do ano (na hora local) para o objeto Date data. Se esse 
valor esta entre 0 e 99, inclusive, 1900 e somado a ele e e tratado como um ano entre 1900 e 
1999. 

Retorna 

A representa?ao, em milissegundos, da data ajustada. Antes da padroniza^ao ECMAScript, esse 
metodo nao retornava nada. 

Describe) 

setYearQ configura o campo de ano de um objeto Date especificado, com comportamento especial 
para anos entre 1900 e 1999. 

Conforme ECMAScript v3, essa fun^ao nao e mais obrigada a estar de acordo com as implementa- 
foes de JavaScript; em vez disso, use setFullYearQ. 


Date.toDateStringQ 

retorna como string a parte da data de um objeto Date 

Sinopse 

data. toDateString() 
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Retorna 

Uma representagao de string dependente da implementagao e legfvel para seres humanos da parte da 
data de data, expressa no fuso horario local. 

Consulte tambem 

Date.toString() 

Date.toTimeString() 


Date.toGMTStringO 

converte um objeto Date em uma string de hora universal 

Sinopse 

data.toGMTStringQ 


desaprovado 



Retorna 

Uma representagao de string da data e hora especificadas pelo objeto Date data. A data e convertida 
do fuso horario local para o fuso horario GMT, antes de ser convertida em uma string. 


Descri^ao 

toGMTString() foi desaprovado em favor do metodo identico Date.toUTCString(). 

Conforme ECMAScript v3, as implementagoes de JavaScript compativeis nao sao mais obrigadas 
fornecer esse metodo; em vez disso, use toUTCStringQ. 


Consulte tambem 

Date. toUTCStringQ 


Date.tolSOStringO ECMAScript 5 

converte um objeto Date em uma string formatada em IS08601 

Sinopse 

data. toISOString() 

Retorna 

Uma representagao de string de data, formatada de acordo com o padrao ISO-8601 e expressa como 
uma data e hora combinada com precisao integral em UTC com um fuso horario “Z”. A string 
retornada tern o seguinte formato: 
aaaa-mm-ddThh:mm:ss.sssZ 

Consulte tambem 

Date.parseQ, Date.toStringQ 
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Date.toJSON ECMAScript 5 

urn objeto Date serializado com JSON 

Sinopse 

data .toJSON(c/iave) 

Argumentos 

chave 

JSON. stringifyQ passa esse argumento, mas o metodo to JSON Q o ignora. 

Retorna 

Uma representa^ao de string da data, obtida pela chamada de seu metodo toISOStringQ. 

Descri^ao 

Esse metodo e usado por JSON.stringifyQ para converter um objeto Date em uma string. Nao se 
destina a uso geral. 

Consulte tambem 

Date.toISOString(), JSON.stringify() 

Date.toLocaleDateStringO 

retorna a parte da data de um objeto Date como uma string formatada de modo local 

Sinopse 

data. toLocaleDateStringQ 

Retorna 

Uma represen ta^ao de string dependente da implementa^ao e legivel para seres humanos da parte da 
data de data, expressa no fuso horario local e formatada de acordo com as conveneses locais. 

Consulte tambem 

Date.toDateString(), Date.toLocaleString(), Date.toLocaleTimeString(), Date. 
toString(), Date.toTimeStringQ 

Date.toLocaleStringO 

converte um objeto Date em uma string formatada de modo local 

Sinopse 

data. toLocaleStringQ 
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Retorna 

Uma representapio de string da data e hora especificadas por data. A data e hora sao representadas 
no fuso horario local e formatadas usando-se convenijoes apropriadas para o local. 

Utiliza^ao 

toLocaleString() converte uma data em uma string, usando o fuso horario local. Esse metodo tam¬ 
bem usa conven^oes locais para formataijao de data e hora, de modo que o formato pode variar de 
uma plataforma para outra e de um pais para outro. toLocaleString( ) retorna uma string formatada 
no que provavelmente e o formato de data e hora preferidos do usuario. 

Consulte tambem 

Date.toISOString(), Date.toLocaleDateString(), Date.toLocaleTimeString(), Date. 
toString(), Date.toUTCString() 

Date.toLocaleTimeStringO 

retorna a parte da hora de um objeto Date como uma string formatada de modo local 

Sinopse 

data. toLocaleTimeString() 

Retorna 

Uma representa^ao de string dependente da implementa?ao e legivel para seres humanos da parte da 
hora de data, expressa no fuso horario local e formatada de acordo com as convenijoes locais. 

Consulte tambem 

Date.toDateString(), Date.toLocaleDateStringQ, Date.toLocaleStringQ, Date.toStringQ, 
Date.toTimeStringf) 

Date.toStringQ 

converte um objeto Date em uma string Anula 0bject.toString() 

Sinopse 

data. toString() 

Retorna 

Uma representa?ao de string legivel para seres humanos de data, expressa no fuso horario local. 

Descri^ao 

toString() retorna uma representa^ao de string dependente da implementa^ao e legivel para seres 
humanos de data. Ao contrario de toUTCString(), toStringQ expressa a data no fuso horario local. 
Ao contrario de toLocaleStringQ, toString( ) pode nao representar a data e hora usando formata^ao 
especifica da localidade. 






748 Parte III Referenda de JavaScript basica 


Consulte tambem 

Date.parse() 

Date.toDateString() 

Date.toISOStringQ 

Date.toLocaleString() 

Date.toTimeString() 

Date.toUTCStringO 


Date.toTimeStringO 

retorna como uma string a parte da hora de um objeto Date 

Sinopse 

data .toTimeString() 

Retorna 

A representa?ao de string dependente da implementa^ao e legivel para seres humanos da parte da 
hora de data, expressa no fuso horario local. 

Consulte tambem 

Date.toString(), Date.toDateString(), Date.toLocaleTimeString() 


Date.toUTCStringQ 

converte um objeto Date em uma string (hora universal) 

Sinopse 

data. toUTCStringO 

Retorna 

Uma representa^ao de string de data legivel para seres humanos, expressa em hora universal. 

Descri^ao 

toUTCStringO retorna uma string dependente da implementa?ao representando data em hora uni¬ 
versal. 

Consulte tambem 

Date.toISOString(), Date.toLocaleString(), Date.toStringO 


Date.UTCQ 


converte uma especificagio de Date para milissegundos 
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Sinopse 

Date.UTC(ano, mes, dia, hoias, minutos, segundos, ms) 

Argumentos 

ano 

O ano no formato de quatro dfgitos. Se esse argumento esta entre 0 e 99, inclusive, 1900 e 
somado a ele e e tratado como um ano entre 1900 e 1999. 
mes 

O mes, especificado como um inteiro de 0 (janeiro) all (dezembro). 

dia 

O dia do mes, especificado como um inteiro de 1 a 31. Note que esse argumento usa 1 como 
seu menor valor, enquanto outros argumentos usam 0. Esse argumento e opcional. 

horas 

A hora, especificada como um inteiro de 0 (meia-noite) a 23 (11 p.m.). Esse argumento e 
opcional. 
minutos 

Os minutos na hora, especificados como um inteiro de 0 a 59. Esse argumento e opcional. 
segundos 

Os segundos no minuto, especificados como um inteiro de 0 a 59. Esse argumento e opcional. 

ms 

O numero de milissegundos, especificado como um inteiro de 0 a 999. Esse argumento e 
opcional e e ignorado antes da padroniza^ao ECMAScript. 


Retorna 

A represen tafao em milissegundos da hora universal especificada. Isto e, esse metodo retorna o nu¬ 
mero de milissegundos entre meia-noite GMT de 1° de janeiro de 1970 e a hora especificada. 

Descri^ao 

Date.UTC() e um metodo estatico; ele e chamado por meio da construtora DateQ e nao de um objeto 
Date individual. 

Os argumentos de Date.UTC( ) especificam uma data e hora e sao entendidos em UTC; estao no fuso 
horario GMT. A hora UTC especificada e convertida no formato de milissegundos, o qual pode ser 
usado pelo metodo da construtora DateQ e pelo metodo Date.setTimeQ. 

O metodo da construtora DateQ pode aceitar argumentos de data e hora identicos aos aceitos por 
Date.UTCQ. A diferen^a e que a construtora DateQ presume hora local, enquanto Date.UTCQ presu¬ 
me hora universal (GMT). Para criar um objeto Date usando uma especificaqao de hora UTC, voce 
pode usar codigo como o seguinte: 

d = new Date (Date. UTC (1996, 4, 8, 16, 30)); 

Consulte tambem 

Date, Date.parseQ, Date.setTimeQ 
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Date.valueOfQ 

converte um objeto Date na representa$ao em milissegundos Anula Object.valueOf() 

Sinopse 

data. valueOf() 

Retorna 

A representa^ao de data em milissegundos. O valor retornado e o mesmo retornado por Date. 
getTimeQ. 


decodeURIQ 

retira o escape de caracteres em um URI 

Sinopse 

decodeURI(uri) 

Argumentos 

uri 

Uma string contendo um URI codificado ou outro texto a ser decodificado. 

Retorna 

Uma copia de uri, com quaisquer sequencias de escape hexadecimais substituidas pelos caracteres 
que representam. 

Lan;a 

URIError 

Indica que uma ou mais das sequencias de escape em uri esta mal-formada e nao pode ser 
decodificada corretamente. 

Descri^ao 

decodeURI() e uma fun^ao global que retorna uma copia decodificada de seu argumento uri. Ela 
inverte a codifica^ao feita por encodeURlQ; consulte a pagina de referenda dessa funqao para ver os 
detalhes. 

Consulte tambem 

decodeURIComponent(), encodeURI(), encodeURIComponentQ, escape(), unescape() 


decodeURIComponent() 

retira o escape de caracteres em um componente de URI 

Sinopse 

decodeURI(s) 
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Argumentos 

s 

Uma string contendo um componente de URI codificado ou outro texto a ser decodificado. 

Retorna 

Uma copia de s, com quaisquer sequencias de escape hexadecimais substituidas pelos caracteres que 
representam. 


Langa 

URIError 

Indica que uma ou mais das sequencias de escape em s esta mal-formada e nao pode ser deco- 
dificada corretamente. 

Descri^ao 

decodellRIComponent() e uma funijao global que retorna uma copia decodificada de seu argumento 
s. Ela inverte a codifica^ao feita por encodeURIComponent(). Consulte a pagina de referenda dessa 
funfao para ver os detalhes. 



Consulte tambem 

decodeURI(), encodeURI(), encodeURIComponentQ, escape(), unescape() 


encodeURIQ 

faz o escape de caracteres em uma URI 

Sinopse 

encodeURI(uri) 

Argumentos 

uri 

Uma string contendo o URI ou outro texto a ser codificado. 

Retorna 

Uma copia de uri, com certos caracteres substituidos pelas sequencias de escape hexadecimais. 

Langa 

URIError 

Indica que uri content pares substitutos Unicode mal-formados e nao podem ser codificados. 

Descri^ao 

encodeURI () e uma funijao global que retorna uma copia codificada de seu argumento uri. Letras e 
digitos ASCII nao sao codificados nem os seguintes caracteres de pontua^ao ASCII: 
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Como encodeURI() se destina a codificar URIs completos, nao e feito o escape dos seguintes caracte- 
res de pontua^ao ASCII, que tem significado especial em URIs: 

;/?:@&=+$,# 

Quaisquer outros caracteres em uii sao substitufdos pela conversao de cada um para sua codifica^ao 
UTF-8 e entao, codificando cada um, dois ou tres bytes resultantes com uma sequencia de escape 
hexadecimal da forma %xx. Nesse esquema de codificafao, os caracteres ASCII sao substitufdos por 
um unico escape %xx, os caracteres com codificanoes entre \u0080 e \u07ff sao substitufdos por duas 
sequencias de escape e todos os outros caracteres Unicode de 16 bits sao substitufdos por tres se¬ 
quences de escape. 

Se voce usar esse metodo para codificar um URI, deve ter certeza de que nenhum dos componen- 
tes do URI (como a string de consulta) contenha caracteres separadores de URI, como ? e #. Se os 
componentes contiverem esses caracteres, voce deve codificar cada um com encodeURIComponent(), 
separadamente. 

Use decodeURIf) para inverter a codifica^ao aplicada por esse metodo. Antes de ECMAScript v3, 
voce podia usar metodos escapeQ e unescapeQ (que agora sao desaprovados) para fazer um tipo 
semelhante de codificafao e decodifica^ao. 

Exemplo 

// Retorna http: //www.isp.com/app.cgi?argl=l&arg2=hello%20world 
encodeURI(''http: //www.isp.com/app.cgi?argl=l&arg2=hello world"); 
encodeURI(''\u00a9"); // 0 caractere de copyright e codificado como %C2%A9 

Consulte tambem 

decodeURI(), decodeURIComponentQ, encodeURIComponentQ, escapeQ, unescapeQ 


encodeURIComponent() 

faz o escape de caracteres em um componente de URI 

Sinopse 

encodeURIComponentQ) 

Argumentos 

s 

Uma string contendo parte de um URI ou outro texto a ser codificado. 

Retorna 

Uma copia de s, com certos caracteres substitufdos por sequencias de escape hexadecimais. 

Lanfa 

URIError 

Indica que s contem pares substitutes Unicode mal-formados e nao pode ser codificado. 
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Descri^ao 

encodeURIComponentQ e uma funqtio global que retorna uma copia codificada de seu argumento s. 
Letras e dfgitos ASCII nao sao codificados, nem os seguintes caracteres de poncua^ao ASCII: 

Todos os outros caracteres, incluindo caracteres de pontua^ao como /,: e #, que servem para separar 
os varios componentes de um URI, sao substitufdos por uma ou mais sequencias de escape hexade¬ 
cimals. Consulte encodellRlQ para ver uma descrRao do esquema de codificafao usado. 

Note a diferen^a entre encodellRIComponent() e encodeURI(): encodellRIComponent() presume que seu 
argumento e uma parte (como o protocolo, nome de host, caminho ou string de consulta) de um 
URI. Portanto, faz o escape dos caracteres de pontuarjao utilizados para separar as partes de um URI. 

Exemplo 

encodeURIComponent("hello world?"); // Retorna hello%20world%3F 

Consulte tambem 

decodeURlQ, decodeURIComponent(), encodeURlQ, escape(), unescapeQ 

Error 

uma excegao generica Object —> Error 

Construtora 

new Error() 

new Error (mensagem) 

Argumentos 

mensagem 

Uma mensagem de erro optional fornecendo detalhes sobre a exce^ao. 

Retorna 

Um objeto Error recem-construido. Se o argumento mensagem e especificado, o objeto Error o utiliza 
como valor de sua propriedade message; caso contrario, utiliza uma string padrao, definida pela 
implementa^ao, como valor dessa propriedade. Quando a construtora Error() e chamada como fun- 
qao, sem o operador new, ela se comporta exatamente como quando chamada com o operador new. 

Propriedades 

message 

Uma mensagem de erro fornecendo detalhes sobre a exce^ao. Essa propriedade content a string 
passada para a construtora ou uma string padrao definida pela implementa^ao. 

name 

Uma string especificando o tipo da exce^ao. Para instancias da classe Error e de todas as suas 
subclasses, essa propriedade especifica o nome da construtora usada para criar a instancia. 
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Metodos 

toString() 

Retorna uma string definida pela implementa^ao representando esse objeto Error. 

Descri^ao 

As instancias da classe Error representam erros ou exce^oes e normalmente sao usadas com as instru- 
foes throw e try/catch. A propriedade name especifica o tipo da exce^ao e a propriedade message pode 
fornecer detalhes sobre a exce^ao, legfveis para seres humanos. 

O interpretador JavaScript nunca lanqa objetos Error diretamente; em vez disso, lanqa instancias de 
uma das subclasses de Error, como SyntaxError ou RangeError. Em seu proprio codigo, voce pode 
achar conveniente lanqar objetos Error para sinalizar exceqdes ou talvez prefira simplesmente lan^ar 
uma mensagem de erro ou um codigo de erro como string primitiva ou valor numerico. 

Note que a especifica^ao ECMAScript define um metodo toStringQ para a classe Error (ele e herda- 
do por cada uma das subclasses de Error), mas nao exige esse metodo toString() para retornar uma 
string que possua o conteudo da propriedade message. Portanto, voce nao deve esperar que o metodo 
toString() converta um objeto Error em uma string significativa, legfvel para seres bumanos. Para 
exibir uma mensagem de erro ao usuario, voce deve usar explicitamente as propriedades name e mes¬ 
sage do objeto Error. 

Exemplos 

Uma exce^ao poderia ser sinalizada com codigo como o seguinte: 
function factorial(x) { 

if (x < 0) throw new Error("factorial: x must be >= 0"); 
if (x <= l) return 1; else return x * factorial(x-l); 

} 

E, se capturar uma exce^ao, voce pode exibi-la para o usuario com codigo como o seguinte (que 
utiliza o metodo do lado do cliente Window.alertQ): 
try { &*(&/* um erro e lancado aqui */ } 
catch(e) { 

if (e instanceof Error) { // E uma instancia de Error ou uma subclasse? 

alert(e.nome + ”: " + e.message); 

} 

} 

Consulte tambem 

EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError 

Error.message 

uma mensagem de erro legfvel para seres humanos 

Sinopse 


>.message 
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Descri^ao 

A propriedade message de um objeto Error (ou de uma instancia de qualquer subclasse de Error) se 
destina a conter uma string legivel para seres humanos fornecendo detalhes sobre o erro ou a exceqao 
que ocorreu. Se um argumento mensagem e passado para a construtora Error (), essa mensagem se tor- 
na o valor da propriedade message. Se nenhum argumento mensagem e passado, um objeto Error her- 
da um valor padrao definido pela implementa^ao (que pode ser a string vazia) para essa propriedade. 


Error.name 


otipodeumerro 

Sinopse 


Descri^ao 

A propriedade name de um objeto Error (ou de uma instancia de qualquer subclasse de Error) especi- 
fica o tipo de erro ou excefao que ocorreu. Todos os objetos Error herdam essa propriedade de suas 
construtoras. O valor da propriedade e igual ao nome da construtora. Assim, objetos SyntaxError 
tem uma propriedade name “SyntaxError” e objetos EvalError tern uma propriedade name “EvalError”. 



Error.toStringO 

converte um objeto Error em uma string Anula Object.toStringO 

Sinopse 

eno. toString() 

Retorna 

Uma string definida pela implementa^ao. O padrao ECMAScript nao especifica nada sobre o valor 
de retorno desse metodo, exceto que e uma string. Notadamente, ele nao exige que a string retorna- 
da contenha o nome do erro ou a mensagem de erro. 


6SC3pG() desaprovado 

codifica uma string 

Sinopse 

escape(s) 

Argumentos 


A string que deve ser “escapada” ou codificada. 
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Retorna 

Uma copia codificada de s na qual certos caracteres foram substitufdos por sequencias de escape 
hexadecimais. 

Descri^ao 

escape() e uma fungao global. Ela retorna uma nova string contendo uma versao codificada de s. A 
string s em si nao e modificada. 

escape!) retorna uma string na qual todos os caracteres de s que nao sejam letras, digitos e os carac¬ 
teres de pontua^ao e / ASCII tenham sido substitufdos por sequencias de escape da 

forma % xx ou %u xxxx (onde x representa um dfgito hexadecimal). Os caracteres Unicode \u0000 a \ 
uOOff sao substitufdos pela sequencia de escape % xx e todos os outros caracteres Unicode sao substi¬ 
tufdos pela sequencia %u xxxx. 

Use a funijao unescapeQ para decodificar uma string codificada com escape!). 

Embora a fungao escape!) tenha sido padronizada na primeira versao de ECMAScript, foi desa- 
provada e removida do padrao por ECMAScript v3. E provavel que as implementagoes de EC¬ 
MAScript implementem essa fungao, mas nao sao obrigadas a isso. Voce deve usar encodeURI() e 
encodeURIComponent(), em vez de escape!). 

Exemplo 

escapeC'Hello World!"); // Retorna "Hello%20World%2l" 

Consulte tambem 

encodeURI(), encodeURIComponent() 

eval() 

executa codigo JavaScript a partir de uma string 

Sinopse 

eval(codigo) 

Argumentos 

codigo 

Uma string contendo a expressao JavaScript a ser avaliada ou as instru^oes a serem executadas. 

Retorna 

O valor do codigo avaliado, se houver. 

Langa 

eval() langa um SyntaxError se codigo nao e codigo JavaScript valido. Se a avalia^ao de codigo langa 
um erro, eval() propaga esse erro. 
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Descri^ao 

evalQ e um metodo global que avalia uma string de codigo JavaScript. Se codigo contem uma 
expressao, eval avalia a expressao e retorna seu valor. (Algumas expressoes, como objetos e fun^oes 
literals, parecem instrufoes e devem ser colocadas entre parenteses quando passadas para evalQ a 
fim de solucionar a ambiguidade.) Se codigo contem uma ou mais instru^oes JavaScript, eval() 
executa essas instru^oes e retorna o valor (se houver) retornado pela ultima instru^ao. Se codigo nao 
retorna nenhum valor, evalQ retorna undefined. Por fim, se codigo lan^a uma excefao, eval() passa 
essa exce^ao para a chamadora. 

evalQ se comporta de modos diferentes em ECMAScript 3 e em ECMAScript 5; em ECMAScript 
5, se comporta de formas diferentes no modo restrito e no modo nao restrito, sendo necessaria uma 
pequena digressao para explicar essas diferenijas. E muito mais facil implementar interpretadores 
eficientes quando uma linguagem de programa?ao define eval como operador e nao como funijao. 
eval em JavaScript e uma firn^ao, mas por eficiencia, a linguagem faz uma distinijao entre chamadas 
tipo operador diretas para evalQ e chamadas indiretas. Uma chamada direta utiliza o identificador 
eval diretamente e, se voce removesse os parenteses, eval pareceria um operador. Qualquer outra 
chamada de evalQ e indireta. Se voce atribui a funqao evalQ a uma variavel com um nome diferente 
e a chama por meio dessa variavel, essa e uma chamada indireta. Do mesmo modo, se voce chama 
eval() como metodo do objeto global, essa e uma chamada indireta. 

Feita essa distin^ao entre chamadas diretas e indiretas, podemos documentar o comportamento de 
evalQ como segue: 

Chamada direta, modo nao restrito de ES3 e ES5 

evalQ avalia codigo no escopo lexico corrente. Se codigo contem declara^oes de variavel ou 
funpio, elas sao definidas no escopo local. Esse e o caso de uso normal para evalQ. 

Chamada indireta, ES3 

A especifica?ao ECMAScript 3 permite aos interpretadores lan^ar EvalError para qualquer 
chamada indireta de evalQ. As implementa^oes de ES3 geralmente nao fazem isso na pratica, 
mas as chamadas indiretas devem ser evitadas. 

Chamada indireta, ES5 

Em ECMAScript 5, as chamadas indiretas de evalQ nao devem lanfar EvalError e, em vez 
disso, devem avaliar codigo no escopo global, ignorando qualquer variavel local no escopo 
lexico corrente. Em ES5, podemos atribuir var geval = eval;, entao, podemos usar gevalQ 
para avaliar codigo no escopo global. 

Chamada direta ou indireta, modo restrito 

No modo restrito, as definifoes de variavel e firn^ao em codigo sao feitas em um escopo pri- 
vado que so vale enquanto dura a chamada de evalQ. Isso significa que, no modo restrito, as 
chamadas diretas para evalQ nao podem alterar o escopo lexico e as chamadas indiretas nao 
podem alterar o escopo global. Essas regras se aplicam se a chamada de evalQ e feita no modo 
restrito ou se codigo comefa com uma diretiva “use strict”. 

evalQ fornece um recurso muito poderoso para a linguagem JavaScript, mas seu uso nao e frequente 
em programas reais. Usos obvios sao: escrever programas que atuam como interpretadores JavaScript 
recursivos e escrever programas que geram e avaliam codigo JavaScript dinamicamente. 
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A maioria das fun^oes de JavaScript que esperam argumentos de string converte qualquer valor rece- 
bido em uma string, antes de prosseguir. eval() nao se comporta assim: se codigo nao e um valor de 
string primitivo, e simplesmente retornado intacto. Cuidado, portanto, para nao passar sem querer 
um objeto String para eval(), quando pretendia passar um valor de string primitivo. 

Exemplo 

eval("l+2”); // Retorna S 

// Este codigo usa metodos JavaScript do lado do cliente para dizer ao usuario 
// para que digite uma expressao e exibe os resultados de sua avalia^ao. 

// Consulte os metodos do lado do cliente Window.alertQ e Window.prompt() para ver os 
// detalhes. 
try { 

alert("Result: " + eval(prompt("Enter an expression:",""))); 

} 

catch(exception) { 
alert(exception); 

} 

EvalError 

langado quando eval() e usada incorretamente Object —» Error —y EvalError 

Construtora 

new EvalError() 

new EvalError(mensagem) 

Argumentos 

mensagem 

Uma mensagem de erro opcional fornecendo detalhes sobre a excerjao. Se for especificado, esse 
argumento e usado como valor da propriedade message do objeto EvalError. 

Retorna 

Um objeto EvalError recentemente construido. Se o argumento mensagem e especificado, o objeto 
Error o utiliza como valor de sua propriedade message; caso contrario, utiliza como valor dessa 
propriedade uma string padrao definida pela implementa^ao. Quando a construtora EvalErrorQ e 
chamada como uma funfao sem o operador new, se comporta exatamente como quando chamada 
com o operador new. 

Propriedades 

message 

Uma mensagem de erro fornecendo detalhes sobre a exceQo. Essa propriedade contem a 
string passada para a construtora ou uma string padrao definida pela implementaQo. Consul¬ 
te Error.message para ver os detalhes. 


name 


Uma string especificando o tipo da exce^ao. Todos os objetos EvalError herdam o valor “Eva¬ 
lError” dessa propriedade. 
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Descri^ao 

Uma instancia da classe EvalError pode ser lanfada quando a funcao global eval() e chamada com 
qualquer outro nome. Consulte eval() para ver uma explica^ao sobre as restrifoes de como essa fun- 
9ao pode ser chamada. Consulte Error para ver os detalhes sobre como lanijar e capturar excefoes. 

Consulte tambem 

Error, Error.message, Error.name 

Function 

uma fungao de JavaScript Object -fFunction 

Sinopse 

■functionnomedafuncao(lista_nomes_argumento) 

{ 

1 C0IP ° 

function ( lista_nomes_aigumento) { corpo } 
nomedafuncao(lista_valores_ciigumento) 

Construtora 

new Function {nomes_argumento..., coipo) 

Argumentos 

nomes_aigumento. . . 

Qualquer numero de argumentos de string, cada um nomeando um ou mais argumentos do 
objeto Function que esta sendo criado. 

corpo 

Uma string especificando o corpo da furnjao. Pode conter qualquer numero de instru^oes 
JavaScript, separadas por pontos e virgulas, e pode se referir a qualquer um dos nomes de 
argumento especificados pelos argumentos anteriores da construtora. 

Retorna 

Um objeto Function recentemente criado. Chamar a funijao executa o codigo JavaScript especifica- 
do por corpo. 

Langa 

SyntaxError 

Indica que houve um erro de sintaxe JavaScript no argumento corpo ou em um dos argumen¬ 
tos nomes_aigumento. 


// Instru^ao de definicao da fun^ao 


// Funcao literal nao nomeada 
// Chamada da funcao 


Propriedades 

arguments[] 

Um array de argumentos que foram passados para a funcao. Desaprovada. 
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caller 

Uma referenda ao objeto Function que chamou essa, ou null, se a fun^ao foi chamada em 
codigo de nfvel superior. Desaprovada. 
length 

O numero de argumentos nomeados, especificados quando a fun^ao foi declarada. 
prototype 

Um objeto que, para uma funqao construtora, define propriedades e metodos compartilhados 
por todos os objetos criados com essa funijao construtora. 

Metodos 

appiyO 

Chama uma fun^ao como metodo de um objeto especificado, passando um array de argumen¬ 
tos especificado. 
bind() 

Retorna uma nova funqdo que chama esta como metodo do objeto especificado, com os argu¬ 
mentos especificados opcionalmente. 

call() 

Chama uma fun^ao como metodo de um objeto especificado, passando os argumentos espe¬ 
cificados. 
toString() 

Retorna uma representa^ao de string da fun^ao. 

Descri^ao 

Uma fun^ao e um tipo de dados fundamental em JavaScript. O Capitulo 8 explica como definir 
e usar funijoes e o Capitulo 9 aborda os assuntos relacionados dos metodos, construtoras e a pro- 
priedade prototype das funijoes. Consulte esses capitulos para ver os detalhes completos. Note que, 
embora os objetos funijao possam ser criados com a construtora Function!) descrita aqui, isso nao 
e eficiente e a maneira preferida de definir funijoes, na maioria dos casos, e com uma instruqao de 
definifao de funijao ou com uma funijao literal. 

Em JavaScript l.le posteriores, o corpo de uma funijao recebe automaticamente uma variavel local 
chamada arguments que se refere a um objeto Arguments. Esse objeto e um array dos valores passa- 
dos como argumentos para a funqao. Nao confunda isso com a propriedade desaprovada arguments! ] 
listada anteriormente. Consulte a pagina de referenda de Arguments para ver os detalhes. 

Consulte tambem 

Arguments; Capitulo 8, Capitulo 9 

Function.applyO 

chama uma fun$ao como metodo de um objeto 

Sinopse 

fun f do. apply (objthis, digs) 




Referenda de JavaScript basica 761 


Argumentos 

objthis 

O objeto no qual funcao sera aplicada. No corpo da fun<;ao, objthis se torna o valor da pala- 
vra-chave this. Se esse argumento e null, o objeto global e usado. 


args 

Um array de valores a serem passados como argumentos para fungao. 

Retorna 

O valor retornado pela chamada de funcao. 

Langa 

TypeError 

Se esse metodo e chamado em um objeto que nao e uma funcao ou se e chamado com um 
argumento aigs que nao e um array ou um objeto Arguments. 

Descri^ao 

apply() chama a funcao especificada como se fosse um metodo de objthis, passando a ela os argu¬ 
mentos contidos no array aigs. Retorna o valor retornado pela chamada da funcao. Dentro do corpo 
da funcao, a palavra-chave this se refere ao objeto objthis. 

O argumento args deve ser um array ou um objeto Arguments. Use Function.call(), em vez disso, 
se quiser especificar individualmente os argumentos a serem passados para a funcao e nao como 
elementos do array. 

Exemplo 

// Aplica o metodo padrao Object.toString() em um objeto que 
// o anula com sua propria versao. Observe que nao ha argumentos. 

Object.prototype.toString.apply(o); 

// Chama o metodo Math.maxQ com apply para encontrar o maior 
// elemento em um array. Note que o primeiro argumento nao importa 
// nesse caso. 

var data = 11,2,3,4,5,6,7,8]; 

Math.max.apply(null, data); 

Consulte tambem 

Function.call() 


Function.arguments[] desaprovado 

argumentos passados para uma funcao 

Sinopse 

funcao .arguments[i] 
fungao. arguments.length 
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Descri^ao 

A propriedade arguments de um objeto Function e um array dos argumentos passados para uma 
funfao. Ela e definida somente enquanto a funfao esta executando. arguments.length especifica o 
numero de elementos no array. 

Essa propriedade foi desaprovada em favor do objeto Arguments - nunca deve ser usada em codigo 
JavaScript novo. 

Consulte tambem 

Arguments 

Function.bindO ECMAScripts 

retoma uma fun^ao que chama essa como metodo 

Sinopse 

fungao. bind(o) 
fungao. bind(Oj digs...) 

Argumentos 

O objeto ao qual essa funijao deve estar vinculada. 
args... 

Zero ou mais valores de argumento que tambem estarao vinculados. 

Retorna 

Uma nova funipao que chama essa como metodo de o e passa a ela os argumentos args. 

Descri^ao 

O metodo bind ( ) retorna uma nova fun^ao que chama essa como metodo do objeto o. Os argu¬ 
mentos passados para essa funfao consistem nos args passados para bind( ), seguidos por quaisquer 
valores passados para a nova fun^ao. 

Exemplo 

Suponha que f seja uma fun<;ao e que chamemos o metodo bind () como segue: 
var g = f.bind(o, 1, 2); 

Agora g e uma nova fun^ao e a chamada g(3) e equivalente a: 
f.call(oj l, 2, 3); 

Consulte tambem 

Function.apply (), Function.call(), Se^ao 8.7.4 
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Function.callO 

chama uma funcao como metodo de um objeto 

Sinopse 

fungao.call(objthis, digs...) 

Argumentos 

objthis 

O objeto no qual funcao serao chamada. No corpo da funijao, objthis se torna o valor da 
palavra-chave this. Se esse argumento e null, o objeto global e usado. 
args... 

Qualquer numero de argumentos, os quais serao passados como argumentos para funcao. 

Retorna 

O valor retornado pela chamada de funcao. 

Lan^a 

TypeError 

Se esse metodo e chamado em um objeto que nao e uma funcao. 

Descri^ao 

call() chama a funcao especificada como se fosse um metodo de objthis, passando a ela quaisquer 
argumentos que venham apos objthis na lista de argumentos. O valor de retorno de call() e o valor 
retornado pela chamada da funcao. Dentro do corpo da funcao, a palavra-chave this se refere ao 
objeto objthis ou ao objeto global, caso objthis seja null. 

Use Function.apply (), em vez disso, se quiser especificar os argumentos a serem passados para a 
funcao em um array. 

Exemplo 

// Chama o metodo padrao Object.toStringQ em um objeto que 

// o anula com sua propria versao. Observe que nao existem argumentos. 

Object.prototype.toString.call(o); 

Consulte tambem 

Function.apply() 

Function.Caller desaprovada; nao definida no modo restrito 

a funcao que chamou esta 

Sinopse 

funcao. caller 






764 Parte III Referenda de JavaScript basica 


Descri^ao 

Nas versoes anteriores de JavaScript, a propriedade caller de um objeto Function e uma referenda 
a funijao que chamou a atual. Se a funipao e chamada no nivel superior de um programa JavaScript, 
caller e null. Essa propriedade so pode ser usada dentro da funijao (isto e, a propriedade caller e 
definida para uma funcao somente enquanto essa funijao esta executando). 

Function.caller nao faz parte do padrao ECMAScript e nao e exigida nas implementa^oes que o 
obedecem. Nao deve ser usada. 

Function.lenght 

o numero de argumentos dedarados 

Sinopse 

funcao .length 

Describe) 

A propriedade length de uma fiinfao especifica o numero de argumentos nomeados, declarados 
quando a funcao foi definida. A funcao pode ser chamada com mais ou menos do que esse numero 
de argumentos. Nao confunda essa propriedade de um objeto Function com a propriedade length 
do objeto Arguments, a qual especifica o numero de argumentos realmente passados para a funcao. 
Consulte Arguments.length para ver um exemplo. 

Consulte tambem 

Arguments.length 

Function.prototype 

o prototipo de uma dasse de objetos 

Sinopse 

funcao. prototype 

Descri^ao 

A propriedade prototype e usada quando uma funcao atua como construtora. Ela se refere a um 
objeto que serve como prototipo para uma classe de objetos inteira. Qualquer objeto criado pela 
construtora herda todas as propriedades do objeto referido pela propriedade prototype. 

Consulte o Capitulo 9 para ver uma discussao completa sobre fun^oes construtoras, sobre a proprie¬ 
dade prototype e sobre a defini^ao de classes em JavaScript. 

Consulte tambem 

Capitulo 9 
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Function.toStringO 

converte uma fungao em uma string 

Sinopse 

/unfoo.toStringO 

Retorna 

Uma string representando a fungao. 

Langa 

TypeError 

Se esse metodo e chamado em um objeto que nao e Function. 

Descrigao 

O metodo toStringQ do objeto Function converte uma fungao em uma string de maneira depen- 
dente da implementagao. Na maioria das implementagoes, como no Firefox e no IE, esse metodo 
retorna uma string de codigo JavaScript valido - codigo que inclui a palavra-chave function, lista 
de argumentos, o corpo completo da fungao, etc. Nessas implementagoes, a saida desse metodo 
toString() e entrada valida para a fungao global eval(). Contudo, esse comportamento nao e exigi- 
do pela especificagao e nao se deve contar com ele. 

Global 

o objeto global Object -» Global 

Sinopse 

this 

Propriedades globais 

O objeto global nao e uma classe; portanto, as propriedades globais a seguir tern entradas de refe¬ 
renda individuals sob seus proprios nomes. Isto e, voce pode encontrar detalhes sobre a propriedade 
undefined listada sob o nome undefined e nao sob Global.undefined. Note que todas as variaveis de 
nivel superior tambem sao propriedades do objeto global: 

Infinity 

Um valor numerico representando o infinito positivo. 

NaN 

O valor not-a-number (nao e niimero). 
undefined 

O valor undefined. 
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Fun^oes globais 

O objeto global e um objeto, nao uma classe. As fun0es globais listadas aqui nao sao metodos de 
nenhum objeto e suas entradas de referenda aparecem sob o nome da funijao. Por exemplo, voce 
vai encontrar detalhes sobre a funijao parselnt() debaixo de parselnt() e nao de Global.parselnt(): 
decodeURI() 

Decodifica uma string cujo escape foi feito com encodeURI(). 
decodeURIComponentQ 

Decodifica uma string cujo escape foi feito com encodeURIComponent(). 
encodeURI 

Codifica um URI fazendo o escape de certos caracteres. 
encodeURIComponent 

Codifica um componente de URI fazendo o escape de certos caracteres. 
escape() 

Codifica uma string substituindo certos caracteres por sequencias de escape. 
evalQ 

Avalia uma string de codigo JavaScript e retorna o resultado. 
isFiniteQ 

Testa se um valor e um numero finito. 
isNaN() 

Testa se um valor e not-a-number. 
parseFloat() 

Analisa um numero a partir de uma string. 
parselnt() 

Analisa um inteiro a partir de uma string. 
unescapeQ 

Decodifica uma string codificada com escapeQ. 

Objetos globais 

Alem das propriedades e fun<joes globais listadas anteriormente, o objeto global tambem define 
propriedades que se referem a todos os outros objetos JavaScript predefinidos. A maioria dessas pro¬ 
priedades e composta de fun (joes construtoras: 

Array 

A construtora Array (). 

Boolean 

A construtora Boolean(). 

Date 

A construtora Date (). 

Error 

A construtora ErrorQ. 
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EvalError 

Aconstrutora EvalError(). 

Function 

A construtora FunctionQ. 

DSON 

Uma referenda a um objeto que define fun (joes JSON de analise e serializaijao. 

Math 

Uma referenda a um objeto que define fiinijoes matematicas. 

Number 

A construtora NumberQ. 

Object 

A construtora Object(). 

RangeError 

A construtora RangeErrorQ. 

ReferenceError 

A construtora ReferenceError(). 

RegExp 

A construtora RegExpQ. 

String 

A construtora StringQ. 

SyntaxError 

A construtora SyntaxError(). 

TypeError 

A construtora TypeError(). 

URIError 

A construtora URIError(). 

Descri^ao 

O objeto global e um objeto predefinido que serve como espatjo reservado para as propriedades e 
funtjoes globais de JavaScript. Todos os outros objetos, funcjoes e propriedades predefinidos sao aces- 
siveis por intermedio do objeto global. O objeto global nao e uma propriedade de nenhum outro 
objeto; portanto, nao tern nome. (O titulo desta referenda foi escolhido simplesmente por conveni- 
encia organizational e nao indica que o objeto global se chama “Global”.) Em codigo JavaScript de 
nfvel superior, voce pode se referir ao objeto global com a palavra-chave this. Contudo, raramente 
e necessario se referir ao objeto global dessa maneira, pois o objeto global serve como topo do en- 
cadeamento de escopos, ou seja, nomes de variavel e fun^ao nao qualificados sao pesquisados como 
propriedades do objeto. Quando o codigo JavaScript se refere a funtjao parselntQ, por exemplo, 
esta se referindo a propriedade parselnt do objeto global. O fato de o objeto global estar no topo do 
encadeamento de escopos tambem significa que todas as variaveis declaradas em codigo JavaScript 
de nfvel superior se tornam propriedades do objeto global. 
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O objeto global e simplesmente um objeto e nao uma classe. Nao existe uma construtora Clobal() e 
nao ha como instanciar um novo objeto global. 

Quando JavaScript e incorporada em um ambiente especffico, o objeto global normalmente recebe 
propriedades adicionais especiais desse ambiente. Na verdade, o tipo do objeto global nao e espe- 
cificado pelo padrao ECMAScript e uma implementafao ou incorporate de JavaScript pode usar 
um objeto de qualquer tipo como objeto global, desde que o objeto defina as propriedades e fun^oes 
basicas listadas aqui. Em JavaScript do lado do cliente, por exemplo, o objeto global e um objeto 
Window e representa a janela do navegador Web dentro da qual o codigo JavaScript esta sendo 
executado. 

Exemplo 

Em JavaScript basica, nenhuma das propriedades predefinidas do objeto global e enumeravel; por- 
tanto, voce pode listar todas as variaveis globais declaradas implfcita e explicitamente com um la?o 
for/in, como segue: 
var variables = "" 
for(var name in this) 

variables += name + "\n"; 

Consulte tambem 

Window na Parte IV ; Capitulo 3 

Infinity 

uma propriedade numerica que representa infinito 

Sinopse 

Infinity 

Descri^ao 

Infinity e uma propriedade global que contem o valor numerico especial representando infinito 
positivo. A propriedade Infinity nao e enumerada por la^os for/in e nao pode ser excluida com 
o operador delete. Note que Infinity nao e uma constante e pode ser configurada com qualquer 
outro valor, algo que voce deve ter o cuidado de nao fazer. (Contudo, Number.POSITIVE_INFINITY e 
uma constante.) 

Consulte tambem 

isFinite(), NaN, Number.POSITIVE_INFINITY 

isFiniteO 

determina se um numero e finito 

Sinopse 

isFinite(n) 
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Argumentos 


n 


O numero a ser testado. 

Retorna 

true sene (ou pode ser convertido em) um numero finito ou false, sene NaN (nao e um numero) 
ou infinito positivo ou negativo. 

Consulte tambem 

Infinity, isNaN(), NaN, Number.NaN, Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY 

isNaNQ 

verifies se e not-a-number 

Sinopse 

isNaN(x) 

Argumentos 

O valor a ser testado. 

Retorna 

true se x nao e um numero ou se e o valor numerico especial NaN. Retorna false se x e qualquer 
outro numero. 


Descri^ao 


“NaN” e o acronimo de “not-a-number” (nao e numero). A variavel global NaN content um valor 
numerico especial (tambem conhecido como NaN) que representa um numero invalido (como o 
resultado de zero dividido por zero). isNaNQ testa se seu argumento nao e um numero. Essa fun^ao 
retorna false se x e (ou pode ser convertido em) um numero diferente de NaN. Retorna true se x nao 
e (e nao pode ser convertido em) um numero ou se e igual a NaN. 

NaN tern a propriedade especial de nao ser igual a valor algum, incluindo a si mesmo. Assim, se quiser 
testar especificamente o valor NaN, em vez de testar genericamente qualquer coisa que nao seja nume¬ 
ro, nao escreva x === NaN: isso sempre vai ser false. Em vez disso, use a expressao x ! == x: isso vai ser 
avaliado como true somente se x for NaN. 

Um uso comum de isNaNQ e no teste dos resultados de parseFloatQ e parselntQ, a fim de determi- 
nar se eles rep resen tarn numeros validos. 


Exemplo 


isNaN(O); 
isNaN(0/0); 
isNaN(parseInt("3")); 
isNaN(parse!nt("hello")); 


// => falso 
// => verdadeiro 

// => verdadeiro 
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isNaN("3"); 

isNaN("hello"); 

isNaN(true); 

isNaN(undefined); 


// => falso 
// => verdadeiro 

// => verdadeiro 


Consulte tambem 

isFiniteQ, NaN, Number.NaN, parseFloat(), parselnt() 


JSON ECMAScript 5 

analise e transforma$ao em string JSON 

Descri^ao 

JSON e um objeto simples que serve como espa^o de nomes para as fun^oes globais de ECMAScript 
5 JSON.parseQ e JSON.stringifyQ. JSON nao e uma construtora. Antes de ECMAScript 5, fun^oes 
de analise e serializaqao compativeis com JSON estao disponiveis no enderefo http://json.org/json2.js. 

“JSON” significa JavaScript Object Notation (nota^ao de objeto de JavaScript). JSON e um forma- 
to de serializa^ao de dados baseado em literals de JavaScript e pode representar o valor null, os valo- 
res booleanos true e false, numeros em ponto flutuante (usando literals numericas de JavaScript), 
strings (usando strings literals de JavaScript), arrays de valores (usando sintaxe de array literal de 
JavaScript) e mapeamentos de string para valor (usando sintaxe de objeto literal da JavaScript). O 
valor primitivo undefined, assim como os numeros NaN e Infinity, nao podem ser representados em 
JSON. Fundoes da JavaScript, Dates, RegExps e Errors tambem nao sao suportadas. 

Exemplo 

// Faz uma copia profunda de qualquer objeto ou array que possa ser serializado com JSON 
function deepcopy(o) { return JSON.parse(JSON.stringify(o)); } 

Consulte tambem 

JSON. parse(), JSON. stringify (), Se$ao 6.9, http://json.org 

JSON.parseO ECMAScript 5 

analisa uma string formatada com JSON 

Sinopse 

JSON.parse(s) 

JS0N.parse(s, reviver) 

Argumentos 

s 

A string a ser analisada. 

reviver 

Uma firnfao optional que pode transformar valores analisados. 
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Retorna 

Um objeto, array ou valor primitivo analisado de s (e opcionalmente modificado por reviver). 

Descri^ao 

DSON.parseQ e uma fun^ao global para analisar strings formatadas com JSON. Normalmente, voce 
passa um unico argumento de string e USON.parseQ retorna o valor JavaScript representado pela 

O argumento opcional reviver pode ser usado para filtrar ou fazer o pos-processamento do valor 
analisado, antes que ele seja retornado. Se for especificada, a fun910 reviver e chamada uma vez 
para cada valor primitivo (mas nao para os objetos ou arrays que content esses valores primitivos) 
analisado de s. reviver e chamada com dois argumentos. O primeiro e um nome de propriedade - 
um nome de propriedade de objeto ou um indice de array convertido em uma string. O segundo 
argumento e o valor primitivo dessa propriedade de objeto ou elemento de array, reviver e chamada 
como metodo do objeto ou array que content o valor primitivo. Como um caso especial, se a string 
s representar um valor primitivo, em vez do objeto ou array mais tipico, entao esse valor primitivo 
sera armazenado em um objeto recentemente criado, usando uma propriedade cujo nome e a string 
vazia. Nesse caso, reviver sera chamada uma vez nesse objeto recentemente criado, com uma string 
vazia como seu primeiro argumento e o valor primitivo como segundo. 

O valor de retorno da funejao reviver se torna o novo valor da propriedade nomeada. Se reviver 
retornar seu segundo argumento, entao a propriedade vai permanecer inalterada. Se reviver retornar 
undefined (ou nao retornar valor algum), entao a propriedade nomeada vai ser exclufda do objeto ou 
array antes que ISON. parse () retorne para o usuario. 

Exemplo 

Muitos usos de DSON.parseQ sao simples: 
var data = DSON.parse(text); 

A ftunjao DSON.stringifyQ converte objetos Date em strings e voce pode usar uma funpio reviver 
para reverter essa transformapio. O exemplo a seguir tambem filtra nomes de propriedade e retorna 
undefined para remover certas propriedades do objeto resultante: 

var data DSON.parse(text, function(name, value) { 

// Remove qualquer valor cujo nome de propriedade comece com um sublinhado 
if (namejo] == return undefined; 

// Se 0 valor e uma string no formato de data ISO 8601, converte-o para Date, 
if (typeof value === "string" && 

/ A \d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d.\d\d\dZ$/.test(value)) 
return new Date(value); 

// Caso contrario, retorna 0 valor intacto 
return value 

}); 


Consulte tambem 

ISON.stringify(), Se^ao 6.9 
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JSON.stringifyO ECMAScripts 

serializa um objeto, array ou valor primitivo 

Sinopse 

JSON.stringify(o) 

JSON.stringify(o, filtio) 

JSON.stringifyO, filtio, recuo) 

Argumentos 

O objeto, array ou valor primitivo a ser convertido em uma string JSON. 
filtro 

Uma fun^ao opcional que pode substituir valores antes da transforma^ao em strings ou um 
array contendo os nomes de propriedades a serem transformadas em strings. 

recuo 

Um argumento opcional especificando uma string de recuo ou o numero de espa^os a usar 
para recuo quando for desejada uma saida formatada legivel para seres humanos. Se for omiti- 
do, a string retornada nao vai conter espa?os estranhos e sera legivel para a maquina, mas nao 
facilmente legivel para seres humanos. 

Retorna 

Uma string formatada em JSON representando o valor o, conforme filtrado por filtro e formatado 
de acordo com recuo. 

Descri^ao 

J SON. stringify () converte um valor primitivo, objeto ou array em uma string formatada em JSON 
que posteriormente pode ser analisada com JSON.parseQ. Normalmente, essa fun^ao e chamada 
com um unico argumento e retorna a string correspondente. 

Quando JSON. stringifyQ e chamada com um unico argumento e quando esse valor consiste apenas 
em objetos, arrays, strings, numeros, valores booleanos e no valor null, a transformaQo em strings e 
muito simples. Contudo, quando o valor a ser transformado em string contem objetos que sao ins- 
tancias de uma classe, o processo de transformaQo e mais complexo. Se JSON.stringifyO encontra 
qualquer objeto (ou array) com um metodo chamado toJSONQ, ela chama esse metodo no objeto 
e transforma em string o valor de retorno, em vez do proprio objeto. Ela chama toJSONQ com um 
unico argumento de string que e o nome de propriedade ou indice de array do objeto. A classe Date 
define um metodo toJSONQ que converte objetos Date em strings usando o metodo Date.toISOS- 
tringQ. Nenhuma outra classe interna de JavaScript define um metodo toJSONQ, mas voce pode 
defini-los para suas proprias classes. Lembre-se de que, apesar de seu nome, toJSONQ nao precisa 
transformar em string o objeto em que e chamada: precisa apenas retornar um valor que seja trans¬ 
formado em string no lugar do objeto original. 

O segundo argumento de JSON.stringifyO permite uma segunda camada de filtragem para o pro¬ 
cesso de transformaQo em string. Esse argumento opcional pode ser uma funfao ou um array e 
os dois casos fornecem funcionalidade de filtragem completamente diferente. Se voce passa uma 
funijao, ela e uma funijao substituta e fimciona de forma semelhante ao metodo toJSONQ descrito 
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anteriormente. Se for especificada, a fun<;ao substituta e chamada para cada valor a ser transformado 
em string. O valor de this e o objeto ou array dentro do qual o valor e definido. O primeiro argu- 
mento da fun910 substituta e o nome de propriedade do objeto ou indice de array do valor dentro 
desse objeto e o segundo argumento e o valor em si. Esse valor e substituido pelo valor de retorno 
da funfao substituta. Se a substituta retorna undefined ou nao retorna nada, entao esse valor (e seu 
elemento de array ou propriedade de objeto) e omitido da transforma^ao em string. 

Se, em vez disso, um array de strings (ou niimeros - eles sao convertidos em strings) e passado como 
segundo argumento, elas sao usadas como nomes de propriedades de objeto. Qualquer propriedade 
cujo nome nao esteja no array sera omitida da transformaQo em string. Alem disso, a string retorna- 
da vai corner propriedades na mesma ordem em que elas aparecem no array. 

DSON.stringifyQ normalmente retorna uma string legfvel para maquinas, sem qualquer espa?o em 
branco ou novas linhas inseridas. Se quiser que a safda seja mais legfvel para seres humanos, espe- 
cifique um terceiro argumento. Se voce especificar um numero entre 1 e 10, DSON.stringifyQ vai 
inserir novas linhas e usar o numero de espa?os especificado para recuar cada “nfvel” da safda. Se, em 
vez disso, voce especificar uma string nao vazia, DSON.stringifyQ vai inserir novas linhas e usar essa 
string (ou os 10 primeiros caracteres dela) para recuar cada nfvel. 

Exemplos 

// Serializaqao basica 

var text = DSON.stringify(data); 

// Especifica exatamente quais campos vai serializar 

var text = DSON.stringify(address, ["city","state","country"]); 

// Especifica uma funcao substituta para que objetos RegExp possam ser serializados 
var text = DSON.stringify(patterns, function(key, value) { 

if (value.constructor === RegExp) return value.toStringQ; 
return value; 

}); 

// Ou obtem a mesma substituiqao como segue: 

RegExp.prototype.toDSON = functionQ { return this.toStringQ; } 

Consulte tambem 

DS0N.parse(), Se^ao 6.9 

Math 

funQes e constantes matematicas 

Sinopse 

Math .constante 
Math./uncdoQ 

Constantes 

Math.E 

A constante e, a base do logaritmo natural. 
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Math.LN10 

O logaritmo natural de 10. 

Math.LN2 

O logaritmo natural de 2. 

Math.L0C10E 

O logaritmo de base 10 de e. 

Math.L0G2E 

O logaritmo de base 2 de e. 

Math.PI 

A constante JI. 

Math.S0RTl_2 

O numero 1 dividido pela raiz quadrada de 2. 
Math.S0RT2 

A raiz quadrada de 2. 

Fun$oes estaticas 

Math.absQ 

Calcula um valor absoluto. 

Math.acosQ 

Calcula um arco-cosseno. 

Math.asinQ 

Calcula um arco-seno. 

Math.atanQ 

Calcula um arco-tangente. 

Math.atan2() 

Calcula o angulo do eixo X ate um ponto. 
Math.ceilQ 

Arredonda um numero para cima. 

Math.cos() 

Calcula um cosseno. 

Math.exp() 

Calcula uma potencia de e. 

Math.floor() 

Arredonda um numero para baixo. 
Math.logO 

Calcula um logaritmo natural. 

Math.max() 

Retorna o maior de do is numeros. 
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Math.min() 

Retorna o menor de dois numeros. 

Math.pow() 

Calcula x! 

Math.random() 

Calcula um numero aleatorio. 

Math, round() 

Arredonda para o inteiro mais proximo. 

Math.sin() 

Calcula um seno. 

Math.sqrtQ 

Calcula uma raiz quadrada. 

Math.tanQ 

Calcula uma tangente. 

Descri^ao 

Math e um objeto que define propriedades que se referem a fun (joes e constantes matematicas uteis. 
Essas fun (joes e constantes sao chamadas com sintaxe como segue: 
y = Math.sin(x); 

area = radius * radius * Math.PI; 

Math nao e uma classe de objetos, como Date e String. Nao existe uma construtora Math () e funtjoes 
como Math, sin () sao apenas fun (joes e nao metodos que operam em um objeto. 

Consultetambem 

Number 

Math.absO 

calcula um valor absolute 

Sinopse 

Math.abs(x) 

Argumentos 

Qualquer numero. 

Retorna 

O valor absoluto de x. 
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Math.acosO 

calcula um arco-cosseno 

Sinopse 

Math.acos(x) 

Argumentos 

Um numero entre -1,0 e 1,0. 

Retorna 

O arco-cosseno (ou cosseno inverso) do valor x especificado. Esse valor de retorno esta entre 0 e K 
radianos. 

Math.asinO 

calcula um arco-seno 

Sinopse 

Math.asin(x) 

Argumentos 

Um numero entre -1,0 e 1,0. 

Retorna 

O arco-seno do valor x especificado. Esse valor de retorno esta entre -n/2 e n/2 radianos. 

Math.atanQ 

calcula um arco-tangente 

Sinopse 

Math.atan(x) 

Argumentos 

Qualquer numero. 

Retorna 

O arco-tangente do valor x especificado. Esse valor de retorno esta entre -n/2 e n/2 radianos. 
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Math.atan2() 

calcula o angulo do eixo X ate um ponto 

Sinopse 

Math.atan2(y, x) 

Argumentos 

y 

A coordenada Y do ponto. 


A coordenada X do ponto. 

Retorna 

Um valor entre -n e K radianos especificando o angulo no sentido anti-horario 
tivo e o ponto (x, y ). 





Descri^ao 

A funijao Math.atan2() calcula o arco-tangente da relaqao y/x. O argumento y pode ser considerado 
a coordenada Y (ou “eleva^ao”) de um ponto e o argumento x pode ser considerado a coordenada X 
(ou “serie”) do ponto. Observe a ordem incomum dos argumentos dessa fun^ao: a coordenada Y e 
passada antes da coordenada X. 


Math.ceilO 

arredonda um numero para cima 

Sinopse 

Math.ceil(x) 

Argumentos 

Qualquer valor ou expressao numerica. 

Retorna 

O inteiro mais proximo, maior ou igual a x. 

Descri^ao 

Math.ceil() calcula a funfao teto - isto e, retorna o valor inteiro mais proximo que seja maior ou 
igual ao argumento da funfao. Math.ceilO difere de Math.round() pois sempre arredonda para cima, 
em vez de arredondar para cima ou para baixo ate o inteiro mais proximo. Note tambem que Math. 
ceil() nao arredonda niimeros negativos para niimeros negativos maiores; ela os arredonda para 
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Exemplo 

a = Math.ceil(l.99); 
b = Math.ceil(i.Oi); 
c = Math.ceil(l.O); 
d = Math.ceil(-1.99); 


// 0 resultado e 2.0 
// 0 resultado e 2.0 
// 0 resultado e 1.0 
// 0 resultado e -1.0 


Math.cosO 

calcula um cosseno 

Sinopse 

Math.cos(x) 

Argumentos 


Um angulo, medido em radianos. Para converter graus em radianos, multiplique o valor em 
graus por 0,017453293 (2it/360). 

Retorna 

O cosseno do valor x especiflcado. Esse valor de retorno esta entre -1,0 e 1,0. 


Math.E 

a constante matematica e 

Sinopse 

Math.E 

Descri^ao 

Math.E e a constante matematica e, a base do logaritmo natural, cujo valor aproximado e 2,71828. 


Math.expO 

calcula e x 

Sinopse 

Math.exp(x) 

Argumentos 

Um valor ou expressao numerica a ser usado como expoente. 

Retorna 

e, e elevado a potencia do expoente x especiflcado, onde e e a base do logaritmo natural, cujo valor 
aproximado e 2,71828. 
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Math.floorQ 

arredonda urn numero para baixo 

Sinopse 

Math.floorQ) 

Argumentos 


Qualquer valor ou expressao numerica. 

Retorna 

O inteiro mais proximo, menor ou igual a x. 

Descri^ao 

Math.floor() calcula a fun^ao piso; em outras palavras, retorna o valor inteiro 
ou igual ao argumento da funQo. 



proximo menor 


Math.floorQ arredonda um valor em ponto flutuante para baixo, ate o inteiro mais proximo. Esse 
comportamento e diferente do de Math.round (), que arredonda para cima ou para baixo, ate o inteiro 
mais proximo. Note tambem que Math.floorQ arredonda numeros negativos para baixo (isto e, para 
serem mais negativos) e nao para cima (isto e, mais proximos de zero). 


Exemplo 

a = Math.floorQ.99); 
b = Math.floorQ.01); 
c = Math.floor(l.O); 
d = Math.floor(-l.Ol); 


// 0 resultado e 1.0 
// 0 resultado e 1.0 
// 0 resultado e 1.0 
// 0 resultado e -2.0 


Math. LN10 

a constante matematica logJO 

Sinopse 

Math.LN10 

Descri^ao 

Math.LNio e log f 10, o logaritmo natural de 10. O valor aproximado dessa constante e 
2,3025850929940459011. 

Math.LN2 

a constante matematica log e 2 

Sinopse 

Math.LN2 
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Descri^ao 

Math. LN2 e log f 2, o logaritmo natural de 2. O valor aproximado dessa constante e 

0,69314718055994528623. 

Math.logO 

calcula um logaritmo natural 

Sinopse 

Math.log(x) 

Argumentos 

Qualquer valor ou expressao numerica maior do que zero. 

Retorna 

O logaritmo natural de x. 

Describe) 

Math.logO calcula log f x, o logaritmo natural de seu argumento. O argumento deve ser maior do 

Voce pode calcular os logaritmos de base 10 e de base 2 de um numero com as seguintes formulas: 

log IO " = log 10 e • log/ 
log/ = log/ • log/ 

Essas formulas se traduzem nas seguintes fun^oes JavaScript: 
function loglO(x) { return Math.LOClOE * Math.log(x); } 
function log2(x) { return Math.L0G2E * Math.log(x); } 

Math. LOG 10E 

a constante matematica log 10 e 

Sinopse 

Math.LOGlOE 

Descri^ao 

Math.LOGlOE e log,,/, o logaritmo de base 10 da constante e. O valor aproximado dessa constante e 
0,43429448190325181667. 

Math.L0G2E 


a constante matematica log 2 e 
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Sinopse 

Math.L0C2E 

Descri^ao 

Math.L0G2E e log 2 ', o logaritmo de base 2 da constante e. O valor aproximado dessa constante e 

1,442695040888963387. 


Math.maxO 

Retoma o maior argumento 

Sinopse 

Math.max(args...) 

Argumentos 

args... 

Zero ou mais valores. 



Retorna 

O maior dos argumentos. Retorna -Infinity caso nao haja argumentos. Retorna NaN se qualquer 
um dos argumentos e NaN ou um valor nao numerico que nao pode ser convertido em um numero. 


Math.minO 

retorna o menor argumento 

Sinopse 

Math.min (args ...) 

Argumentos 

args... 

Qualquer quantidade de argumentos. 

Retorna 

O menor dos argumentos especiflcados. Retorna Infinity caso nao haja argumentos. Retorna NaN se 
qualquer argumento e NaN ou e um valor nao numerico que nao pode ser convertido em um numero. 


Math.PI 

a constante matematica n 

Sinopse 

Math.PI 
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Descri^ao 

Math.PI e a constante K (ou pi), a rela?ao da circunferencia de um cfrculo por seu diametro. O valor 
aproximado dessa constante e 3,14159265358979. 

Math.powO 

calculax*' 

Sinopse 

Math.pow(x, y) 

Argumentos 

O numero a ser elevado a uma potencia. 

y 

A potencia a que x deve ser elevado. 

Retorna 

x elevado a potencia y, x! 

Descri^ao 

Math. pow( ) calcula x elevado a potencia y. Qualquer valor de x e y pode ser passado para Math. pow(). 
Contudo, se o resultado e um numero imaginario ou complexo, Math.pow() retorna NaN. Na pratica, 
isso significa que, se x e negativo, y deve ser um inteiro positivo ou negativo. Lembre-se tambem 
de que expoentes maiores podem facilmente causar estouro em ponto flutuante e retornar o valor 
Infinity. 

Math.randomO 

retorna um numero pseudoaleatorio 

Sinopse 

Math.randomO 

Retorna 

Um numero pseudoaleatorio maior ou igual a 0,0 e menor do que 1,0. 

Math.roundO 

arredonda para o inteiro mais proximo 

Sinopse 

Math.round(x) 
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Argumentos 


Qualquer niimero. 

Retorna 

O inteiro mais proximo de x. 


Descri^ao 

Math.round() arredonda seu argumento para cima ou para baixo, ate o inteiro mais proximo. Arre- 
donda 0,5 para cima. Por exemplo, arredonda 2,5 para 3 e -2,5 para -2. 

Math.sinO 

calcula urn seno 



Sinopse 

Math.sin(x) 

Argumentos 


Um angulo, em radianos. Para converter graus em radianos, multiplique por 0,017453293 
(271/360). 

Retorna 

O seno de x. Esse valor de retorno esta entre -1,0 e 1,0. 


Math.sqrtO 

calcula uma raiz quadrada 

Sinopse 

Math.sqrt(x) 

Argumentos 

Um valor numerico maior ou igual a zero. 

Retorna 

A raiz quadrada de x. Retorna NaN sexe menor do que zero. 

Descri^ao 

Math.sqrtO calcula a raiz quadrada de um niimero. Note, contudo, que e possivel calcular raizes 
arbitrarias de um niimero com Math.powQ. Por exemplo: 
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Math.cuberoot = function(x){ return Math.pow(x,1/3); } 
Math.cuberoot(8); // Retorna 2 


Math.SQRT1_2_ 

a constante matematica 1/V2 

Sinopse 

Math.S0RTl_2 

Descri^ao 

Math.S0RTi_2 e 1/V2, a recfproca da raiz quadrada de 2. O valor aproximado dessa constante e 
0,7071067811865476. 

Math.SQRT2_ 

a constante matematica t/2 

Sinopse 

Math.S0RT2 

Descri^ao 

Math. S0RT2 e a constante V2, a raiz quadrada de 2. O valor aproximado dessa constante e 

1,414213562373095. 

Math.tanO 

calculaumatangente 

Sinopse 

Math.tan(x) 

Argumentos 

Um angulo, medido em radianos. Para converter graus em radianos, multiplique o valor em 
graus por 0,017453293 (2n/360). 

Retorna 

A tangente do angulo x especificado. 

NaN 


a propriedade not-a-number 
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Sinopse 

NaN 

Descri^ao 

NaN e uma propriedade global que se refere ao valor numerico espedal not-a-number. A propriedade NaN 
nao e enumerada por lafos for/in e nao pode ser exclufda com o operador delete. Note que NaN nao e 
uma constante e pode ser configurada com qualquer outro valor, algo que voce deve ter o cuidado de 

Para determinar se um valor nao e um niimero, use isNaNQ, pois NaN e sempre comparado como 
desigual a qualquer outro valor, incluindo ele mesmo! 

Consulte tambem 

Infinity, isNaN(), Number.NaN 

Number 

suporte para numeros Object Number 

Construtora 

new Number {valor) 

Number (valor) 

Argumentos 

valor 

O valor numerico do objeto Number que esta sendo criado ou um valor a ser convertido em 
um numero. 


Retorna 

Quando Number() e usada como construtora com o operador new, retorna um objeto Number recente- 
mente construfdo. Quando Number () e chamada como funijao sem o operador new, converte seu argu- 
mento em um valor numerico primitivo e retorna esse valor (ou NaN, caso a conversao tenha falhado). 

Constantes 

Number.MAX_VALUE 

O maior numero representavel. 

Number.MIN_VALUE 

O menor numero representavel. 

Number.NaN 

Valor not-a-number. 

Number.NEGATIVE_INFINITY 

Valor infinito negativo; retornado em caso de estouro. 
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Number.POSITIVE_INFINITY 

Valor infinito; retornado em caso de estouro. 

Metodos 

toString() 

Converte um numero em uma string usando uma raiz (base) especificada. 
toLocaleString() 

Converte um numero em uma string usando conven^oes locais de formata^ao de numero. 
toFixedQ 

Converte um numero em uma string que contem um numero especificado de digitos apos a 
casa decimal. 
toExponentialQ 

Converte um numero em uma string usando nota^ao exponencial com o numero especificado 
de digitos apos a casa decimal. 
toPrecisionQ 

Converte um numero em uma string usando o numero especificado de digitos significativos. 
Usa nota^ao exponencial ou em ponto fixo, dependendo do tamanho do numero e do numero 
de digitos significativos especificados. 
valueOfQ 

Retorna o valor numerico primitivo de um objeto Number. 

Descri^ao 

Numeros sao um tipo de dados primitivo basico em JavaScript. A linguagem tambem suporta o ob¬ 
jeto Number, que e um objeto empacotador em torno de um valor numerico primitivo. JavaScript 
converte automaticamente entre as formas primitiva e de objeto, conforme for necessario. Voce 
pode criar um objeto Number explicitamente com a construtora Number(), embora raramente haja 
necessidade disso. 

A construtora Number () tambem pode ser usada sem o operador new, como uma fun^ao de conversao. 
Quando chamada dessa maneira, ela tenta converter seu argumento em um numero e retorna o 
valor numerico primitivo (ou NaN) resultante da conversao. 

A construtora Number () tambem e usada como espa^o reservado para cinco constantes numericas 
uteis: o maior e o menor numeros representaveis, infinito positivo e negativo, e o valor especial NaN. 
Note que esses valores sao propriedades da propria fun^ao construtora Number () e nao dos objetos 
Number individuals. Por exemplo, voce pode usar a propriedade MAX_VALUE como segue: 

var biggest = Number.MAX_VALUE 
mas nao assim: 

var n = new Number(2); 
var biggest = n.MAX_VALUE 

Em contraste, toStringQ e outros metodos do objeto Number sao metodos de cada objeto Number 
e nao da fun^ao construtora NumberQ. Conforme mencionado anteriormente, JavaScript converte 
automaticamente de valores numericos primitivos para objetos Number quando necessario. Isso 
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significa que voce pode usar os metodos de Number com valores numericos primitivos e tambem 
com objetos Number, 
var value = 1234; 
var binary_value = n.toString(2); 

Consulte tambem 

Infinity, Math, NaN 

Number.MAX VAl.UE 

0 valor numerico maximo 

Sinopse 

Number.MAXVALUE 

Descri^ao 

Number.MAX_VALUE e o maior numero representavel em JavaScript. Seu valor e aproximadamente 
1,791+308. 

Number.MIN VALUE 

0 valor numerico minimo 

Sinopse 

Number.MIN_VALUE 

Descri^ao 

Number.MIN_VALUE e o menor (mais proximo a zero, nao o mais negativo) numero representavel em 
JavaScript. Seu valor e aproximadamente 5E-324. 


Number.NaN 

0 valor especial not-a-number 

Sinopse 

Number.NaN 

Descri^ao 

Number.NaN e um valor especial indicando que o resultado de alguma opera?ao matematica (como 
extrair a raiz quadrada de um numero negativo) nao e um numero. parselntQ e parseFloatQ re- 
tornam esse valor quando nao conseguem analisar a string especificada, sendo que voce pode usar 
Number.NaN de maneira semelhante para indicar uma condi?ao de erro para alguma funqao que nor- 
malmente retorna um numero valido. 
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JavaScript imprime o valor de Number.NaN como NaN. Note que o valor NaN sempre e comparado como 
diferente de qualquer outro numero, incluindo o proprio NaN. Assim, voce nao pode verificar o valor 
not-a-number comparando com Number.NaN; em vez disso, use a fun910 isNaN(). Em ECMAScript 
vl e posteriores, voce tambem pode usar a propriedade global predefmida NaN, em vez de Number. NaN. 

Consulte tambem 

isNaNQ, NaN 

Number.NEGATIVEJNFINITY 

infinito negativo 

Sinopse 

Number.NEGATIVE_INFINITY 

Descri^ao 

Number.NEGATIVE_INFINITY e um valor numerico especial retornado quando uma opera^ao aritmeti- 
ca ou funjo matematica gera um valor negativo maior do que o maior numero representavel em 
JavaScript (isto e, mais negativo do que -Number.MAX_VALUE). 

JavaScript exibe o valor NEGATIVE_INFINITY como -Infinity. Esse valor se comporta matematicamen- 
te como infinito; por exemplo, qualquer coisa multiplicada por infinito e infinito e qualquer coisa 
dividida por infinito e zero. Em ECMAScript vl e posteriores, voce tambem pode usar -Infinity, 
em vez de Number.NEGATIVEJNFINITY. 

Consulte tambem 

Infinity, isFiniteQ 

Number.POSITIVEJNFINITY 

infinite 

Sinopse 

Number.POSITIVEJNFINITY 

Descri^ao 

Number.POSITIVEJNFINITY e um valor numerico especial retornado quando uma operajo aritme- 
tica ou funqao matematica estoura ou gera um valor maior do que o maior numero representavel 
em JavaScript (isto e, maior do que Number.MAX_VALUE). Note que quando os numeros causam um 
“estouro negativo” ou se tornam menores do que Number.MIN_VALUE, JavaScript os converte em zero. 

JavaScript exibe o valor POSITIVE JNFINITY como Infinity. Esse valor se comporta matematicamente 
como infinito; por exemplo, qualquer coisa multiplicada por infinito e infinito e qualquer coisa di¬ 
vidida por infinito e zero. Em ECMAScript vl e posteriores, voce tambem pode usar a propriedade 
global predefinida Infinity, em vez de Number.POSITIVEJNFINITY. 
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Consulte tambem 

Infinity, isFinite() 


Number.toExponentialO 

formata um numero usando nota^ao exponencial 


Sinopse 

numero.toExponential(digitos) 

Argumentos 

digitos 

O numero de dfgitos que aparecem apos o ponto decimal. Pode ser um valor entre 0 e 20 (in¬ 
clusive) e opcionalmente as implementaffies podem suportar um intervalo de valores maior. Se 
esse argumento e omitido, sao usados tantos dfgitos quantos forem necessarios. 



Retorna 

Uma representa^ao de string de numero, em nota^ao exponencial, com um dfgito antes da casa deci¬ 
mal e digitos dfgitos apos a casa decimal. A parte fracionaria do numero e arredondada ou preen- 
chida com zeros, conforme for necessario, para que ele tenha o comprimento especificado. 


Lan^a 

RangeError 

Se digitos e pequeno demais ou grande demais. Valores entre 0 e 20 (inclusive) nao causam 
RangeError. As implementa^oes tambem podem suportar valores maiores e menores. 

TypeError 

Se esse metodo e chamado em um objeto que nao e Number. 


Exemplo 


var n = 12345.6789; 
n.toExponential(l); 
n.toExponential(s); 
n.toExponential(lO); 
n.toExponential(); 


// Retorna 1.2e+4 
// Retorna 1.23457e+4 
// Retorna 1.2345678900e+4 
// Retorna 1.23456789e+4 


Consulte tambem 

Number.toFixed(), Number.toLocaleString(), Number.toPrecisionQ, Number.toString() 


Number.toFixedO 

formata um numero usando notagao em ponto fixo 

Sinopse 

numero .toFixed(digitos) 
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Argumentos 

digitos 

O numero de digitos a aparecer apos o ponto decimal; pode ser um valor entre 0 e 20 (inclusi¬ 
ve) e opcionalmente as implementa^oes podem suportar um intervalo de valores maior. Se esse 
argumento e omitido, e tratado como 0. 

Retorna 

Uma representa^ao de string de numero que nao utiliza nota^ao exponencial e tern exatamente 
digitos digitos apos a casa decimal. O numero e arredondado, se necessario, e a parte fracionaria e 
preenchida com zeros, se necessario, para que tenha o comprimento especificado. Se numero e maior 
do que le+21, esse metodo simplesmente chama Number.toString() e retorna uma string em nota^ao 
exponencial. 

Lan^a 

RangeError 

Se digitos e pequeno demais ou grande demais. Valores entre 0 e 20 (inclusive) nao causam 
RangeError. As implementa^oes tambem podem suportar valores maiores e menores. 

TypeError 

Se esse metodo e chamado em um objeto que nao e Number. 


Exemplo 

var n = 12345.6789; 
n.toFixed(); 
n.toFixed(i); 
n.toFixed(6); 
(l.23e+20).toFixed(2); 
(i.23e-iO).toFixed(2) 


// Retorna 12346: note o arredondamento, sem parte fracionaria 
// Retorna 12345.7: note o arredondamento 
// Retorna 12345.678900: note os zeros adicionados 
// Retorna 123000000000000000000.00 
// Retorna 0.00 


Consulte tambem 

Number.toExponential(), Number.toLocaleString(), Number.toPrecision(), Number. 
toString() 


Number.toLocaleStringO 

converte um numero em uma string formatada de acordo com a localidade 

Sinopse 

numero. toLocaleString() 

Retorna 

Uma representa?ao de string do numero, dependente da implementa^ao, formatada de acordo com 
as convemjoes locais, as quais podem afetar coisas como os caracteres de pontua^ao utilizados para o 
ponto decimal e o separador de milhares. 
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Langa 

TypeError 

Se esse metodo e chamado em um objeto que nao e Number. 

Consulte tambem 

Number.toExponentialQ, Number.toFixed(), Number.toPrecision(), Number.toString() 


Number.toPrecisionO 

formata os dfgitos significativos de um numero 

Sinopse 

numero .toPrecision( precisao) 



Argumentos 

precisao 

O numero de dfgitos significativos a aparecer na string retornada. Pode ser um valor entre 1 e 
21 (inclusive). Opcionalmente, as implementagoes podem suportar valores de precisao maio- 
res e menores. Se esse argumento e omitido, o metodo toStringQ e usado, em vez de converter 
o numero para um valor de base 10. 


Retorna 

Uma representagao de string de numero contendo precisao dfgitos significativos. Se precisao e grande o 
bastante para incluir todos os dfgitos da parte inteira de numero, a string retornada usa notagao em ponto 
fixo. Caso contrario, e usada notagao exponential com um dfgito antes da casa decimal e precisao-1 df¬ 
gitos apos a casa decimal. O numero e arredondado ou preenchido com zeros, conforme for necessario. 


Langa 

RangeError 

Se digit os e pequeno demais ou grande demais. Valores entre 1 e 21 (inclusive) nao causam 
RangeError. As implementagoes tambem podem suportar valores maiores e menores. 

TypeError 

Se esse metodo e chamado em um objeto que nao e Number. 


Exemplo 

var n = 12345.6789; 

n.toPrecision(l); 

n.toPrecision(3); 

n.toPrecision(5); 

n.toPrecision(lO); 


// Retorna le+4 
// Retorna 1.23e+4 

// Retorna 12346: note o arredondamento 
// Retorna 12345.67890: note o zero adicionado 


Consulte tambem 

Number.toExponentialQ, Number.toFixed(), Number.toLocaleString(), Number.toStringQ 
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Number.toStringO 

converte um numero em uma string Anula Object.toStringO 

Sinopse 

numero. toString(raiz) 

Argumentos 

raiz 

Um argumento opcional especificando a raiz (ou base), entre 2 e 36, na qual o numero deve 
ser representado. Se for omitido, e usada a base 10. Note, entretanto, que a especifica^ao EC- 
MAScript permite a uma implementa^ao retornar qualquer valor, caso esse argumento seja 
especificado como qualquer valor diferente de 10. 


Retorna 

Uma representa^ao de string do numero, na base especificada. 

Lan;a 

TypeError 

Se esse metodo e chamado em um objeto que nao e Number. 

Descri^ao 

O metodo toStringQ do objeto Number converte um numero em uma string. Quando o argumen¬ 
to raiz e omitido ou e especificado como 10, o numero e convertido em uma string de base 10. 
Embora a especifica^ao ECMAScript nao exija que as implementa^oes aceitem quaisquer outros 
valores como raiz, todas as que estao em uso comum aceitam valores entre 2 e 36. 

Consulte tambem 

Number.toExponential(), Number.toFixed(), Number.toLocaleString(), Number.toPrecisionQ 

Number.valueOfO 

retorna o valor numerico primitivo Anula 0 bject.value 0 f() 

Sinopse 

numero. value0f() 

Retorna 

O valor numerico primitivo desse objeto Number. Raramente e necessario chamar esse metodo 
explicitamente. 

Lanqa 

TypeError 

Se esse metodo e chamado em um objeto que nao e Number. 





Referenda de JavaScript basica 793 


Consulte tambem 

Object.valueOf() 

Object 

uma superdasse que contem recursos de todos os objetos de JavaScript 

Construtora 

new Object() 
new Object(valor) 

Argumentos 

valor 

Esse argumento optional especifica um valor primitivo de JavaScript - um numero, valor bo- 
oleano ou string - a ser convertido em um objeto Number, Boolean ou String. 

Retorna 

Se nao e passado qualquer argumento valor, essa construtora retorna uma instancia de Object re- 
centemente criada. Se e especificado um argumento de valor primitivo, a construtora cria e retorna 
um objeto empacotador Number, Boolean ou String para o valor primitivo. Quando a construtora 
Object () e chamada como fun^ao, sem o operador new, se comporta exatamente como quando usada 
com o operador new. 

Propriedades 

constructor 

Uma referenda para a funQo JavaScript que foi a construtora do objeto. 

Metodos 

hasOwnProperty() 

Verifica se um objeto tern uma propriedade definida de modo local (nao herdada) com um 
nome especificado. 
isPrototypeOfQ 

Verifica se esse objeto e o prototipo de um objeto especificado. 
propertyIs Enumerable() 

Verifica se uma propriedade nomeada existe e se seria enumerada por um la^o for/in. 
toLocaleString() 

Retorna uma representa^ao de string localizada do objeto. A implementa^ao padrao desse me- 
todo simplesmente chama toStringQ, mas subclasses podem anula-lo para fornecer localizaqao. 
toString() 

Retorna uma representa^ao de string do objeto. A implementa^ao desse metodo fornecida 
pela classe Object e bastante generica e nao fornece muitas informafoes uteis. As subclasses 
de Object normalmente anulam esse metodo, definindo seus proprios metodos toStringQ, os 
quais produzem saida mais util. 
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valueOfQ 

Retorna o valor primitivo do objeto, se houver. Para objetos do tipo Object, esse metodo sim- 
plesmente retorna o proprio objeto. Subclasses de Object, como Number e Boolean, anulam 
esse metodo para retornar o valor primitivo associado ao objeto. 

Metodos estaticos 

Em ECMAScript 5, a construtora Object serve como espai;o de nomes para as seguintes fun^oes globais: 
Object.create() 

Cria um novo objeto com prototipo e propriedades especificados. 

Object.defineProperties() 

Cria ou configura uma ou mais propriedades de um objeto especificado. 

Object.defineProperty() 

Cria ou configura uma propriedade de um objeto especificado. 

Object. freezeQ 

Toma o objeto especificado imutavel. 

Object.getOwnPropertyDescriptor() 

Consulta os atributos da propriedade especificada do objeto especificado. 

Object.getOwnPropertyNames() 

Retorna um array com os nomes de todas as propriedades nao herdadas do objeto especifica¬ 
do, incluindo as propriedades nao enumeraveis. 

Object.getPrototypeOf() 

Retorna o prototipo do objeto especificado. 

Object.isExtensible() 

Determina se novas propriedades podem ser adicionadas no objeto especificado. 

Object. isFrozenQ 

Determina se o objeto especificado esta congelado. 

Object. isSealedQ 

Determina se o objeto especificado esta selado. 

Object.keys() 

Retorna um array com os nomes das propriedades enumeraveis nao herdadas do objeto espe¬ 
cificado. 

Object.preventExtensions() 

Impede uma futura adRao de propriedades no objeto especificado. 

Object.seal() 

Impede a adiqao de novas propriedades e a exclusao de propriedades existentes do objeto es¬ 
pecificado. 

Descri^ao 

A classe Object e um tipo de dados interno da linguagem JavaScript. Ela serve de superclasse para 
todos os outros objetos de JavaScript; portanto, os metodos e o comportamento da classe Object 
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sao herdados por todos os outros objetos. O comportamento basico dos objetos em JavaScript esta 
explicado no Capitulo 6. 

Alem da construtora Object () mostrada anteriormente, os objetos tambem podem ser criados e ini- 
cializados usando-se a sintaxe literal de Object, descrita na Se^ao 6.1. 

Consulte tambem 

Array, Boolean, Function, Function.prototype, Number, String; Capitulo 6 


Object.constructor 

a fun$ao construtora de um objeto 

Sinopse 

objeto .constructor 

Descri^ao 

A propriedade constructor de qualquer objeto e uma referenda para a funfao utilizada como cons¬ 
trutora desse objeto. Por exemplo, se voce cria um array a com a construtora ArrayQ, a.constructor 
e um objeto Array: 

a = new Array(l,2,3); // Cria um objeto 

a.constructor == Array // Avaliado como verdadeiro 

Um uso comum da propriedade constructor e na determina?ao do tipo de objetos desconhecidos. 
Dado um valor desconhecido, voce pode usar o operador typeof para determinar se e um valor pri¬ 
mitive ou um objeto. Se for um objeto, voce pode usar a propriedade constructor para determinar 
seu tipo. Por exemplo, a fun^ao a seguir determina se um valor dado e um array: 
function isArray(x) { 

return ((typeof x == "object") && (x.constructor == Array)); 

} 

Note, entretanto, que embora essa tecnica funcione para os objetos internos do nucleo de JavaScript, 
nao e garantido que funcione com objetos hospedeiros, como o objeto Window de JavaScript do 
lado do cliente. A implementa?ao padrao do metodo Object.toStringQ fornece outro modo de 
determinar o tipo de um objeto desconhecido. 

Consulte tambem 

Object.toString() 

Object.createO ECMAScripts 

cria um objeto com o prototipo e as propriedades especificados 

Sinopse 

Object.create(proto) 

Object.create(proto, desciitoies) 
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Argumentos 

proto 

O prototipo do objeto recentemente criado ou null. 
descritores 

Um objeto optional que mapeia nomes de propriedade em descritores de propriedade. 

Retorna 

Um objeto recentemente criado que herda de proto e tern as propriedades descritas por descritores. 

Lan^a 

TypeError 

Se proto nao e um objeto ou null, ou se descritores e especificado e faz Object.defineProper- 
ties() lan^ar TypeError. 

Descri^ao 

Object.create() cria e retorna um novo objeto com proto como prototipo. Isso significa que o novo 
objeto herda propriedades de proto. 

Se o argumento optional descritores e especificado, Object.createQ adiciona propriedades no novo 
objeto como se estivesse chamando Object.definePropertiesQ. Isto e, a chamada de dois argumen¬ 
tos de Object.create(p,d) e equivalente a: 

Object.defineProperties(Object.create(p), d); 

Consulte Object.definePropertiesQ para mais informa^oes sobre o argumento descritores e consulte 
Object .getOwnPropertyDescriptor () para ver uma explica$ao sobre os objetos descritores de propriedade. 

Note que esse nao e um metodo a ser chamado em um objeto: e uma funqtio global e voce deve 
passar um objeto para ela. 

Exemplo 

// Cria um objeto que tern propriedades proprias x e y e herda a propriedade z 
var p = Object.create({z:0}, { 

x: { value: 1, writable: false, enumerable:true, configurable: true}, 
y: { value: 2, writable: false, enumerable:true, configurable: true}, 

»J 

Consulte tambem 

Object.defineProperty(), Object.defineProperties(), Object.getOwnPropertyDescrip¬ 
tor (), Seqao 6.1, Secjao 6.7 

Object.definePropertiesO ECMAScripts 

cria ou configura varias propriedades de objeto 

Sinopse 

Object.defineProperties(o, descritores ) 
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Argumentos 

o 

O objeto no qual propriedades serao criadas ou configuradas. 
descritores 

Um objeto que mapeia nomes de propriedade em descritores de propriedade. 

Retorna 

O objeto o. 

Langa 

TypeError 

Se o nao e um objeto ou se qualquer uma das propriedades especificadas nao pode ser 
criada ou configurada. Essa fun^ao nao e atomica: ela pode criar ou configurar certas pro¬ 
priedades e, entao, lanfar um erro antes mesmo de tentar criar ou configurar outras pro¬ 
priedades. Consulte a Sefao 6.7 para ver uma lista de erros de configurafao de propriedade 
que podem causar TypeError. 

Descri^ao 

Object.defineProperti.es() cria ou configura no objeto o as propriedades nomeadas e descritas por 
descritores. Os nomes das propriedades em descritores sao os nomes das propriedades a serem 
criadas ou configuradas em o e os valores dessas propriedades sao os objetos descritores de proprieda¬ 
de que especificam os atributos das propriedades a serem criadas ou configuradas. 

Object.defineProperties () funciona de forma muito parecida com Object.defineProperty() - con¬ 
sulte essa fun^ao para obter mais detalhes. Consulte Object.getOwnPropertyDescriptorQ para mais 
informa^oes sobre objetos descritores de propriedade. 

Exemplo 

// Adiciona propriedades somente de leitura x e y em um objeto recentemente criado 
var p = Object.defineProperties({}, { 

x: { value: 0, writable: false, enumerable:true, configurable: true}, 
y: { value: 1, writable: false, enumerable:true, configurable: true}, 

}); 

Consulte tambem 

Object.create(), Object.defineProperty(), Object.getOwnPropertyDescriptor( ), Se^ao 6.7 

Object.definePropertyO ECMAScripts 

cria ou configura uma propriedade de objeto 

Sinopse 

Object.definePropertyfo, nome, desc) 
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Argumentos 

O objeto no qual uma propriedade sera criada ou configurada. 

nome 

O nome da propriedade a ser criada ou configurada. 

desc 

Um objeto descritor de propriedade descrevendo a nova propriedade ou as altera^oes feitas em 
uma propriedade ja existente. 


Retorna 

O objeto o. 

Lanqa 

TypeError 

Se o nao e um objeto ou se a propriedade nao pode ser criada (porque o nao pode ser esten- 
dido) ou configurada (porque ja existe e nao pode ser configurada, por exemplo). Consulte a 
Seqao 6.7 para ver uma lista dos erros de configura?ao de propriedade que podem fazer essa 
funijao lanijar TypeError. 


Descri^ao 

Object. defineProperty( ) cria ou configura a propriedade chamada nome do objeto o, usando o descri¬ 
tor de propriedade desc. Consulte Object .getOwnPropertyDescriptor( ) para ver uma explica?ao sobre 
os objetos descritores de propriedade. 

Se o ainda nao tern uma propriedade chamada nome, entao essa funpio simplesmente cria uma nova 
propriedade com os atributos e o valor especificados em desc. Se faltar propriedades em desc, os 
atributos correspondentes serao configurados como false ou undefined. 

Se nome e o nome de uma propriedade de o ja existente, Object.defineProperty() configura essa 
propriedade, alterando seu valor ou seus atributos. Nesse caso, desc so precisa conter os atributos a 
serem alterados: os atributos nao mencionados em desc nao serao alterados. 

Note que esse nao e um metodo a ser chamado em um objeto: e uma funpio global e voce deve 
passar um objeto para ela. 


Exemplo 


function constant(o, n, v) { 
Object.defineProperty(o, n, { 

} 


// Define uma constante o.n com valor v 
value: v, writable: false 
enumerable: true, configurablerfalse}); 


Consulte tambem 

Object.create(), Object.defineProperties(), Object.getOwnPropertyDescriptor (), Sepio 6.7 
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Object.freezeO ECMAScripts 

toma um objeto imutavel 

Sinopse 

Object.freeze(o) 

Argumentos 

o 

O objeto a ser congelado. 

Retorna 

O objeto do argumento o agora congelado. 

Descri^ao 

Object.freezeO torna o nao extensfvel (consulte Object.preventExtensionsQ) e torna todas as suas 
propriedades proprias nao configuraveis, como acontece com Object.seal(). Alem disso, contudo, 
tambem transforma em somente para leitura todas as propriedades de dados nao herdadas. Isso sig- 
nifica que novas propriedades nao podem ser adicionadas em o e que as propriedades existentes nao 
podem ser configuradas nem excluidas. Congelar um objeto e uma altera?ao permanente: uma vez 
congelado, o objeto nao pode ser descongelado. 

Note que Object.freezeO so configura o atributo writable de propriedades de dados. As proprie¬ 
dades que tern uma funqao setter definida nao sao afetadas. Note tambem que Object.freezeO nao 
afeta propriedades herdadas. 

Note que esse nao e um metodo a ser chamado em um objeto: e uma funijao global e voce deve 
passar um objeto para ela. 

Consulte tambem 

Object.defineProperty(), Object.isFrozen(), Object.preventExtensions(), Object.seal(), Se^ao 6.8.3 

Object.getOwnPropertyDescriptorO ECMAScripts 

consulta atributos de propriedade 

Sinopse 

Object.getOwnPropertyDescriptor(o, name) 

Argumentos 

O objeto que tera seus atributos de propriedade consultados. 

name 

O nome da propriedade (ou indice do elemento de array) a consultar. 
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Retorna 

Um objeto descritor de propriedade para a propriedade especificada do objeto especificado ou 
undefined, caso essa propriedade nao exista. 

Describe) 

Object .getOwnPropertyDescriptor() retorna um descritor de propriedade para a propriedade especifica¬ 
da do objeto especificado. Um descritor de propriedade e um objeto que descreve os atributos e o valor 
de uma propriedade. Consulte a subse^ao a seguir para ver os detalhes completos. Note que esse nao e 
um metodo a ser chamado em um objeto: e uma funcao global e voce deve passar um objeto para ela. 

Descritores de propriedade 

Um descritor de propriedade e um objeto normal de JavaScript que descreve os atributos (e, as vezes, 
o valor) de uma propriedade. Existem dois tipos de propriedades JavaScript. Uma propriedade de 
dados tern um valor e tres atributos: enumerable, writable e configurable. Uma propriedade de acesso 
tern um metodo getter e/ou setter, assim como os atributos enumerable e configurable. 

O descritor de uma propriedade de dados e como segue: 


{ 


writable: 

enumerable: 

configurable: 


/* qualquer valor de JavaScript */, 


/* verdadeiro ou falso */, 
/* verdadeiro ou falso */, 
/* verdadeiro ou falso */ 


} 

O descritor de uma propriedade de acesso e como segue: 

{ 


set: 

enumerable: 

configurable: 


get: 


/* funcao ou indefinido: substitui o valor da propriedade */, 
/* funcao ou indefinido: substitui o atributo writable */, 

/* verdadeiro ou falso */, 

/* verdadeiro ou falso */ 


} 


Consulte tambem 

Object.definePropertyQ, Se^ao 6.7 


Object.getOwnPropertyNamesQ 


ECMAScript 5 


retorna os nomes de propriedades nao herdadas 

Sinopse 


Object.getOwnPropertyNames(o) 


Argumentos 


o 


Um objeto. 
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Retorna 

Um array contendo os nomes de todas as propriedades nao herdadas de o, incluindo as propriedades 
nao enumeraveis. 

Descri^ao 

Object.getOwnPropertyNamesQ retorna um array contendo os nomes de todas as propriedades nao 
herdadas de o, incluindo as propriedades nao enumeraveis. Consulte Object.keys() para ver uma 
funpio que retorna apenas os nomes de propriedades enumeraveis. 

Note que esse nao e um metodo a ser chamado em um objeto: e uma funpio global e voce deve 
passar um objeto para ela. 

Exemplo 

Object.getOwnPropertyNames([]) // => ["length"]: "length" nao e enumeravel 

Consulte tambem 

Object.keys(), Se^ao 6.5 


Object.getPrototypeOfO ECMAScripts 

retorna o prototipo de um objeto 


Sinopse 

Object.getPrototypeOf(o) 

Argumentos 

o 

Um objeto. 

Retorna 

O objeto prototipo de o. 


Descri^ao 

Object.getPrototypeOfO retorna o prototipo de seu argumento. Note que essa e uma funpio global 
e voce deve passar um objeto para ela. Nao e um metodo chamado em um objeto. 


Exemplo 

var p = {}; 

Object.getPrototypeOf(p) 
var o = Object.create(p) 
Object.getPrototypeOf(o) 


// Um objeto normal 
// => Object.prototype 
// Um objeto que herda de p 
// => p 


Consulte tambem 

Object.createQ; Capitulo 6 
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Object.hasOwnPropertyO 

verifica se uma propriedade e herdada 


Sinopse 

objeto. hasOwnProperty (nomepiop) 

Argumentos 

nomepiop 

Uma string contendo o nome de uma propriedade de objeto. 

Retorna 

true se objeto tern uma propriedade nao herdada com o nome especificado por nomepiop; false se 
objeto nao tern uma propriedade com o nome especificado ou se herda essa propriedade de seu 
objeto prototipo. 


Descri^ao 

Conforme explicado no Capitulo 9, os objetos de JavaScript podem ter suas propriedades proprias e 
tambem podem herdar propriedades de seus objetos prototipos. O metodo hasOwnProperty( ) fornece 
uma maneira de distinguir entre propriedades herdadas e propriedades locais nao herdadas. 


Exemplo 

var o = new Object()} 

o.hasOwnProperty("x"); 
o. hasOwnProperty("y"); 
o.hasOwnProperty("toString"); 


// Cria um objeto 

// Define uma propriedade local nao herdada 
// Retorna true: x e uma propriedade local de o 
// Retorna false: o nao tern uma propriedade y 
// Retorna false: a propriedade toString e herdada 


Consulte tambem 

Function.prototype , Object.propertylsEnumerableQ; Capitulo 9 


Object.isExtensibleO ECMAScripts 

novas propriedades podem ser adicionadas em um objeto? 

Sinopse 

Object.isExtensible(o) 

Argumentos 

O objeto cuja capacidade de ser estendido sera verificada. 

Retorna 

true se o objeto pode ser estendido com novas propriedades ou false, se nao pode. 
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Descri^ao 

Um objeto e extensfvel (ou pode ser estendido) se pode ter novas propriedades adicionadas. Todos os 
objetos podem ser estendidos quando sao criados e continuam assim, a nao ser que sejam passados 
para Object.preventExtensionsQ, Object.sealQ ou Object.freezeQ. 

Note que esse nao e um metodo a ser chamado em um objeto: e uma funipao global e voce deve 
passar um objeto para ela. 


Exemplo 

var o = {}; // 
Object.isExtensible(o) // 
Object.preventExtensions(o); // 
Object.isExtensible(o) // 


Comeca com um objeto recentemente criado 
=> verdadeiro: pode ser estendido 
Nao pode mais ser estendido 
=> falso: agora ele nao pode ser estendido 


Consultetambem 

Object.isFrozenO, Object.isSealedQ, Object.preventExtensionsQ, Serpao 6.8.3 


Object.isFrozenO ECMAScripts 

um objeto e imutavel? 

Sinopse 

Object.isFrozen(o) 

Argumentos 

O objeto a ser verificado. 

Retorna 

true se o esta congelado e e imutavel ou false, caso contrario. 

Descri^ao 

Um objeto esta congelado se todas as suas propriedades nao herdadas (exceto aquelas com metodos 
setter) sao somente para leitura e se esta selado. Um objeto esta selado se nenhuma propriedade nova 
(nao herdada) pode ser adicionada nele e nenhuma propriedade ja existente (nao herdada) pode ser 
excluida dele. Object.isFrozenO testa se seu argumento esta congelado ou nao. Uma vez congelado, 
um objeto nao pode ser descongelado. 

O modo normal de congelar um objeto e passa-lo para Object.freeze(). Tambem e possivel congelar 
um objeto passando-o para Object.preventExtensionsQ e depois usando Object.definePropertyQ 
para tornar todas as suas propriedades somente para leitura e impossiveis de excluir. 

Note que esse nao e um metodo a ser chamado em um objeto: e uma funijao global e voce deve 
passar um objeto para ela. 
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Consulte tambem 

Object.defineProperty(), Object.freezeQ, Object.isExtensible(), Object.isSealed(), Ob- 
ject.preventExtensions(), Object.seal(), Se^ao 6.8.3 


Object.isPrototypeOfO 

um objeto e o prototipo de outro? 

Sinopse 

objeto .isPrototypeOf(o) 

Argumentos 

o 

Qualquer objeto. 

Retorna 


true se objeto e o prototipo de o; false se o nao e um objeto ou se objeto nao e o prototipo de o. 

Describe) 

Conforme explicado no Capitulo 9, os objetos de JavaScript herdam propriedades de seus objetos 
prototipos. O prototipo de um objeto e referido pela propriedade prototype da funcao construtora 
que cria e inicializa o objeto. O metodo isPrototypeOf () fornece uma maneira de determinar se um 
objeto e o prototipo de outro. Essa tecnica pode ser usada para determinar a classe de um objeto. 

Exemplo 

var o = new ObjectQ; // Cria um objeto 

Object.prototype.isPrototypeOf(o) // verdadeiro: o e um objeto 

Function.prototype.isPrototypeOf(o.toString); // verdadeiro: toString e uma funcao 
Array.prototype.isPrototypeOf([lj2,3]); // verdadeiro: [1,2,3] e um array 

// Aqui esta um modo de fazer um teste semelhante 

(o.constructor == Object); // verdadeiro: o foi criado com a construtora ObjectQ 

(o.toString.constructor == Function); // verdadeiro: o.toString e uma funcao 

// Os proprios objetos prototipos tern prototipos. A chamada a seguir 
// retorna true, mostrando que os objetos funqao herdam propriedades 
// de Function.prototype e tambem de Object.prototype. 

Object.prototype.isPrototypeOf(Function.prototype); 

Consulte tambem 

Function.prototype, Object.constructor; Capitulo 9 


Object.isSealedO ECMAScripts 

propriedades podem ser adicionadas ou exduidas de um objeto? 

Sinopse 

Object.isSealed(o) 
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Argumentos 

o 

O objeto a ser verificado. 

Retorna 

true se o esta selado ou false, caso contrario. 

Descri^ao 

Um objeto esta selado se nenhuma propriedade nova (nao herdada) pode ser adicionada nele e ne- 
nhuma propriedade ja existente (nao herdada) pode ser exclmda dele. Object. isSealed () testa se seu 
argumento esta selado ou nao. Uma vez selado, um objeto nao pode deixar de estar selado. O modo 
normal de selar um objeto e passa-lo para Object.sealQ ou Object.freezeQ. Tambem e possfvel 
selar um objeto passando-o para Object.preventExtensionsQ e depois usar Object.definePropertyQ 
para tornar todas as suas propriedades impossiveis de excluir. 

Note que esse nao e um metodo a ser chamado em um objeto: e uma funijao global e voce deve 
passar um objeto para ela. 

Consulte tambem 

Object.defineProperty(), Object.freezeQ, Object.isExtensibleQ, Object.isFrozen(), 
Object.preventExtensionsQ, Object.seal(), Se$ao 6.8.3 

Object.keysO ECMAScripts 

retorna nomes de propriedades proprias enumeraveis 

Sinopse 

Object.keys(o) 

Argumentos 

o 

Um objeto. 

Retorna 

Um array contendo os nomes de todas as propriedades proprias enumeraveis (nao herdadas) de o. 

Descri^ao 

Object.keysO retorna um array de nomes de propriedade do objeto o. O array so inclui os nomes 
de propriedades que sao enumeraveis e definidas diretamente em o: propriedades herdadas nao sao 
inclufdas. (Consulte Object.getOwnPropertyNames() para ver uma maneira de obter os nomes de pro¬ 
priedades nao enumeraveis.) Os nomes de propriedade aparecem no array retornado na mesma 
ordem em que seriam enumeradas por um la^o for/in. 

Note que esse nao e um metodo a ser chamado em um objeto: e uma fun^ao global e voce deve 
passar um objeto para ela. 
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Exemplo 

Object.keys({x:l, y:2}) // => ["x", "y"| 

Consulte tambem 

Object.getOwnPropertyNames(), Seqao 5.5.4, Se^ao 6.5 


Object.preventExtensionsO ECMAScript 5 

nao permite novas propriedades em um objeto 

Sinopse 

Object.preventExtensions(0) 

Argumentos 

O objeto que tera seu atributo extensible configurado 

Retorna 

O objeto argumento o. 

Descri^ao 

Object.preventExtensionsO configura o atributo extensible de o como false para que nenhuma pro- 
priedade nova possa ser adicionada a ele. Essa e uma altera?ao permanente: uma vez que um objeto 
se torne nao extensivel, nao pode se tornar extensivel novamente. 

Note que Object. preventExtensionsQ nao afeta o encadeamento de prototipos e que um objeto nao 
extensivel ainda pode ganhar novas propriedades herdadas. 

Note que esse nao e um metodo a ser chamado em um objeto: e uma funijao global e voce deve 
passar um objeto para ela. 

Consulte tambem 

Object.freezeQ, Object.isExtensibleQ, Object.seal(), Se$ao 6.8.3 


Object.propertylsEnumerableO 

a propriedade sera vista por um la$o for/in? 

Sinopse 

objeto. propertylsEnumerable(nomeprop) 

Argumentos 

nomeprop 

Uma string contendo o nome de uma propriedade de objeto. 
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Retorna 


true se objeto tem uma propriedade nao herdada com o nome especificado por nomepiop e se essa 
propriedade e enumeravel, ou seja, seria enumerada por um la^o for/in em objeto. 


Descri^ao 

A instnnjao for/in itera pelas propriedades enumeraveis de um objeto. Contudo, nem todas as 
propriedades de um objeto sao enumeraveis: as propriedades adicionadas em um objeto por codigo 
JavaScript sao enumeraveis, mas as propriedades predefinidas (como os metodos) de objetos inter- 
nos normalmente nao sao enumeraveis. O metodo propertylsEnumerableQ fornece uma maneira de 
distinguir entre propriedades enumeraveis e nao enumeraveis. Note, entretanto, que a especificacQo 
ECMAScript diz que propertylsEnumerableQ nao examina o encadeamento de prototipos, ou seja, 
so funciona para propriedades locais de um objeto e nao fornece uma maneira de testar a capacidade 
de propriedades herdadas serem enumeradas. 

Exemplo 

var o = new ObjectQ; // Cria um objeto 

o.x = 3.14; // Define uma propriedade 

o.propertyIsEnumerable("x"); // verdadeiro: a propriedade x e local e enumeravel 

o.propertyIsEnumerable("y"); // falso: o nao tem uma propriedade y 

o.propertyIsEnumerable("toString"); // falso: a propriedade toString e herdada 
Object.prototype.property!sEnumerable("toString"); // falso: nao enumeravel 



Consulte tambem 

Function.prototype, Object.hasOwnPropertyQ; Capitulo 6 


Object.sealO ECMAScripts 

impede a adi$ao ou exdusao de propriedades 

Sinopse 

Object.seal(o) 

Argumentos 

o 

O objeto a ser selado. 

Retorna 

O objeto argumento o agora selado. 

Descri^ao 

Object.sealQ torna o nao extensivel (consulte Object.preventExtensionsQ) e torna todas as suas 
propriedades proprias nao configuraveis. Isso tem o efeito de impedir a adifao de novas propriedades 
e a exclusao de propriedades ja existentes. Selar um objeto e uma opera^ao permanente: uma vez 
selado, um objeto nao pode deixar de estar selado. 
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Note que Object. seal( ) nao transforma as propriedades em somente para leitura; para isso, consulte 
Object.freezeQ. Note tambem que Object.seal() nao afeta propriedades herdadas. Se um objeto 
selado tem um objeto nao selado em seu encadeamento de prototipos, entao propriedades herdadas 
podem ser adicionadas ou removidas. 

Note que esse nao e um metodo a ser chamado em um objeto: e uma funpio global e voce deve 
passar um objeto para ela. 

Consulte tambem 

Object.defineProperty(), Object.freezeQ, Object.isSealed(), Object.preventExten- 
sionsQ, Sepio 6.8.3 

Object.toLocaleStringO 

retorna a representagao de string localizada de um objeto 

Sinopse 

objeto. toString() 

Retorna 

Uma string representando o objeto. 

Descri^ao 

Esse metodo se destina a retornar uma representapio de string do objeto, localizada conforme for 
apropriado para a localidade corrente. O metodo toLocaleString() padrao fornecido pela classe 
Object simplesmente chama o metodo toStringQ e retorna a string nao localizada que ele retorna. 
Note, entretanto, que outras classes, incluindo Array, Date e Number, definem suas proprias versoes 
desse metodo para fazer conversoes de string localizadas. Ao definir suas proprias classes, talvez voce 
queira anular esse metodo tambem. 

Consulte tambem 

Array.toLocaleString(), Date.toLocaleString(), Number.toLocaleString(), 
Object.toString() 

Object.toStringO 

define a representa^ao de string de um objeto 

Sinopse 

objeto. toStringQ 

Retorna 

Uma string representando o objeto. 
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Descri^ao 

O metodo toString() nao e chamado explicitamente muitas vezes em seus programas JavaScript. 
Em vez disso, esse metodo e definido em seus objetos e o sistema o chama quando precisa converter 
um objeto em uma string. 

O sistema JavaScript chama o metodo toStringQ para converter um objeto em uma string quando 
o objeto e usado em um contexto de string. Por exemplo, um objeto e convertido em uma string 
quando e passado para uma funipao que espera um argumento de string: 
alert(my_object); 

Do mesmo modo, os objetos sao convertidos em strings quando sao concatenados em strings com 
o operador +: 

var msg = 'My object is: ' + my_object; 

O metodo toString() e chamado sem argumentos e deve retornar uma string. Para ser util, a string 
retornada deve de algum modo ter por base o valor do objeto para o qual o metodo foi chamado. 

Ao se definir uma classe personalizada em JavaScript, e considerada uma boa pratica definir um me¬ 
todo toString() para a classe. Se voce nao fizer isso, o objeto vai herdar o metodo toStringQ padrao 
da classe Object. Esse metodo padrao retorna uma string da forma: 

[objectclosse] 

onde classe e a classe do objeto - um valor como “Object”, “String”, “Number”, “Function”, “Win¬ 
dow”, “Document”, etc. Ocasionalmente, esse comportamento do metodo toStringQ padrao e util 
para determinar o tipo ou a classe de um objeto desconhecido. Contudo, como a maioria dos ob¬ 
jetos tem uma versao personalizada de toStringQ, voce deve chamar o metodo Object.toStringQ 
explicitamente em um objeto o, com codigo como o seguinte: 

Object.prototype.toString.apply(o); 

Note que essa tecnica de identificafao de objetos desconhecidos so funciona para objetos internos. 
Se voce definir sua propria classe de objetos, ela tera uma classe “Object”. Nesse caso, pode usar a 
propriedade Object.constructor para obter mais informafoes sobre o objeto. 

O metodo toStringQ pode ser muito util na depura^ao de programas JavaScript - ele permite im- 
primir objetos e ver seus valores. Por esse simples motivo, e uma boa ideia definir um metodo toS- 
tring( ) para cada classe de objetos que voce criar. 

Embora o metodo toStringQ normalmente seja chamado de forma automatica pelo sistema, existem 
ocasioes em que voce mesmo pode chama-lo. Por exemplo, talvez voce queira fazer uma conversao 
explicita de um objeto em uma string, em uma situa^ao onde JavaScript nao faz isso automaticamente: 

y = Math.sqrt(x); // Calcula um numero 
ystr = y.toStringQ; // Converte-o em uma string 

Note nesse exemplo que os niimeros tem um metodo toStringQ interno que pode ser usado para 
for^ar uma conversao. 

Em outras circunstancias, voce pode optar por usar uma chamada de toStringQ mesmo em um 
contexto onde JavaScript faz a conversao automaticamente. Usar toStringQ explicitamente pode 
ajudar a tornar seu codigo mais claro: 
alert(my_obj .toStringQ); 
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Consulte tambem 

Object.constructor, Object.toLocaleString(), Object.valueOfQ 

Object.valueOfO 

o valor primitivo do objeto especificado 

Sinopse 

objeto. valueOf() 

Retorna 

O valor primitivo associado a objeto, se houver. Se nao houver um valor associado a objeto, retorna 
o proprio objeto. 

Descri^ao 

O metodo valueOfQ de um objeto retorna o valor primitivo associado a esse objeto, se houver um. 
Para objetos de tipo Object, nao ha qualquer valor primitivo e esse metodo simplesmente retorna o 
objeto em si. 

Contudo, para objetos do tipo Number, valueOf () retorna o valor numerico primitivo representado 
pelo objeto. Do mesmo modo, ele retorna o valor primitivo booleano associado a um objeto Boole¬ 
an e a string associada a um objeto String. 

Raramente e necessario voce mesmo chamar o metodo valueOf (). JavaScript faz isso automaticamen- 
te, quando um objeto e usado onde e esperado um valor primitivo. Na verdade, por causa dessa cha- 
mada automatica do metodo valueOf (), e dificil ate mesmo distinguir entre valores primitivos e seus 
objetos correspondentes. O operador typeof mostra a diferen^a entre strings e objetos String, por 
exemplo, mas em termos praticos, voce pode usa-los de forma equivalente em seu codigo JavaScript. 

Os metodos valueOf () dos objetos Number, Boolean e String convertem esses objetos empacotadores 
nos valores primitivos que representam. A construtora Object () executa a opera^ao oposta quando cha- 
mada com um niimero, valor booleano ou argumento de string: ela encerra o valor primitivo em um ob¬ 
jeto empacotador apropriado. JavaScript fez essa conversao de valor primitivo para objeto em quase to- 
das as circunstancias, de modo que raramente e necessario chamar a construtora Object () dessa maneira. 

Em algumas circunstancias, talvez voce queira definir um metodo valueOf () personalizado para seus 
proprios objetos. Por exemplo, voce poderia definir um tipo de objeto JavaScript para representar nii- 
meros complexos (um niimero real, mais um niimero imaginario). Como parte desse tipo de objeto, 
voce provavelmente definiria metodos para efetuar adi^ao de niimeros complexos, multiplica^ao, etc. 
(consulte o Exemplo 9-3). Mas talvez tambem quisesse tratar seus niimeros complexos como niime¬ 
ros reais normais, descartando a parte imaginaria. Para isso, voce poderia fezer algo como o seguinte: 
Complex.prototype.valueOf = new Function("return this.real"); 

Com esse metodo valueOf () definido para seu tipo de objeto Complex, voce pode, por exemplo, 
passar um de seus objetos niimero complexo para Math.sqrtQ, que calcula a raiz quadrada da parte 
real do niimero. 
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Consulte tambem 

Object.toString() 

parseFloat() 

converte uma string em um numero 

Sinopse 

parseFloat(s) 

Argumentos 

s 

A string a ser analisada e convertida em um numero. 

Retorna 

O numero analisado ou NaN, caso s nao comece com um numero valido. Em JavaScript 1.0, 
parseFloatQ retorna 0, em vez de NaN, quando s nao pode ser analisado como um numero. 

Descri^ao 

parseFloatQ analisa e retorna o primeiro numero que ocorre em s. A analise para (e o valor e re¬ 
tornado) quando parseFloatQ encontra um caractere em s que nao e uma parte valida do numero. 
Se s nao comefa com um numero que parseFloatQ possa analisar, a funpio retorna o valor not-a- 
-number NaN. Teste esse valor de retorno com a funpio isNaNQ. Se quiser analisar somente a parte 
inteira de um numero, use parselntQ, em vez de parseFloatQ. 

Consulte tambem 

isNaNQ, parselntQ 

parselnt() 

converte uma string em um inteiro 

Sinopse 

parselnt(s) 
parselntQ, laiz) 

Argumentos 

s 

A string a ser analisada. 

raiz 

Um argumento inteiro optional representando a raiz (isto e, a base) do numero a ser analisado. 
Se esse argumento e omitido ou e 0, o numero e analisado na base 10 - ou na base 16, caso 
comece com Ox ou OX. Se esse argumento e menor do que 2 ou maior do que 36, parselntQ 
retorna NaN. 
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Retorna 

O numero analisadoou NaN, caso s nao comece com um inteiro valido. Em JavaScript 1.0, parselntQ 
retorna 0, em vez de NaN, quando nao consegue analisar s. 

Describe) 

parselnt() analisa e retorna o primeiro numero (com um sinal de subtra^ao opcional a esquerda) 
que ocorre em s. A analise para (e o valor e retornado) quando parselntQ encontra um caractere em 
s que nao e um digito valido para a raiz especificada. Se s nao come5a com um numero que par- 
selntQ possa analisar, a fun$ao retorna o valor not-a-number NaN. Use a fun^ao isNaNQ para testar 
esse valor de retorno. 

O argumento raiz especifica a base do numero aser analisado. Especificar 10 faz parselntQ analisar 
um numero decimal. O valor 8 especifica que um numero octal (usando digitos de 0 a 7) deve ser 
analisado. O valor 16 especifica um valor hexadecimal, usando digitos de 0 a 9 e as letras A a F. raiz 
pode ser qualquer valor entre 2 e 36. 

Se raiz eOou nao e especificada, parselntQ tenta determinar a raiz do numero a partir de s. Se s 
come^a (apos um sinal de subtraqao opcional) com Ox, parselntQ analisa o restante de s como um 
numero hexadecimal. Caso contrario, parselntQ o analisa como um numero decimal. 


Exemplo 

parselnt(''i9", 10); 
parselntQn", 2); 
parselnt(''l7", 8); 
parselnt("if", 16); 
parselnt("i0''); 
parselnt("0xi0"); 


// Retorna 19 (10 + 9) 
// Retorna 3 (2 + l) 

// Retorna 15 (8 + 7) 

// Retorna 31 (16 + 15) 
// Retorna 10 
// Retorna 16 


Consulte tambem 

isNaN(), parseFloatQ 


RangeError 

langado quando um numero esta fora de seu intervalo valido Object —> Error —» RangeError 

Construtora 

new RangeError() 

new RangeError (mensagem) 

Argumentos 

mensagem 

Uma mensagem de erro opcional fornecendo detalhes sobre a exce^ao. Se for especificado, esse 
argumento e usado como valor da propriedade message do objeto RangeError. 

Retorna 

Um objeto RangeError recentemente construido. Se o argumento mensagem e especificado, o objeto Er¬ 
ror o utiliza como valor de sua propriedade message; caso contrario, utiliza como valor dessa propriedade 
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uma string padrao definida pela implementa5ao. Quando a construtora RangeError() e chamada como 
funQo, sem o operador new, se comporta exatamente como quando chamada com o operador new. 

Propriedades 

message 

Uma mensagem de erro fornecendo detalhes sobre a exce^ao. Essa propriedade contem a 
string passada para a construtora ou uma string padrao definida pela implementa^ao. Consul- 
te Error.message para ver os detalhes. 

name 

Uma string especificando o tipo da exce^ao. Todos os objetos RangeError herdam o valor 
“RangeError” dessa propriedade. 

Descri^ao 

Uma instancia da classe RangeError e lan^ada quando um valor numerico nao esta em seu intervalo 
valido. Por exemplo, configurar o comprimento de um array com um numero negativo lan^a Ran¬ 
geError. Consulte Error para ver os detalhes sobre como lan^ar e capturar exceedes. 

Consulte tambem 

Error, Error.message, Error.name 

ReferenceError 

langado ao se ler uma variavel inexistente Object Error -» ReferenceError 

Construtora 

new ReferenceError() 

new ReferenceErro i(mensagem) 

Argumentos 

mensagem 

Uma mensagem de erro opcional fornecendo detalhes sobre a exce^ao. Se for especificado, esse 
argumento e usado como valor da propriedade message do objeto ReferenceError. 

Retorna 

Um objeto ReferenceError recentemente constrmdo. Se o argumento mensagem e especificado, o objeto 
Error o utiliza como valor de sua propriedade message; caso contrario, utiliza como valor dessa pro¬ 
priedade uma string padrao definida pela implementa^ao. Quando a construtora ReferenceErrorQ e 
chamada como fun^ao, sem o operador new, se comporta exatamente como faria com o operador new. 

Propriedades 

message 

Uma mensagem de erro fornecendo detalhes sobre a exceQo. Essa propriedade contem a 
string passada para a construtora ou uma string padrao definida pela implementa^ao. Consul¬ 
te Error.message para ver os detalhes. 
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name 

Uma string especificando o tipo da exce^ao. Todos os objetos ReferenceError herdam o valor 
“ReferenceError” dessa propriedade. 

Descri^ao 

Uma instancia da classe ReferenceError e lan^ada quando se tenta ler o valor de uma variavel inexis- 
tente. Consulte Error para ver os detalhes sobre como lan^ar e capturar excefoes. 

Consulte tambem 

Error, Error.message, Error.name 

RegExp 

expressoes regulares para compara^ao de padroes Object —> RegExp 

Sintaxe literal 

/padrao/atributos 

Construtora 

new RegExpfpattern, attributes) 

Argumentos 

padrao 

Uma string especificando o padrao da expressao regular ou outra expressao regular. 
atributos 

Uma string opcional contendo qualquer um dos atributos “g”, “i” e “m” que especificam corres- 
pondencias globais, que nao diferenciam letras maiusculas e minusculas e de varias linhas, respec- 
tivamente. O atributo “m” nao estava disponivel antes da padroniza5ao ECMAScript. Se o argu- 
mento padrao e uma expressao regular, em vez de uma string, esse argumento deve ser omitido. 

Retorna 

Um novo objeto RegExp com o padrao e os flags especificados. Se o argumento padrao e uma expressao 
regular, em vez de uma string, a construtora RegExp () cria um novo objeto RegExp usando os mesmos 
padrao e flags do objeto RegExp especificado. Se RegExp () e chamada como fun^ao sem o operador 
new, se comporta exatamente como faria com o operador new, exceto quando padrao e uma expressao 
regular; nesse caso, ela simplesmente retorna padrao, em vez de criar um novo objeto RegExp. 

Lan^a 

SyntaxError 

Se padrao nao e uma expressao regular valida ou se atributos contem caracteres que nao sejam 
TypeError 

Se padrao e um objeto RegExp e o argumento atributos nao e omitido. 
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Propriedades de instancia 

global 

Se RegExp tem o atributo “g”. 
ignoreCase 

Se RegExp tem o atributo “i”. 
lastlndex 

A posi^ao de caractere da ultima correspondencia; usada para localizar varias correspondence 
em uma string, 
multiline 

Se RegExp tem o atributo “m”. 
source 

O texto de origem da expressao regular. 

Metodos 

exec() 

Faz compara?ao de padroes de uso geral poderosa. 
test() 

Testa se uma string contem um padrao. 

Descri^ao 

O objeto RegExp representa uma expressao regular, uma ferramenta poderosa para fazer compararjao 
de padroes em strings. Consulte o Capitulo 10 para ver detalhes completos sobre sintaxe e uso de 
expressoes regulares. 

Consulte tambem 

Capitulo 10 

RegExp.execO 

compara^ao de padroes de uso geral 

Sinopse 

expreg.exec(string) 

Argumentos 

string 

A string a ser pesquisada. 

Retorna 

Um array contendo o resultado da correspondencia ou null, caso nenhuma correspondencia seja 
encontrada. O formato do array retornado e descrito a seguir. 
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Lan$a 

TypeError 

Se esse metodo e chamado em um objeto que nao e RegExp. 

Descri^ao 

exec() e o mais poderoso de todos os metodos de compara^ao de padroes de RegExp e String. E 
um metodo de uso geral um tanto mais complexo de usar do que RegExp.test(), String.searchQ, 
String.replace()e String.match(). 

execQ pesquisa string em busca de texto que coincida com expreg. Se encontra uma coincidencia, 
ele retorna um array de resultados; caso contrario, retorna null. O elemento 0 do array retornado 
e o texto coincidente. O elemento 1 e o texto que coincidiu com a primeira subexpressao entre pa- 
renteses (se houver) dentro de expreg. O elemento 2 contem o texto que coincidiu com a segunda 
subexpressao e assim por diante. A propriedade de array length especifica o niimero de elementos 
no array, como sempre. Alem dos elementos do array e da propriedade length, o valor retornado por 
execQ tambem tern outras duas propriedades. A propriedade index especifica a posi^ao do primei- 
ro caractere do texto coincidente. A propriedade input se refere a string. Esse array retornado e o 
mesmo retornado pelo metodo String.match(), quando chamado em um objeto RegExp nao global. 

Quando execQ e chamado em um padrao nao global, faz a pesquisa e retorna o resultado descrito 
anteriormente. Entretanto, quando expreg e uma expressao regular global, execQ se comporta de 
maneira um pouco mais complexa. Ele come^a a pesquisar string na posRao de caractere especifi- 
cada pela propriedade lastlndex de expreg. Quando encontra uma correspondence, ele configura 
lastlndex com a posi?ao do primeiro caractere apos a correspondence. Isso significa que voce pode 
chamar execQ repetidamente para iterar por todas as correspondences em uma string. Quando 
execQ nao consegue encontrar mais coincidences, retorna null e zera lastlndex. Se voce come^ar 
a pesquisar uma nova string imediatamente apos ter sucesso em localizar uma correspondence em 
outra string, deve tomar o cuidado de zerar lastlndex manualmente. 

Note que execQ sempre inclui detalhes completos de cada correspondence no array retornado, seja 
expreg um padrao global ou nao. E ai que execQ difere de String.matchQ, que retorna muito menos 
informa^oes quando usado com padroes globais. Chamar o metodo execQ repetidamente em um la^o 
e a unica maneira de obter informa^oes de comparaQo de padroes completas para um padrao global. 

Exemplo 

Voce pode usar execQ em um la^o para encontrar todas as coincidencias dentro de uma string. Por 
exemplo: 

var pattern = /\bJava\w*\b/g; 

var text = "JavaScript is more fun than Java or JavaBeans!"; 
var result; 

while((result = pattern.exec(text)) != null) { 
alert("Matched + resultjo] + 

at position " + result.index + 

" next search begins at position * + pattern.lastlndex); 

} 

Consulte tambem 

RegExp.lastlndex, RegExp.test(), String.matchQ, String.replaceQ, String.search(); Ca- 
pitulo 10 
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RegExp.global 

se uma expressao regular coincide globalmente 


Sinopse 

expreg .global 


Descri^ao 

global e uma propriedade booleana somente para leitura de objetos RegExp. Ela especifica se uma 
expressao regular em especial faz correspondencia global - isto e, se foi criada com o atributo “g”. 

RegExp.ignoreCase 

se uma expressao regular nao diferencia letras maiusculas e minusculas 

Sinopse 

expreg .ignoreCase 



Descri^ao 

ignoreCase e uma propriedade booleana somente para leitura de objetos RegExp. Ela especifica se 
uma expressao regular em especial faz correspondencia sem diferenciar letras maiusculas e minuscu¬ 
las - isto e, se foi criada com o atributo “i”. 


RegExp.lastlndex 

a posigao inicial da proxima coincidencia 

Sinopse 

expreg .lastlndex 

Descri^ao 

lastlndex e uma propriedade de leitura/gravat;ao de objetos RegExp. Para expressoes regulares com 
o atributo “g” configurado, ela content um inteiro especificando a posi^ao do caractere imediatamente 
apos a ultima coincidencia encontrada pelos metodos RegExp.exec () e RegExp.test (). Esses metodos 
usam essa propriedade como ponto de partida para a proxima busca que fazem. Isso permite chamar es¬ 
ses metodos repetidamente para iterar por todas as coincidencias em uma string. Note que lastlndex nao 
e usada por objetos RegExp que nao tern o atributo “g” configurado e nao representam padroes globais. 

Essa propriedade e de leitura/grava^ao; portanto, voce pode configura-la a qualquer momento para 
especificar onde a proxima busca deve come^ar na string alvo. exec() e test() redefinem lastlndex 
como 0 automaticamente, quando nao conseguem encontrar uma coincidencia (ou outra coinciden¬ 
cia). Se voce comeqa a pesquisar uma nova string apos uma coincidencia bem-sucedida de alguma 
outra string, precisa configurar essa propriedade como 0 explicitamente. 

Consulte tambem 

RegExp.exec(), RegExp.test() 







818 Parte III Referenda de JavaScript basica 


RegExp.source 

o texto da expressao regular 

Sinopse 

expieg. source 

Descri^ao 

source e uma propriedade de string somente para leitura de objetos RegExp. Ela contem o texto do 
padrao de RegExp. Esse texto nao inclui as barras delimitadoras utilizadas em expressoes regulares 
literais nem os atributos “g”, “i” e “m”. 

RegExp.testO 

testa se uma string corresponde a urn padrao 

Sinopse 

expieg .test ( string) 

Argumentos 

string 

A string a ser testada. 

Retorna 

true se string contem texto que corresponde a expieg; caso contrario, false. 

Lan$a 

TypeError 

Se esse metodo e chamado em um objeto que nao e RegExp. 

Descri^ao 

test() testa string para ver se contem texto correspondente a expieg. Se contiver, retorna true; caso 
contrario, retorna false. Chamar o metodo test() de um RegExp r e passar a ele a string s e equi- 
valente a seguinte expressao: 

(r.exec(s) != null) 

Exemplo 

var pattern = /java/i; 

pattern.test("JavaScript"); // Retorna true 

pattern.test("ECMAScript"); // Retorna false 

Consulte tambem 

RegExp.exec(), RegExp.lastlndex, String.matchQ, String.replaceQ, String.substring(); 
Capitulo 10 
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Reg Exp.toStri n g() 

converte uma expressao regular em uma string Anula 0 bject.toString () 

Sinopse 

expreg. toStringQ 

Retorna 

Uma representa?ao de string de expieg. 

Lan^a 

TypeError 

Se esse metodo e chamado em um objeto que nao e RegExp. 

Descri^ao 

O metodo RegExp. toStringQ retorna uma representa^ao de string de uma expressao regular na for¬ 
ma de expressao regular literal. 

Note que as implementa^oes nao sao obrigadas a adicionar sequencias de escape para garantir que a 
string retornada seja uma expressao regular literal valida. Considere a expressao regular criada pela 
expressao new RegExp("/","g")- Uma implementa^ao de RegExp.toStringQ poderia retornar III g 
para essa expressao regular; tambem poderia adicionar uma sequencia de escape e retornar l\/l g. 

String 

suporte para strings Object —> String 

Construtora 

new String(s) II Funcao construtora 
String(s) // Funcao de conversao 

Argumentos 

s 

O valor a ser armazenado em um objeto String ou convertido em uma string primitiva. 

Retorna 

Quando StringQ e usada como construtora, com o operador new, retorna um objeto String conten- 
do a string s ou a represen tapio de string de s. Quando a construtora String () e usada sem o opera- 
dor new, simplesmente converte s em uma string primitiva e retorna o valor convertido. 

Propriedades 

length 

O niimero de caracteres na string. 
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Metodos 

charAt() 

Extrai o caractere de determinada posi^ao de uma string. 
charCodeAt() 

Retorna a codifica^ao do caractere em determinada posi^ao de uma string. 
concatQ 

Concatena um ou mais valores em uma string. 
index0f() 

Pesquisa a string em busca de um caractere ou de uma substring. 
lastlndexOf() 

Pesquisa a string para tras, em busca de um caractere ou de uma substring. 
localeCompareQ 

Compara strings usando ordena^ao especifica da localidade. 
matchQ 

Faz compara?ao de padroes com uma expressao regular. 
replace() 

Executa uma opera^ao de busca e troca com uma expressao regular. 
searchQ 

Pesquisa uma string em busca de uma substring que corresponda a uma expressao regular. 
sliceQ 

Retorna uma fatia ou substring de uma string. 
splitQ 

Decompoe uma string em um array de strings, quebrando em uma string delimitadora ou 

expressao regular especificada. 
substrQ 

Extrai uma substring de uma string; uma variante de substring(). 
substring() 

Extrai uma substring de uma string. 
toLowerCaseQ 

Retorna uma copia da string com todos os caracteres convertidos para minusculas. 
toString() 

Retorna o valor da string primitiva. 
toUpperCaseQ 

Retorna uma copia da string com todos os caracteres convertidos para maiusculas. 
trim() 

Retorna uma copia da string com todos os espa^os em branco a esquerda e a direita removidos. 
valueOfQ 

Retorna o valor da string primitiva. 
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Metodos estaticos 

String.fromCharCode() 

Cria uma nova string usando os codigos de caractere passados como argumentos. 

Metodos HTML 

Desde os primordios de JavaScript, a classe String tem definido varios metodos que retornam uma 
string modificada, colocando-a dentro de tags HTML. Esses metodos nunca foram padronizados 
por ECMAScript, mas podem ser uteis em codigo JavaScript do lado do cliente e do servidor que 
gera HTML dinamicamente. Se quiser usar metodos nao padronizados, pode criar o codigo-fonte 
HTML para um hyperlink em negrito vermelho, com codigo como segue: 
var s = "click here!"; 

var html = s.bold().link("javascript:alert('hello')").fontcolor("red"); 

Como esses metodos nao sao padronizados, nao tem entradas de referenda individuals nas paginas 
a seguir: 

anchor( nome ) 


Retorna um 

a copia da string em u 

m ambiente <a name=>. 

big() 

Retorna um 

a copia da string em u 

m ambiente <big>. 

blinkQ 

Retorna um 

a copia da string em u 

m ambiente <blink>. 

boldQ 

Retorna um 

a copia da string em u 

m ambiente <b>. 

fixedQ 

Retorna um 

a copia da string em u 

m ambiente <tt>. 

fontcolor( cor 
Retorna um 

) 

a copia da string em u 

m ambiente <font color= 

fontsize( tamanho ) 

Retorna uma copia da string em u 

m ambiente <font size=> 

italicsQ 

Retorna um 

a copia da string em u 

m ambiente <i>. 

link( url ) 

Retorna um 

a copia da string em u 

m ambiente <a href=>. 

smallQ 

Retorna um 

a copia da string em u 

m ambiente <small>. 

strikeQ 

Retorna um 

a copia da string em u 

m ambiente <strike>. 

sub() 

Retorna um 

a copia da string em u 

m <sub>. 

sup() 

Retorna um 

a copia da string em u 

m ambiente <sup>. 
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Describe) 

As strings sao um tipo de dados primitivo em JavaScript. O tipo de classe String existe para fornecer 
metodos para operar em valores de string primitivos. A propriedade length de um objeto String espe- 
cifica o numero de caracteres na string. A classe String define varios metodos para operar em strings; 
por exemplo, existem metodos para extrair um caractere ou uma substring da string ou para procurar 
um caractere ou uma substring. Note que as strings de JavaScript sao imutaveis: nenhum dos metodos 
definidos pela classe String permite alterar o conteudo de uma string. Em vez disso, metodos como 
String.toUpperCase() retornam uma string inteiramente nova, sem modificar a original. 

Em ECMAScript 5 e em muitas implementa^oes de JavaScript antes de ES5, as strings se com- 
portam como arrays somente de leitura nos quais cada elemento e uma string de um so caractere. 
Por exemplo, para extrair o terceiro caractere de uma string s, voce pode escrever s[2], em vez de 
s.charAt(2). Quando a instru^ao for/in e aplicada a uma string, ela enumera esses indices de array 
para cada caractere da string. 

Consulte tambem 

Capitulo 3 

String.charAtO 

obtem o'n'-esimo caractere de uma string 

Sinopse 

string. charAt(n) 

Argumentos 

r i 

O fndice do caractere que deve ser retornado de string. 

Retorna 

O n-esimo caractere de string. 

Descri^ao 

String.charAtO retorna o n-esimo caractere da string string. O primeiro caractere da string tern nu- 
mera?ao 0. Se n nao esta entre 0 e string.length- 1, esse metodo retorna uma string vazia. Note que 
JavaScript nao tern um tipo de dados caractere que seja distinto do tipo string; portanto, o caractere 
retornado e uma string de comprimento 1. 

Consulte tambem 

String.charCodeAt(), String.indexOfQ, String.lastlndexOf() 

String.charCodeAtQ 


obtem o n-esimo codigo de caractere de uma string 
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Sinopse 

string. charCodeAt(n) 

Argumentos 

n 

O rndice do caractere cuja codifica^ao deve ser retomada. 

Retorna 

A codificaqao Unicode do n-esimo caractere dentro de string. Esse valor de retorno e um inteiro de 
16 bits entre 0 e 65535. 

Descri^ao 

charCodeAtQ e como charAtQ, exceto que retorna a codificafao de caractere em uma posi^ao especi- 
fica, em vez de retornar uma substring contendo o caractere em si. Se n e negativo ou maior ou igual 
ao comprimento da string, charCodeAtQ retorna NaN. 

Consulte String.fromCharCodeQ para ver uma maneira de criar uma string a partir de codifica^oes 
Unicode. 

Consulte tambem 

String.charAt(), String.fromCharCode() 

String.concatO 

concatena strings 

Sinopse 

string. concat (valor, ...) 

Argumentos 

valor, ... 

Um ou mais valores a serem concatenados em string. 

Retorna 

Uma nova string resultante da concatena^ao de cada um dos argumentos em string. 

Descri^ao 

concat () convene cada um de seus argumentos em uma string (se necessario) e os anexa, em ordem, 
no fim de string. Retorna a concatenarjao resultante. Note que string em si nao e modificada. 

String.concatQ e analogo a Array.concat(). Note que frequentemente e mais facil usar o operador 
+ para fazer concatenarjao de strings. 

Consulte tambem 

Array. concatQ 
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String.fromCharCodeO 

cria urna string a partir de codificagoes de caractere 

Sinopse 

String.fromCharCode(cl, c2, ...) 

Argumentos 

ci, c2, ... 

Zero ou mais inteiros especificando as codificanoes Unicode dos caracteres na string a ser criada. 

Retorna 

Uma nova string contendo caracteres com as codificafoes especificadas. 

Descri^ao 

Esse metodo estatico oferece um modo de criar uma string especificando as codifica^oes Unicode 
numericas individuals de seus caracteres. Note que, como um metodo estatico, fromCharCodeQ e 
uma propriedade da construtora String () e nao um metodo de strings ou objetos String. 

String.charCodeAtQ e um metodo de instancia acompanhante que oferece um modo de obter as 
codificanoes dos caracteres individuals de uma string. 

Exemplo 

// Cria a string "hello" 

var s = String.fromCharCode(l04, 101, 108, 108, 111 ); 

Consulte tambem 

String. charCodeAtQ 

String.indexOfO 

pesquisa uma string 

Sinopse 

string. indexOf (substring) 
string .indexOf (substring, inicio) 

Argumentos 

substring 

A substring a ser pesquisada dentro de string, 
inicio 

Um argumento inteiro opcional especificando a posiQo dentro de string na qual a busca 
deve come^ar. Os valores validos vao de 0 (a posi?ao do primeiro caractere na string) a string 
.length-1 (a posi?ao do ultimo caractere na string). Se esse argumento e omitido, a busca 
come^a no primeiro caractere da string. 
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Retorna 

A posi?ao da primeira ocorrencia de substring dentro de string que aparece na posi?ao inicio, se 
houver; ou -1, se essa ocorrencia nao for encontrada. 

Descri^ao 

String.indexOf() pesquisa string do inicio ao fim da string para ver se contem uma ocorrencia de 
substring. A busca come^a na posi^ao inicio dentro de string ou no inicio de string, caso inicio 
nao seja especificado. Se e encontrada uma ocorrencia de substring, String.indexOf() retorna a 
posi^ao do primeiro caractere da primeira ocorrencia de substring dentro de string. As posi^oes de 
caractere dentro de string sao numeradas a partir de zero. 

Se nenhuma ocorrencia de substring e encontrada dentro de string, String. indexOf () retorna -1. 

Consulte tambem 

String.charAtQ, String.lastlndexOfQ, String.substring() 

String.lastlndexOfO 

pesquisa uma string para tras 

Sinopse 

string. lastlndexOf (substring) 
string. lastlndexOf (substring, inicio) 

Argumentos 

substring 

A substring a ser pesquisada dentro de string, 
inicio 

Um argumento inteiro opcional especificando a posi^ao dentro de string onde a busca deve 
come^ar. Os valores validos vao de 0 (a posifao do primeiro caractere na string) a string 
.length-1 (a posi^ao do ultimo caractere na string). Se esse argumento e omitido, a busca 
comei;a no ultimo caractere da string. 

Retorna 

A posifao da ultima ocorrencia de substring dentro de string que aparece antes da posi^ao inicio, 
se houver; ou -1, se essa ocorrencia nao for encontrada dentro de string. 

Descri^ao 

String.lastlndexOfO pesquisa a string do fim para o inicio para ver se contem uma ocorrencia de 
substring. A busca comefa na posifao inicio dentro de string ou no fim de string, caso inicio 
nao seja especificado. Se uma ocorrencia de substring e encontrada, String.lastlndexOfO retorna 
a posi?ao do primeiro caractere dessa ocorrencia. Como esse metodo pesquisa do fim para o inicio 
da string, a primeira ocorrencia encontrada e a ultima na string que ocorre antes da posi?ao inicio. 

Se nenhuma ocorrencia de substring e encontrada, String.lastlndexOfO retorna -1. 
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Note que, embora String.lastlndexOf () pesquise string do fim para o im'cio, ainda numera as posi- 
9oes de caractere dentro de string a partir do inicio. O primeiro caractere da string tem a posi^ao 0 
e o ultimo tem a posifao string. length-1. 

Consulte tambem 

String.charAt(), String.indexOf(), String.substringQ 

String.length 

o comprimento de uma string 

Sinopse 

string. length 

Descri^ao 

A propriedade String.length e um inteiro somente de leitura que indica o numero de caracteres na 
string especificada. Para qualquer string s, o indice do ultimo caractere e s.length- 1 . A propriedade 
length de uma string nao e enumerada por um la$o for/in e nao pode ser excluida com o operador 
delete. 

String.localeCompareO 

compara uma string com outra, usando ordena^ao especffica da localidade 

Sinopse 

string. localeCompare(olvo) 

Argumentos 

alvo 

Uma string a ser comparada (de maneira relativa a localidade) com string. 

Retorna 

Um numero indicando o resultado da comparaqao. Se string e “menor do que” alvo, locale Com¬ 
pare!) retorna um numero menor do que zero. Se string e “maior do que” alvo, o metodo retorna 
um numero maior do que zero. E se as strings sao identicas ou indistinguiveis de acordo com as 
convenfoes de ordenaqao da localidade, o metodo retorna 0. 

Descri^ao 

Quando os operadores < e > sao aplicados em strings, eles comparam essas strings usando somente 
as codifica^oes Unicode desses caracteres e nao consideram a ordem de compara^ao da localidade 
corrente. A ordena^ao produzida dessa maneira nem sempre e correta. Considere o idioma espanhol, 
por exemplo, no qual as letras “ch” sao tradicionalmente classificadas como se fossem uma unica 
letra que aparecesse entre as letras “c” e “d”. 
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localeCompareQ oferece um modo de comparar strings que leva em considerarjao a ordem de com- 
pararjao da localidade padrao. O padrao ECMAScript nao especifica como a compara^ao especifica 
da localidade e feita; especifica apenas que essa fun910 utiliza a ordem de compara^ao fornecida pelo 
sistema operacional subjacente. 

Exemplo 

Voce pode usar codigo como o seguinte para classificar um array de strings em uma ordenaqao es- 
pecffica da localidade: 

var strings; // 0 array de strings a classificar; inicializado em algum lugar 
strings.sort(function(a,b) { return a.localeCompare(b) }); 

String.matchO 

encontra uma ou mais correspondencias de expressao regular 

Sinopse 

string, match (expieg) 

Argumentos 

expieg 

Um objeto RegExp especificando o padrao a ser correspondido. Se esse argumento nao e 
RegExp, ele primeiramente e convertido em um por ser passado para a construtora RegExp(). 

Retorna 

Um array contendo os resultados da correspondence. O conteudo do array depende de expieg ter o 
atributo global “g” configurado. Detalhes sobre esse valor de retorno sao dados na DescrRao. 

Descri^ao 

match () pesquisa string em busca de uma ou mais correspondencias de expieg. O comportamento 
desse metodo depende significativamente de expieg ter o atributo “g” ou nao (consulte o Capitulo 
10 para ver detalhes completos sobre expressoes regulares). 

Se expieg nao tern o atributo “g”, match () pesquisa stiing em busca de uma correspondence. Se nenhu- 
ma e encontrada, match( ) retorna null. Caso contrario, retorna um array contendo informa^oes sobre a 
correspondence encontrada. O elemento 0 do array content o texto coincidente. Os elementos restantes 
content o texto correspondente a quaisquer subexpressoes entre parenteses dentro da expressao regular. 
Alem desses elementos de array normais, o array retornado tambem tern duas propriedades de objeto. 
A propriedade index do array especifica a posi^ao do caractere dentro de string do inicio do texto 
coincidente. Alem disso, a propriedade input do array retornado e uma referenda para a propria stiing. 

Se expieg tern o flag “g”, match () faz uma busca global, pesquisando stiing em busca de todas as 
substrings coincidentes. Caso nenhuma correspondence seja encontrada, retorna null; e retorna 
um array, caso seja encontrada uma ou mais correspondencias. Contudo, o conteudo desse array re¬ 
tornado e muito diferente para correspondencias globais. Nesse caso, os elementos do array content 
cada uma das substrings coincidentes dentro de string. O array retornado nao tem propriedades 
index ou input, nesse caso. Note que para correspondencias globais, match () nao fornece informa- 
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foes sobre subexpressoes entre parenteses nem especifica onde cada coincidencia ocorreu dentro de 
string. Caso voce precise obter essa informafao para uma pesquisa global, pode usar RegExp.exec(). 


Exemplo 

A correspondence global a seguir localiza todos os numeros dentro de uma string: 
"1 plus 2 equals 3".match(/\d+/g) // Retorna ["l", "2", "3"] 


A correspondence nao global a seguir usa uma expressao regular mais complexa, com varias subex¬ 
pressoes entre parenteses. Ela corresponde a um URL e suas subexpressoes correspondem as partes 
do protocolo, host e caminho do URL: 


var url = /(\w+):\/\/([\w.]+)\/(\S*)/; 
var text = "Visit my home page at http: 
var result = text.match(url); 
if (result != null) { 

var fullurl = resultfo]; 
var protocol = resultjl]; 
var host = result[2]; 
var path = result[3]; 

} 


//www.isp.com/-david"; 


// Contem "http://www.isp.com/~david" 
// Contem "http" 

// Contem "www.isp.com" 

// Contem "-david" 


Consulte tambem 

RegExp, RegExp.exec(), RegExp.test(), String.replaceQ, String.searchQ; Capitulo 10 


String.replaceO 

substitui substring(s) correspondente(s) a uma expressao regular 

Sinopse 

string. replace (expreg, substituicao) 

Argumentos 

expreg 

O objeto RegExp especificando o padrao a ser substituido. Se esse argumento e uma string, 
ele e usado como um padrao de texto literal a ser procurado; nao e primeiramente convertido 
em um objeto RegExp. 
substituicao 

Uma string especificando o texto substituto ou uma funfao que e chamada para gerar o texto 
substituto. Consulte a sefao Descrifao para ver os detalhes. 

Retorna 

Uma nova string com a primeira coincidencia (ou todas as coincidencias) de expreg substituidas por 
substituicao. 

Descri^ao 

replaceQ executa uma operafao de busca e troca em string. Pesquisa string em busca de uma ou 
mais substrings que correspondam a expreg e as substitui por substituicao. Se expreg tern o atributo 
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global “g” especificado, replace () substitui todas as substrings coincidentes. Caso contrario, substi- 
tui apenas a primeira substring coincidente. 

substituicao pode ser uma string ou uma fungao. Se for uma string, cada coincidencia e substituida 
pela string. Note que o caractere $ tem significado especial dentro da string substituicao. Confor- 
me mostrado na tabela a seguir, ele indica que uma string derivada da correspondence de padrao e 
usada na substituicao. 


Caracteres 

Substituicao 

$1, $2, ..., $99 

0 texto que correspondeu da 1 a a 99 a subexpressao entre parenteses dentro de expreg 

$& 

A substring que correspondeu a expreg 

$' 

0 texto a esquerda da substring coincidente 

$' 

0 texto a direita da substring coincidente 

$$ 

Um cifrao literal 



ECMAScript v3 especifica que o argumento substituicao de replace () pode ser uma fun<;ao, em vez 
de uma string. Nesse caso, a fun<;ao e chamada para cada coincidencia e a string retornada e usada 
como texto substituto. O primeiro argumento da fungao e a string que coincide com o padrao. Os 
argumentos seguintes sao as strings que coincidem com quaisquer subexpressoes entre parenteses 
dentro do padrao - pode haver zero ou mais desses argumentos. O argumento seguinte e um inteiro 
especificando a posigao dentro de string onde a coincidencia ocorreu e o ultimo argumento da fun¬ 
gao substituicao e a propria string. 

Exemplo 

Para garantir que as letras maiusculas da palavra “JavaScript” estejam corretas: 

text.replace(/javascript/i, "JavaScript"); 

Para converter um nome do formato “Doe, John” para o formato “John Doe”: 

name.replace(/(\w+)\s*,\s*(\w+)/, "$2 $ 1 "); 

Para substituir todas as aspas duplas por aspas duplas para tras e aspas simples para frente: 
text.replace(/"([ A "]*)"/g, 

Para que a primeira letra de todas as palavras em uma string seja maiuscula: 

text.replace(/\b\w+\b/g, function(word) { 

return word.substring(0,l).toUpperCase() + 
word.substring(l); 

}); 


Consultetambem 

RegExp, RegExp.execQ, RegExp.test(), String.match(), String.search(); Capitulo 10 


String.searchO 


pesquisa uma expressao regular 
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Sinopse 

string. s e a r c h ( expreg) 

Argumentos 

expreg 

Um objeto RegExp que especifica o padrao a ser procurado em string. Se esse argumento nao 
e RegExp, ele e primeiro convertido em um passando-o para a construtora RegExpQ. 

Retorna 

A posi?ao do inicio da primeira substring de string correspondente a expreg; ou -1, caso nenhuma 
correspondencia seja encontrada. 

Descri^ao 

search() procura uma substring correspondente a expreg dentro de string e retorna a posRao do 
primeiro caractere da substring coincidente; ou -1, caso nenhuma correspondencia seja encontrada. 

searchQ nao faz correspondence globais; ele ignora o flag g. Ignora tambem a propriedade las- 
tlndex de expreg e sempre pesquisa a partir do inicio da string, ou seja, sempre retorna a posRao da 
primeira correspondencia em string. 

Exemplo 

var s = "JavaScript is fun"; 
s.search(/script/i) // Retorna 4 
s.search(/a(.)a/) // Retorna 1 

Consulte tambem 

RegExp, RegExp.execQ, RegExp.test(), String.matchQ, String.replaceQ; Capitulo 10 

String.sliceO 

extrai uma substring 

Sinopse 

string.slice(inicio, fim) 

Argumentos 

inicio 

O indice da string onde a fatia deve come^ar. Se for negativo, esse argumento especifica uma 
posi^ao medida a partir do fim da string. Isto e, -1 indica o ultimo caractere, -2 indica o pe- 
nultimo caractere e assim por diante. 
fim 

O indice da string imediatamente apos o fim da fatia. Se nao for especificado, a fatia vai incluir 
todos os caracteres a partir de inicio ate o fim da string. Se esse argumento for negativo, espe¬ 
cifica uma posRao medida a partir do fim da string. 
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Retorna 

Uma nova string contendo todos os caracteres de string a partir de (e incluindo) inicio ate (mas 
excluindo) fim. 


Descri<;ao 

sliceQ retorna uma string contendo uma fatia (ou substring) de string. Nao modifica string. 

Os metodos de String sliceQ, substringQ e o desaprovado substrQ retornam partes especificas de 
uma string. sliceQ e mais flexfvel do que substringQ, pois permite valores de argumento negativos. 
sliceQ e diferente de substrQ porque especifica uma substring com duas posi^oes de caractere, 
enquanto substrQ utiliza uma posi^ao e um comprimento. Note tambem que String.sliceQ e 
analoga de Array.sliceQ. 


Exemplo 


var s = "abedefg" 
s.slice(0,4) 
s. sliceQ, 4 ) 
s.sliceQ) 
s.sliceQ,- 1 ) 
s.sliceQ,-2) 
s.slice(-3,-i) 


// Retorna "abed” 

// Retorna "cd" 

// Retorna "efg" 

// Retorna "def” 

// Retorna "de" 

// Deve retornar "ef"; retorna "abedef" 


IE 4 


Erros 

Valores negativos para inicio nao funcionam no Internet Explorer 4 (mas funcionam nas versoes 
posteriores do IE). Em vez de especificar uma posi^ao de caractere medida a partir do fim da string, 
eles especificam a posi^ao de caractere 0. 

Consulte tambem 

Array.slice(), String.substring() 

String.splitO 

decompoe uma string em um array de strings 

Sinopse 

string. split (delimitador, limite) 

Argumentos 

delimitador 

A string ou expressao regular na qual a string e decomposta. 
limite 

Esse inteiro opcional especifica o comprimento maximo do array retornado. Se for especifica- 
do, nao sera retornado mais do que esse niimero de substrings. Se nao for especificado, a string 
inteira sera decomposta, independente de seu comprimento. 
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Retorna 

Um array de strings, criado pela decomposi^ao de string em substrings nos limites especificados por 
delimitador. As substrings no array retornado nao incluem o proprio delimitador, exceto no caso 
observado na Descrifao. 

Descri^ao 

O metodo split() cria e retorna um array de ate limite substrings da string especificada. Essas 
substrings sao criadas pela busca pelo texto correspondente a delimitador do irn'cio ao fim da string, 
quebrando a string antes e depois desse texto coincidente. O texto delimitador nao e incluido em 
nenhuma das substrings retornadas, exceto conforme o observado no final desta se^ao. 

Note que, se o delimitador corresponder ao irn'cio da string, o primeiro elemento do array retornado 
sera uma string vazia - o texto que aparece antes do delimitador. Do mesmo modo, se o delimitador 
corresponder ao fim da string, o ultimo elemento do array (supondo que limite nao seja conflitante) 
sera a string vazia. 

Se nenhum delimitador e especificado, a string nao e decomposta e o array retornado contem apenas 
um elemento de string nao decomposto. Se delimitador e a string vazia ou uma expressao regular que 
corresponda a string vazia, a string e decomposta entre cada caractere e o array retornado tern o mesmo 
comprimento da string, supondo que nenhum limite menor seja especificado. (Note que esse e um 
caso especial, pois as strings vazias antes do primeiro caractere e depois do ultimo nao sao coincidentes.) 

Conforme mencionado anteriormente, as substrings no array retornado por esse metodo nao contem 
o texto delimitador usado para decompor a string. Contudo, se delimitador e uma expressao regular 
que contem subexpressoes entre parenteses, as substrings que coincidem com essas subexpressoes entre 
parenteses (mas nao o texto que corresponde a expressao regular como um todo) sao incluidas no array 
retornado. 

Note que o metodo String.split( ) e o inverso do metodo Array. join(). 

Exemplo 

O metodo split() tern mais utilidade quando se esta trabalhando com strings altamente estrutura- 
das. Por exemplo: 

" 1 : 2 :3:4:5".split(":// Retorna ["l","2","3","4","5"] 

"|a| b |c|".split("|"); // Retorna "a", "b", "c", ""] 

Outro uso comum do metodo split () e na analise de comandos e strings semelhantes, decompon- 
do-os em palavras delimitadas por espa^os: 
var words = sentence.split(’ '); 

E mais facil decompor uma string em palavras usando uma expressao regular como delimitador: 
var words = sentence.split(/\s+/); 

Para decompor uma string em um array de caracteres, use a string vazia como delimitador. Use o 
argumento limite se quiser decompor apenas um prefixo da string em um array de caracteres: 

"hello".splitf"'); // Retorna ["h","e","1","1","o"] 

”hello”.split3); // Retorna ["h","e","1"] 
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Se quiser incluir os delimitadores ou uma ou mais partes do delimitador no array retornado, use 
uma expressao regular com subexpressoes entre parenteses. Por exemplo, o codigo a seguir decom- 
poe uma string em tags HTML e inclui essas tags no array retornado: 
var text = "hello <b>world</b>”; 

text.split(/(<[ / '>]*>)/); // Retorna ["hello ","<b>","world","</b>",""] 

Consulte tambem 

Array, join(), RegExp; Capftulo 10 

String.substr() desaprovado 

extrai uma substring 

Sinopse 

string. substr (inicio, comprimento) 

Argumentos 

inicio 

A posi?ao inicial da substring. Se esse argumento e negativo, especifica uma posiqao medida a 
partir do fim da string: -1 especifica o ultimo caractere, -2 especifica o penultimo caractere e 
assim por diante. 
comprimento 

O numero de caracteres na substring. Se esse argumento e omitido, a substring retornada 
inclui todos os caracteres, da posifao inicial ate o fim da string. 

Retorna 

Uma copia da parte de string, come^ando (e incluindo) no caractere especificado por inicio e con- 
tinuando ate comprimento caracteres; ou ate o fim da string, se comprimento nao e especificado. 

Descri^ao 

substrQ extrai e retorna uma substring de string. Nao modifica string. 

Note que substr () especifica a substring desejada com uma posi?ao de caractere e um comprimento. 
Isso fornece uma alternativa util a String. substring() e String, splice (), que especificam uma subs¬ 
tring com duas posi?6es de caractere. Note, entretanto, que esse metodo nao foi padronizado por 
ECMAScript e, portanto, e desaprovado. 

Exemplo 

var s = "abcdefg"; 
s.substr(2,2); // Retorna "cd" 

s.substr(3); // Retorna "defg" 

s.substr(-3,2); // Deve retornar "ef"; retorna "ab" no IE 4 

Erros 

Valores negativos para inicio nao funcionam no IE. Em vez de especificar uma posi^ao de caractere 
medida a partir do fim da string, eles especificam a posi^ao de caractere 0. 
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Consulte tambem 

String.slice(), String.substring() 

String.substring!) 

retorna uma substring de uma string 

Sinopse 

string. substring(de, para) 

Argumentos 

de 

Um inteiro nao negativo especificando a posi^ao dentro de string do primeiro caractere da 
substring desejada. 

para 

Um inteiro nao negativo opcional, uma unidade maior do que a posifao do ultimo caractere da 
substring desejada. Se esse argumento e omitido, a substring retornada vai ate o fim da string. 

Retorna 

Uma nova string de comprimento para-de, contendo uma substring de string. A nova string contem 
caracteres copiados das posi^oes de ate para-1 de string. 

Descri^ao 

String.substring() retorna uma substring de string consistindo nos caracteres entre as posi^oes de e 
para. O caractere na posi^ao de e incluido, mas o caractere na posi^ao para, nao. 

Se de e igual a para, esse metodo retorna uma string vazia (comprimento 0). Se de e maior do que 
para, esse metodo primeiro troca os dois argumentos e entao retorna a substring entre eles. 

E importante lembrar que o caractere na posi^ao de e incluido na substring, mas que o caractere na 
posi?ao para, nao. Embora isso possa parecer arbitrario ou ilogico, uma caracteristica notavel desse 
sistema e que o comprimento da substring retornada e sempre igual a para-de. 

Note que String.sliceQ e o metodo nao padronizado String.substrQ tambem podem extrair sub¬ 
strings de uma string. Ao contrario desses metodos, String.substringQ nao aceita argumentos negati- 


Consulte tambem 

String.charAtQ, String.indexOfQ, String.lastlndexOf(), String.slice(). String.substrQ 

String.toLocaleLowerCaseO 

converte uma string para letras minusculas 

Sinopse 

String.toLocaleLowerCaseO 
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Retorna 

Uma copia de string convertida para letras minusculas de maneira especffica da localidade. Apenas 
alguns idiomas, como o turco, tem mapeamentos de caixa especfficos da localidade, de modo que 
esse metodo normalmente retorna o mesmo valor que toLowerCaseQ. 

Consulte tambem 

String.toLocaleUpperCase(), String.toLowerCase(), String.toUpperCase() 


String.toLocaleUpperCaseO 

converte uma string para letras maiusculas 

Sinopse 

String.toLocaleUpperCaseO 



Retorna 

Uma copia de string convertida para letras minusculas de maneira especffica da localidade. Apenas 
alguns idiomas, como o turco, tem mapeamentos de caixa especfficos da localidade, de modo que 
esse metodo normalmente retorna o mesmo valor que toUpperCaseQ. 


Consulte tambem 

String.toLocaleLowerCase(), String.toLowerCaseQ, String.toUpperCaseQ 


String.toLowerCaseO 

converte uma string para letras minusculas 

Sinopse 

string. toLowerCase() 

Retorna 

Uma copia de string com cada letra maiuscula convertida em sua equivalente minuscula, caso tenha uma. 

String.toStringO 

retorna a string Anula 0bject.toString() 

Sinopse 

String.toStringO 

Retorna 

O valor de string primitivo de string. Raramente e necessario chamar esse metodo. 
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Lan$a 

TypeError 

Se esse metodo e chamado em um objeto que nao e String. 

Consulte tambem 

String.valueOf() 

String.toUpperCaseO 


converte uma string para letras maiusculas 


Sinopse 

string . toUpperCase() 


Retorna 


Uma copia de string com cada letra minuscula convertida em su 

a equivalente maiuscula, caso tenha 

String.trim() 

ECMAScript 5 

retira espa^o em branco a esquerda e a direita 


Sinopse 

string.trim0 


Retorna 


Uma copia de string com todos os espagos em branco a direita e 

: a esquerda removidos. 

Consulte tambem 

String. replaceQ 


String.valueOfO 


retorna a string 

Anula Object.valueOfO 

Sinopse 

string.valueOf() 


Retorna 


O valor de string primitivo de string. 


Lan^a 

TypeError 



Se esse metodo e chamado em um objeto que nao e String. 
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Consulte tambem 

String.toString() 

SyntaxError 

lan$ado para sinalizar um erro de sintaxe Object —> Error —> SyntaxError 

Construtora 

new SyntaxError() 

new SyntaxError (mensagem) 

Argumentos 

mensagem 

Uma mensagem de erro opcional fornecendo detalhes sobre a exce^ao. Se for especificado, esse 
argumento e usado como valor da propriedade message do objeto SyntaxError. 

Retorna 

Um objeto SyntaxError recem-construfdo. Se o argumento mensagem e especificado, o objeto Error o 
utiliza como valor de sua propriedade message; caso contrario, utiliza como valor dessa propriedade 
uma string padrao definida pela implementa?ao. Quando a construtora SyntaxError () e chamada 
como fun^ao, sem o operador new, se comporta exatamente como faz quando chamada com o ope- 
rador new. 

Propriedades 

message 

Uma mensagem de erro fornecendo detalhes sobre a exce^ao. Essa propriedade contem a string 
passada para a construtora ou uma string padrao definida pela implementa?ao. Consulte Er¬ 
ror, message paraver os detalhes. 

name 

Uma string especificando o tipo da exce^ao. Todos os objetos SyntaxError herdam o valor 
“SyntaxError” dessa propriedade. 

Descri^ao 

Uma instancia da classe SyntaxError e lanfada para sinalizar um erro de sintaxe em codigo JavaS¬ 
cript. O metodo eval(), a construtora FunctionQ e a construtora RegExpQ podem lanijar excefoes 
desse tipo. Consulte Error para ver os detalhes sobre como lan^ar e capturar exce^oes. 

Consulte tambem 

Error, Error .message, Error, name 

TypeError 


langado quando um valor e do tipo errado 


Object Error TypeError 
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Construtora 

new TypeErrorQ 

new TypeError (mensagem) 

Argumentos 

mensagem 

Uma mensagem de erro opcional fornecendo detalhes sobre a excepio. Se for especificado, esse 
argumento e usado como valor da propriedade message do objeto TypeError. 

Retorna 

Um objeto TypeError recentemente consmudo. Se o argumento mensagem e especificado, o objeto 
Error o utiliza como valor de sua propriedade message; caso contrario, utiliza como valor dessa 
propriedade uma string padrao definida pela implementapio. Quando a construtora TypeErrorQ 
e chamada como fun^ao, sem o operador new, se comporta exatamente como faz quando chamada 
com o operador new. 

Propriedades 

message 

Uma mensagem de erro fornecendo detalhes sobre a exce^ao. Essa propriedade contem a 
string passada para a construtora ou uma string padrao definida pela implementa^ao. Consul- 
te Errormessage para ver os detalhes. 

name 

Uma string especificando o tipo da exce^ao. Todos os objetos TypeError herdam o valor 
“TypeError” dessa propriedade. 

Descri^ao 

Uma instancia da classe TypeError e lanpida quando um valor nao e do tipo esperado. Isso aconte- 
ce mais frequentemente quando se tenta acessar uma propriedade de um valor null ou undefined. 
Tambem pode ocorrer se voce chama um metodo definido por uma classe em um objeto que e 
uma instancia de alguma outra classe ou se usa o operador new com um valor que nao e uma fun$ao 
construtora, por exemplo. As implementafoes de JavaScript tambem podem lan^ar objetos TypeEr¬ 
ror quando uma funpio ou metodo interno e chamado com mais argumentos do que o esperado. 
Consulte Error para ver os detalhes sobre como lanfar e capturar excefoes. 

Consulte tambem 

Error, Error .message, Error, name 

undefined 

o valor undefined 

Sinopse 

undefined 
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Descri^ao 

undefined e uma propriedade global que content o valor undefined de JavaScript. Esse e o mesmo 
valor retornado quando se tenta ler o valor de uma propriedade de objeto inexistente. A propriedade 
undefined nao e enumerada por lagos for/in e nao pode ser excluida com o operador delete. Note 
que undefined nao e uma constante e pode ser configurada com qualquer outro valor, algo que voce 
deve tomar o cuidado de nao fazer. 

Quando testar um valor para ver se e indefinido, use o operador ===, pois o operador == trata o valor 
undefined como igual a null. 


unescapeo desaprovado 

decodifica uma string com escape 

Sinopse 

unescape(s) 

Argumentos 

s 

A string que sera decodificada ou da qual se vai “retirar o escape”. 

Retorna 

Uma copia decodificada de s. 

Descri^ao 

unescapeQ e uma fungao global que decodifica uma string codificada com escape(). Ela decodifica 
s localizando e substituindo sequencias de caractere da forma % xx e %u xxxx (onde x representa um 
digito hexadecimal) pelos caracteres Unicode \u00 xx e \ u xxxx. 

Embora unescapeQ tenha sido padronizada na primeira versao de ECMAScript, foi desaprovada e 
retirada do padrao por ECMAScript v3. E provavel que as implementagoes de ECMAScript imple- 
mentem essafungao, mas nao sao obrigadas a isso. Voce deve usar decodeLIRlQ e decodeURIComponentQ, 
em vez de unescapeQ. Consulte escape() para ver mais detalhes e um exemplo. 

Consulte tambem 

decodeURI(), decodeURIComponent(), escape(), String 

URIError 

langado por metodos de codifica^ao e decodifica0o de URI ObjectError —^ URIError 

Construtora 

new URIError() 

new URIError (mensagem) 
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Argumentos 

me ns agent 

Uma mensagem de erro optional fornecendo detalhes sobre a exce^ao. Se for especificado, esse 
argumento e usado como valor da propriedade message do objeto URIError. 

Retorna 

Um objeto URIError recem-construido. Se o argumento mensagem e especificado, o objeto Error o 
utiliza como valor de sua propriedade message; caso contrario, utiliza uma string padrao definida 
pela implementacjao como valor dessa propriedade. Quando a construtora URIError() e chamada 
como fun^ao sem o operador new, se comporta exatamente como faz quando chamada com o ope- 

Propriedades 

message 

Uma mensagem de erro fornecendo detalhes sobre a exce^ao. Essa propriedade contem a 
string passada para a construtora ou uma string padrao definida pela implementa^ao. Consul- 
te Errormessage para ver os detalhes. 

name 

Uma string especificando o tipo da exce^ao. Todos os objetos URIError herdam o valor 
“URIError” dessa propriedade. 

Descri^ao 

Uma instancia da classe URIError e lan^ada por decodeURlQ e decodeURIComponentQ, caso a string 
especificada contenha escapes hexadecimais invalidos. Tambem pode ser lanijada por encodeURI() e 
encodeURIComponent(), caso a string especificada contenha pares substitutes Unicode invalidos. Con- 
suite Error para ver os detalhes sobre como lan^ar e capturar exce^oes. 

Consulte tambem 

Error, Error.message, Error.name 



Parte IV 


Referenda de JavaScript 
do lado do diente 


Esta parte do livro e uma referenda de JavaScript do lado do cliente. Ela content entradas para 
importantes objetos de JavaScript do lado do cliente, como Window, Document, Element, Event, 
XMLHttpRequest, Storage, Canvas e File. Tambem ha uma entrada para a biblioteca jOuery. As en¬ 
tradas estao organizadas em ordem alfabetica por nome de objeto e cada entrada inclui uma lista 
completa das constantes, propriedades, metodos e rotinas de tratamento de evento suportadas por 
esse objeto. 

As edi$oes anteriores deste livro continham uma entrada de referenda separada para cada metodo, 
mas nesta edi^ao o material de referenda se tornou mais compacto (sem omitir detalhes) pela inclu- 
sao das describes de metodo diretamente na entrada pai. 



ApplicationCache 

ArrayBuffer 

ArrayBufferView 

Attr 

Audio 

BeforeUnloadEvent 

Blob 

BlobBuilder 

Button 

Canvas 

CanvasGradient 

CanvasPattem 

CanvasRenderingContext2D 

ClientRect 

CloseEvent 

Comment 

Console 

ConsoleCommandLine 

CSSRule 

CSSStyleDedaration 

CSSStyleSheet 

DataTransfer 

DataView 

Document 

DocumentFragment 

DocumentType 


DOMException 

DOMImplementation 

DOMSettableTokenList 

DOMTokenList 

Element 

ErrorEvent 

EventSource 

EventTarget 

FieldSet 

File 

FileError 

FileReader 

FileReaderSync 

FormControl 

FormData 

FormValidity 

Geocoordinates 

Geolocation 

GeolocationError 

Geoposition 

HashChangeEvent 

History 

HTMLCollection 

HTMLFormControlsCollection 


HTMLOptionsCollection 

IFrame 

ImageData 

Input 

jQuery 

Label 

Link 

Location 

MediaElement 

MediaError 

MessageChannel 

MessageEvent 

MessagePort 

Meter 

Navigator 

Node 

NodeList 

Option 

Output 

PageTransitionEvent 

PopStateEvent 

Processinglnstruction 

Progress 

ProgressEvent 


Select 

Storage 

StorageEvent 

Style 

Table 

TableCell 

TableRow 

TableSection 

Text 

TextArea 

TextMetrics 

TimeRanges 

TypedArray 

URL 

Video 

WebSocket 

Window 

Worker 

WorkerGlobalScope 

WorkerLocation 

WorkerNavigator 

XMLHttpReguest 

XMLHttpReguestUpload 
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do lado do diente 


ApplicationCache 

API de gerenciamento de cache de aplicativo EventTarget 

O objeto ApplicationCache e o valor da propriedade applicationCache do objeto Window. Ele defi¬ 
ne uma API para gerenciar atualiza^oes em aplicativos colocados na cache. Para aplicativos colocados 
na cache simples, nao ha necessidade de usar essa API: basta criar (e atualizar, quando necessario) 
um manifesto de cache apropriado, conforme descrito na Secjao 20.4. Aplicativos mais complexos 
colocados na cache que queiram gerenciar atualiza^oes mais ativamente podem usar as propriedades, 
metodos e rotinas de tratamento de evento descritos aqui. Consulte a Se^ao 20.4.2 para obter mais 
detalhes. 

Constantes 

As constantes a seguir sao os valores possiveis para a propriedade status, 
unsigned short UNCACHED = 0 

Esse aplicativo nao tern um atributo manifest: nao e colocado na cache, 
unsigned short IDLE = 1 

O manifesto foi verificado e esse aplicativo esta na cache e atualizado. 
unsigned short CHECKING = 2 

O navegador esta verificando o arquivo de manifesto, 
unsigned short DOWNLOADING = 3 

O navegador esta baixando e colocando na cache os arquivos listados no manifesto, 
unsigned short UPDATEREADY = 4 

Uma nova versao do aplicativo foi baixada e colocada na cache, 
unsigned short OBSOLETE = 5 

O manifesto nao existe mais e a cache sera excluida. 

Propriedades 

readonly unsigned short status 

Essa propriedade descreve o status da cache do documento atual. Seu valor sera uma das cons¬ 
tantes listadas anteriormente. 
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Metodos 

void swapCache() 

Quando a propriedade status e UPDATEREADY, o navegador esta mantendo duas versoes do aplicativo 
colocadas na cache: os arquivos estao vindo da versao antiga da cache e a nova versao acabou de ser 
baixada e esta pronta para uso na proxima vez que o aplicativo for recarregado. Voce pode chamar 
swapCache() para dizer ao navegador que descarte a cache antiga imediatamente e comece a servir 
arquivos da nova cache. Note, entretanto, que isso pode levar a problemas de assimetria de versao, 
sendo que uma maneira mais segura de descarregar a cache antiga e come^ar a usar a nova e recarre- 
gar o aplicativo com Location.reload(). 

void updateQ 

Normalmente, o navegador verifica a existencia de uma nova versao do arquivo de manifesto para 
um aplicativo colocado na cache sempre que o aplicativo e carregado. Aplicativos da Web de longa 
dura^ao podem usar esse metodo para verificar a existencia de atualiza^oes mais frequentemente. 

Rotinas de tratamento de eventos 

O navegador dispara uma sequencia de eventos em ApplicationCache durante a verificaqao do ma¬ 
nifesto e coloca o processo de atualiza?ao na cache. Voce pode usar as propriedades de rotina de 
tratamento de eventos a seguir do objeto ApplicationCache para registrar rotinas de tratamento 
de evento ou pode usar os metodos EventTarget implementados pelo objeto ApplicationCache. As 
rotinas de tratamento da maioria desses eventos recebem um objeto Event simples. Contudo, as 
rotinas de tratamento para eventos em andamento (progress) recebem um objeto ProgressEvent, o 
qual pode ser usado para monitorar quantos bytes foram baixados. 
oncached 

Disparada quando um aplicativo e colocado na cache pela primeira vez. Esse sera o ultimo 
evento na sequencia de eventos. 
onchecking 

Disparada quando o navegador come^a a verificar se o arquivo de manifesto tern atualizaqbes. 
Esse e o primeiro evento em qualquer sequencia de eventos de cache de aplicativo. 
ondownloading 

Disparada quando o navegador come^a a baixar os recursos listados em um arquivo de mani¬ 
festo, ou na primeira vez que o aplicativo e colocado na cache ou quando ha uma atualizaqao. 
Geralmente, esse evento sera seguido por um ou mais eventos progress, 
onerror 

Disparada quando ocorre um erro durante o processo de atualiza^ao da cache. Isso pode ocor- 
rer se o navegador estiver off-line, por exemplo, ou se um aplicativo nao colocado na cache faz 
referenda a um arquivo de manifesto inexistente. 
onnoupdate 

Disparada quando o navegador determina que o manifesto nao mudou e o aplicativo colocado 
na cache esta atualizado. Esse e o ultimo evento na sequencia. 
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onobsolete 

Disparada quando o arquivo de manifesto de um aplicativo colocado na cache nao existe mais. 
Isso faz a cache ser exclufda. Esse e o ultimo evento na sequencia. 
onprogress 

Disparada periodicamente enquanto os arquivos do aplicativo estao sendo baixados e coloca- 
dos na cache. O objeto evento associado a esse evento e ProgressEvent. 
onupdateready 

Disparada quando uma nova versao do aplicativo foi baixada e colocada na cache (e esta pron¬ 
to para uso na proxima vez que o aplicativo for carregado). Esse e o ultimo evento na sequen¬ 
cia. 


ArrayBuffer 

uma sequencia de bytes de comprimento fixo 

Um ArrayBuffer representa uma sequencia de bytes de comprimento fixo na memoria, mas nao 
define um modo de obter ou configurar esses bytes. Os ArrayBufferView, assim como as classes Type- 
dArray, fornecem uma maneira de acessar e interpretar os bytes. 

Construtora 

new ArrayBuffer(unsigned long comprimento) 

Cria um novo ArrayBuffer com o numero de bytes especificado. Todos os bytes no novo ArrayBuffer 
sao inicializados com 0. 

Propriedades 

readonly unsigned long byteLength 

o comprimento, em bytes, do ArrayBuffer. 

ArrayBufferView 

propriedades comuns de tipos baseados em ArrayBuffers 

ArrayBufferView serve como superclasse de tipos que fornecem acesso aos bytes de um ArrayBuffer. 
Nao e possivel criar um ArrayBufferView diretamente: ele existe para definir as propriedades co¬ 
muns de subtipos como TypedArray e DataView. 

Propriedades 

readonly ArrayBuffer buffer 

O ArrayBuffer subjacente do qual esse objeto e um modo de exibi^ao. 

readonly unsigned long byteLength 

O comprimento, em bytes, da parte de buffer acessfvel por meio desse modo de exibi^ao. 

readonly unsigned long byteOffset 

A posi^ao inicial, em bytes, da parte do buffer acessfvel por meio desse modo de exibi^ao. 
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Attr 

urn atributo do elemento 

Um objeto Attr representa um atributo de um no Element. Um objeto Attr pode ser obtido por 
meio da propriedade attributes da interface Node ou chamando-se os metodos getAttributeNode() 
ou getAttributeNodeNSQ da interface Element. 

Como os valores de atributo podem ser representados completamente por strings, normalmente nao 
e necessario usar a interface Attr. Na maioria dos casos, o modo mais facil de trabalhar com atributos 
e com os metodos Element.getAttributeQ e Element.setAttributeQ. Esses metodos usam strings 
para valores de atributo e evitam o uso de objetos Attr. 

Propriedades 

readonly string localName 

O nome do atributo, nao incluindo nenhum prefixo de namespace, 
readonly string name 

O nome do atributo, incluindo o prefixo de namespace, se houve um. 

readonly string namespaceURI 

O URI que identifica o namespace do atributo ou null, caso nao tenha um. 
readonly string prefix 

O prefixo de namespace do atributo ou null, caso nao tenha um. 
string value 

O valor do atributo. 

Audio 

um elemento HTML <audio> Node, Element, MediaElement 

Um objeto Audio representa um elemento HTML <audio>. A nao ser por sua construtora, um ob¬ 
jeto Audio nao tern propriedades, metodos nem rotinas de tratamento de evento que nao sejam os 
hedados de MediaElement. 

Construtora 

new Audio([string src]) 

Essa construtora cria um novo elemento <audio> com um atributo preload configurado como “auto”. 
Se o argumento sic e especificado, e usado como valor do atributo src. 

BeforeUnloadEvent 

Objeto evento de eventos unload Event 

O evento unload e disparado em um objeto Window imediatamente antes do navegador ir para 
um novo documento e oferece a um aplicativo Web a oportunidade de perguntar ao usuario se ele 
realmente tern certeza de que deseja sair da pagina. O objeto passado para funijoes de tratamento de 
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evento unload e um objeto BeforeUnloadEvent. Se quiser exigir que o usuario confirme que real- 
mente deseja sair da pagina, nao precisa (e nao deve) chamar o metodo Window.confirm(). Em vez 
disso, retorne uma string da rotina de tratamento de evento ou configure o returnValue desse objeto 
evento com uma string. A string retornada ou configurada sera apresentada ao usuario no dialogo 
de con firm agio visto por ele. 

Consulte tambem Event e Window. 

Propriedades 

string returnValue 

Uma mensagem a ser exibida ao usuario em um dialogo de confirma^ao, antes de sair da pagina. 
Deixe essa propriedade sem configuragio, caso nao queira exibir um dialogo de con firm agio. 


Blob 

um trecho opaco de dados, como conteudo de arquivo 

Um Blob e um tipo opaco usado para troca de dados entre APIs. Os Blobs podem ser muito grandes 
e representar dados binarios, mas nada disso e obrigatorio. Os Blobs sao frequentemente armazena- 
dos em arquivos, mas isso e um detalhe da implementagio. Os Blobs expoem apenas seu tamanho 
e, opcionalmente, um tipo MIME. Eles definem um unico metodo para tratar de uma regiao de um 
Blob como Blob. 

Varias APIs utilizam Blobs: consulte FileReader para ver uma maneira de ler o conteudo de um 
Blob e BlobBuilder para ver um modo de criar novos objetos Blob. Consulte XMLHttpRequest para ver 
maneiras de baixar e carregar Blobs. Consulte a Segio 22.6 para ver uma discussao sobre Blobs e as 
APIs que os utilizam. 

Propriedades 

readonly unsigned long size 

O comprimento, em bytes, do Blob, 
readonly string type 

O tipo MIME do Blob, se ele tiver um, ou a string vazia, caso contrario. 

Metodos 

Blob slice(unsigned long inicio, unsigned long comprimento, [string tipoConteudo]) 
Retorna um novo Blob representando os comprimento bytes desse Blob, comegtndo no deslocamento 
(offset) inicio. Se tipoConteudo for especificado, sera usado como a propriedade type do Blob retornado. 


BlobBuilder 

cria novos Blobs 

Um objeto BlobBuilder e usado para criar novos objetos Blob a partir de strings de texto e bytes de 
objetos ArrayBuffer e outros Blobs. Para construir um Blob, crie um BlobBuilder, chame append() 
uma ou mais vezes e, em seguida, chame getBlobQ. 
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Construtora 

new BlobBuilder() 

Cria um novo BlobBuilder chamando a construtora BlobBuilder( ) sem argumentos. 

Metodos 

void append(string texto, [string finals]) 

Anexa o texto especificado, codificado com UTF-8, no Blob que esta sendo constrmdo. 
void append(Blob dados) 

Anexa o conteudo dos dados de Blob no Blob que esta sendo construfdo. 
void append(ArrayBuffer dados) 

Anexa os bytes dos dados de ArrayBuffer no Blob que esta sendo constrmdo. 

Blob getBlob( [string tipoConteudo ]) 

Retorna um Blob que representa todos os dados que foram anexados nesse BlobBuilder desde que 
ele foi criado. Cada chamada desse metodo retorna um novo Blob. Se tipoConteudo for especificado, 
sera o valor da propriedade type do Blob retornado. Se nao for especificado, o Blob retornado type 
sera a string vazia. 

Button 

um <button> HTML Node, Element, FormControl 

Um objeto Button representa um elemento HTML <button>. A maioria das propriedades e me¬ 
todos de Buttons esta descrita em FormControl e Element. Contudo, quando um Button tern uma 
propriedade type (consulte FormControl) “submit”, as outras propriedades listadas aqui especificam 
parametros de envio de formulario que anulam propriedades similares no form de Button (consulte 
FormControl). 

Propriedades 

As propriedades a seguir so tern significado quando <button> tern o type “submit”. 

string formAction 

Essa propriedade espelha o atributo HTML formaction. Para botoes de envio, anula a proprie¬ 
dade action do formulario. 
string formEnctype 

Essa propriedade espelha o atributo HTML formenctype. Para botoes de envio, anula a pro¬ 
priedade enctype do formulario e tern os mesmos valores validos para essa propriedade. 

string formMethod 

Essa propriedade espelha o atributo HTML formmethod. Para botoes de envio, anula a proprie¬ 
dade method do formulario. 
string formNoValidate 

Essa propriedade espelha o atributo HTML formnovalidate. Para botoes de envio, anula a 
propriedade noValidate do formulario. 
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string formTarget 

Essa propriedade espelha o atributo HTML formtarget. Para botoes de envio, anula a proprie- 
dade target do formulario. 


Canvas 

um elemento HTML para scripts de desenho Node, Element 

O objeto Canvas representa um elemento HTML canvas. Nao tern comportamento proprio, mas 
define uma API que suporta operates de desenho em scripts do lado do cliente. Voce pode especifi- 
car width e height diretamente nesse objeto e pode extrair uma imagem do canvas com toDataURL(), 
mas a API real de desenho e implementada por um objeto “contexto” separado, retornado pelo 
metodo getContext(). Consulte CanvasRenderingContext2D. 

Propriedades 

unsigned long height 
unsigned long width 

Essas propriedades espelham os atributos width e height da tag <canvas> e especificam as di- 
mensoes do espapa de coordenadas do canvas. Os padroes sao 300 para width e 150 para hei¬ 
ght. 

Se o tamanho do elemento canvas nao e especificado de outra forma em uma folha de estilo 
ou com o atributo em linha style, essas propriedades width e height tambem especificam as 
dimensoes na tela do elemento canvas. 

Configurar uma dessas propriedades (mesmo com seu valor atual) limpa o canvas com preto 
transparente e redefine todos os seus atributos graficos com seus valores padrao. 

Metodos 

object getContext(string idContexto, [any args...]) 

Esse metodo retorna um objeto com o qual e possivel desenhar no elemento Canvas. Quando se pas- 
sa a string “2d”, ele retorna um objeto CanvasRenderingContext2D para desenhos bidimensionais. 
Nao sao exigidos args adicionais nesse caso. 

Existe apenas um objeto CanvasRenderingContext2D por elemento canvas; portanto, chamadas 
repetidas de getContext("2d") retornam o mesmo objeto. 

HTML5 padroniza o argumento “2d” para esse metodo e nao define outro argumento valido. Ou- 
tro padrao, WebGL, esta em desenvolvimento para elementos graficos tridimensionais. Nos navega- 
dores que o suportam, voce pode passar a string “webgl” para esse metodo a fim de obter um objeto 
que permite renderiza^ao em 3D. Note, entretanto, que o objeto CanvasRenderingContext2D e o 
unico contexto de desenho documentado neste livro. 
string toDataURL( [string tipo], [any args...]) 

toDataURL() retorna o conteudo do bitmap canvas como um URL data: // que pode ser facilmente 
usado com uma tag <img> ou transmitido pela rede. Por exemplo: 

// Copia o conteudo de um canvas em um <img> e anexa no documento 
var canvas = document.getElementById("my_canvas"); 
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var image = document.createElement("img"); 
image.src = canvas. toDataURLQ; 
document, body. appendChild (image); 

O argumento tipo especifica o tipo MIME do formato de imagem a ser usado. Se esse argumento e 
omitido, o valor padrao e “imagem/png”. O formato de imagem PNG e o unico que as implemen- 
ta^oes sao obrigadas a suportar. Para tipos de imagem que nao sao PNG, argumentos adicionais po- 
dem ser passados para especificar detalhes da codifica^ao. Se tipo e “imagem/jpeg”, por exemplo, o 
segundo argumento deve ser um niimero entre 0 e 1, especificando o nivel de qualidade da imagem. 
Nenhum outro argumento de parametro estava padronizado quando este livro estava sendo escrito. 

Para evitar vazamentos de informafao entre origens, toDataURL( ) nao funciona em tags <canvas> que 
nao tern “origem limpa”. Um canvas nao tern origem limpa se nele ja foi desenhada uma imagem 
(diretamente por drawlmage() ou indiretamente por meio de CanvasPattern) com origem diferente 
da do documento que contem o canvas. Alem disso, um canvas nao tern origem limpa se nele foi 
desenhado texto usando uma fonte Web de origem diferente. 

CanvasGradient 

um gradiente colorido para usar em um canvas 

Um objeto CanvasGradient representa um degrade colorido que pode ser atribuido as pro- 
priedades strokeStyle e fillStyle de um objeto CanvasRenderingContext2D. Os metodos 
create LinearGradientQ e createRadialGradientQ de CanvasRenderingContext2D retornam ambos 
objetos CanvasGradient. 

Quando tiver criado um objeto CanvasGradient, use addColorStopQ para especificar quais cores 
devem aparecer em quais posi^oes dentro do gradiente. Entre as posifoes especificadas, as cores sao 
interpoladas para criar um degrade ou desvanecimento suave (fade). Se voce nao especificar paradas 
de cor, o gradiente sera preto transparente uniforme. 

Metodos 

void addColorStop(double deslocamento, string cor) 

addColorStopO especifica cores fixas dentro de um gradiente. cor e uma string de cor CSS. 
deslocamento e um valor em ponto flutuante no intervalo de 0.0 a 1.0 que representa uma fraQo 
entre os pontos inicial e final do gradiente. Um deslocamento 0 corresponde ao ponto inicial e um 
deslocamento 1 corresponde ao ponto final. 

Se voce especificar duas ou mais paradas de cor, o gradiente vai interpolar as cores suavemente entre 
as paradas. Antes da primeira parada, o gradiente vai exibir a cor da primeira parada. Apos a ultima 
parada, o gradiente vai exibir a cor da ultima parada. Se voce especificar apenas uma parada, o gra¬ 
diente tera uma unica cor uniforme. Se nao especificar uma parada de cor, o gradiente sera preto 
transparente uniforme. 


CanvasPattern 


um padrao baseado em imagem para uso em Canvas 
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Um objeto CanvasPattern e um objeto opaco retornado pelo metodo createPatternQ de um objeto 
CanvasRenderingContext2D. Um objeto CanvasPattern pode ser usado como valor das proprieda- 
des strokeStyle e fillStyle de um objeto CanvasRenderingContext2D. 

CanvasRenderingContext2D 

o objeto usado para desenhar em um canvas 

O objeto CanvasRenderingContext2D fornece propriedades e metodos para desenhar elementos 
graficos bidimensionais. As sefoes a seguir fornecem uma visao geral. Consulte a Se^ao 21.4, Canvas, 
CanvasGradient, CanvasPattern, ImageData e TextMetrics para ver mais detalhes. 

Criando e renderizando caminhos 

Um recurso poderoso do canvas e sua capacidade de construir formas a partir de operates de de- 
senho basicas e entao desenhar seus contornos ( traga-los ) ou pintar seu conteudo (preenche-los) . As 
operates acumuladas sao coletivamente referenciadas como caminho atual. Um canvas mantem um 
unico caminho atual. 

Para construir uma forma conectada a partir de varios segmentos, e necessario um ponto de jun^ao 
entre as operates de desenho. Para esse proposito, o canvas mantem uma posigao atual. As operates 
de desenho do canvas usam isso implicitamente como ponto de partida e o atualizam com o que 
normalmente e seu ponto final. Voce pode pensar nisso como um desenho feito com caneta sobre 
papel: ao se terminar uma linha ou curva em especial, a posigao atual e onde a caneta ficou apos 
concluir a opera^ao. 

Voce pode criar no caminho atual uma sequencia de formas desconectadas que sera renderizadas 
juntas, com os mesmos parametros de desenho. Para separar as formas, use o metodo moveTo() - 
isso move a posRao atual para um novo local sem adicionar uma linha de ligafao. Quando faz isso, 
voce cria um novo subcaminho, que e o termo de canvas usado para um conjunto de operates 
conectadas. 

As operates de caminho disponfveis sao lineToQ para desenhar linhas retas, rect() para desenhar 
retangulos, arc() e arcToQ para desenhar cfrculos parciais, e bezierCurveToQ e quadratic CurveToQ 
para desenhar curvas. 

Uma vez concluido o caminho, voce pode desenhar seu contorno com stroke( ), pintar seu conteudo 
com fill() ou fazer ambos. 

Alem de tra^ar e preencher, voce tambem pode usar o caminho atual para especificar a regiao de corte 
utilizada pelo canvas para renderizar. Os pixels dentro dessa regiao sao exibidos; os que estao fora, 
nao. A regiao de corte e acumulativa; chamar clip() cruza o caminho atual com a regiao de corte 
atual para gerar uma nova regiao. 

Se os segmentos em qualquer um dos subcaminhos nao estabelecem uma forma fechada, as opera¬ 
tes fill( ) e clip( ) as fecham implicitamente para voce, adicionando um segmento de linha virtual 
(nao visivel com um tra^o) do initio ao fim do subcaminho. Opcionalmente, voce pode chamar 
closePathQ para adicionar esse segmento de linha explicitamente. 

Para testar se um ponto esta dentro (ou no limite) do caminho atual, use isPointln Path (). Quando 
um caminho cruza a si mesmo ou consiste em varios subcaminhos sobrepostos, a defmiQo de “den- 
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tro” e baseada na regra de contorno diferente de zero. Se voce desenha um cfrculo dentro de outro e 
ambos sao desenhados na mesma dire^ao, tudo que esta dentro do cfrculo maior e considerado como 
estando dentro do caminho. Por outro lado, se um cfrculo e desenhado no sentido horario e o outro 
no sentido anti-horario, voce definiu uma forma de rosquinha e o interior do cfrculo menor esta fora 
do caminho. Essa mesma defini^ao de interior e usada pelos metodos -Fill () e clip(). 

Cores, degrades e padroes 

Ao preencher ou tra?ar caminhos, voce pode especificar como as linhas ou area preenchida sao ren- 
derizadas, usando as propriedades fillStyle e strokeStyle. Ambas aceitam strings de cor estilo CSS, 
assim como objetos Canvas Gradient e CanvasPattern que descrevem gradientes e padroes. Para criar 
um gradiente, use os metodos createLinearGradientQ ou createRadialGradientQ. Para criar um 
padrao, use createPattern(). 

Para especificar uma cor opaca usando nota?ao CSS, use uma string com a forma “#RRGGBB”, 
onde RR, GG e BB sao dfgitos hexadecimais especificando os componentes vermelho, verde e azul 
da cor como valores entre 00 e FF. Por exemplo, vermelho vivo e “#FF0000”. Para especificar uma 
cor parcialmente transparente, use uma string com a forma “rgba(R,G,B,A)”. Nessa forma, R, G 
e B especificam os componentes vermelho, verde e azul da cor como inteiros decimals entre 0 e 
255, e A especifica o componente alfa (opacidade) como um valor em ponto flutuante entre 0,0 
(totalmente transparente) e 1,0 (totalmente opaco). Por exemplo, vermelho vivo meio transparente 
e “rgba(255,0,0,0.5)”. 

Largura, terminates e jun^oes de linha 

Canvas define varias propriedades que especificam como as linhas sao traqadas. Voce pode especifi¬ 
car a largura da linha com a propriedade lineWidth, como os pontos finais das linhas sao desenhados, 
com a propriedade lineCap, e como as linhas sao unidas, usando a propriedade lineJoin. 

Desenhando retangulos 

Voce pode contornar e preencher retangulos com strokeRectQ e fillRectQ. Alem disso, pode lim- 
par a area definida por um retangulo com clearRectQ. 

Desenhando imagens 

Na API Canvas, as imagens sao especificadas com objetos Image que representam elementos HTMF 
<img> ou imagens fora da tela criadas com a construtora ImageQ. (Consulte a pagina de referenda 
de Image para ver os detalhes.) Um elemento <canvas> ou um elemento <video> tambem podem ser 
usados como fonte de uma imagem. 

Uma imagem pode ser desenhada em um canvas com o metodo drawImageQ, o qual, em sua forma 
mais geral, permite que uma regiao retangular arbitraria da imagem de origem tenha a escala muda- 
da e seja renderizada no canvas. 

Desenhando texto 

O metodo fillText() desenha texto e o metodo strokeTextQ desenha texto com contorno. A pro¬ 
priedade font especifica a fonte a ser usada; o valor dessa propriedade deve ser uma string de es- 
pecificafao de fonte CSS. A propriedade textAlign especifica se o texto e justificado a esquerda, 
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centralizado ou justificado a direita na coordenada X passada e a propriedade textBaseline especifica 
se o texto e desenhado em relaqao a coordenada Y passada. 

Espa^o e transforma^oes de coordenadas 

Por padrao, o esparto de coordenadas de um canvas tem sua origem em (0,0) no canto superior es- 
querdo do canvas, com os valores de x aumentando para a direita e os valores de y aumentando para 
baixo. Os atributos width e height da tag <canvas> especificam as coordenadas X e Ymaximas e uma 
unidade nesse espa?o de coordenadas normalmente se traduz em um pixel na tela. 

Voce pode definir seu proprio espa$o de coordenadas e as coordenadas passadas para os meto- 
dos de desenho em canvas serao transformadas automaticamente. Isso e feito com os metodos 
translateQ, scaleQ e rotateQ, os quais afetam a matriz de transformagao do canvas. Como o 
espa?o de coordenadas pode ser transformado dessa forma, as coordenadas passadas para metodos 
como lineToQ nao podem ser medidas em pixels e a API Canvas utibza numeros em ponto flutu- 
ante, em vez de inteiros. 

Sombras 

CanvasRenderingContext2D pode adicionar uma sombra projetada automaticamente em tudo que 
voce desenhar. A cor da sombra e especificada com shadowColor e seu deslocamento e alterado com 
shadowOff setX e shadowOff setY. Alem disso, a quantidade de suaviza^ao aplicada na borda da sombra 
pode ser configurada com shadowBlur. 

Composi^ao 

Normalmente, ao se desenhar em um canvas, o elemento grafico recentemente desenhado aparece 
sobre o conteudo anterior do canvas, ocultando partial ou totalmente o conteudo antigo, dependen- 
do da opacidade do novo elemento grafico. O processo de combinar novos pixels com pixels antigos 
e chamado de “composi^ao”, sendo que voce pode alterar o modo como o canvas compoe pixels, 
especificando valores diferentes para a propriedade globalCompositeOperation. Por exemplo, voce 
pode configurar essa propriedade de modo que o elemento grafico recentemente desenhado apare^a 
embaixo do conteudo ja existente. 

A tabela a seguir lista os valores de propriedade permitidos e seus signiflcados. A palavra origem na 
tabela se refere aos pixels que estao sendo desenhados no canvas e a palavra destino se refere aos pixels 
ja existentes no canvas. A palavra resultado se refere aos pixels resultantes da combina?ao de origem 
e destino. Nas formulas, a letra S e o pixel de origem, Deo pixel de destino, Reo pixel resultante, a s 
e o canal alfa (a opacidade) do pixel de origem e a d e o canal alfa do destino: 


Valor 

Formula 

Significado 

"copy" 

R = S 

Desenha o pixel de origem, ignorando o pixel de 
destino. 

"destination-atop" 

R=(l-a d )S + a s D 

Desenha o pixel de origem sob o destino. Se a origem e 
transparente, o resultado tambem e transparente. 


(continual 
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Valor 

Formula 

Significado 


"destination-in" 

R = a s D 

Multiplica o pixel de destino pela opacidade do pixel 
de origem, mas ignora a cor da origem. 

"destination-out" 

R = (i-o,)D 

0 pixel de destino se torna transparente quando a 
origem e opaca e e deixado intacto quando a origem e 
transparente. A cor do pixel de origem e ignorada. 

"destination-over" 

R = (1 - or d ) S + D 

0 pixel de origem aparece atras do pixel de destino, 
sendo exibido com base na transparency do destino. 

"lighter" 

R = S + D 

Os componentes de cor dos dois pixels sao 
simplesmente somados e cortados, caso a soma 
ultrapasseo valor maximo. 

"source-atop" 

R=a d S + (l-a s )D 

Desenha o pixel de origem sobre o destino, mas o 
multiplica pela opacidade do destino. Nao desenha 
nada sobre um destino transparente. 


R = a d S 

Desenha o pixel de origem, mas o multiplica pela 
opacidade do destino. A cor do destino e ignorada. 

Se o destino e transparente, o resultado tambem e 
transparente. 

"source-out" 

R = (l-a d )S 

0 resultado e o pixel de origem onde o destino e 
transparente e pixels transparentes onde o destino e 
opaco. A cor do destino e ignorada. 


R = S + (l-a s )D 

0 pixel de origem e desenhado sobre o pixel de 
destino. Se a origem e translucida, o pixel de destino 
contribui para o resultado. Esse e o valor padrao da 
propriedade globalCompositeOperation. 


R = (l-a d )S + (l-a s )D 

Se a origem e transparente, o resultado e o destino. Se 
o destino e transparente, o resultado e a origem. Se a 
origem e o destino sao ambos transparentes ou ambos 
opacos, o resultado e transparente. 


Salvando o estado grafico 

Os metodos save() e restore() permitem salvar e restaurar o estado de um objeto CanvasRende- 
ringContext2D. save() coloca o estado atual em uma pilha e restoreQ retira o estado salvo mais 
recentemente do topo da pilha e configura o estado atual do desenho com base nesses valores arma- 
zenados. 

Todas as propriedades do objeto CanvasRenderingContext2D (exceto a propriedade canvas, que e 
uma constante) fazem parte do estado salvo. A matriz de transforma?ao e a regiao de recorte tambem 
fazem parte do estado, mas o caminho atual e o ponto atual, nao. 

Manipulando pixels 

O metodo getImageData() permite consultar pixels brutos de um canvas e putImageData() permite 
configurar pixels individuals. Eles podem ser uteis, se voce quiser implementar operates de proces- 
samento de imagem em JavaScript. 
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Propriedades 

readonly Canvas canvas 

O elemento Canvas no qual esse contexto vai desenhar. 

any fillStyle 

A cor, padrao ou gradiente atual usado para preencher caminhos. Essa propriedade pode ser 
configurada com uma string de cor CSS ou com um objeto CanvasGradient ou CanvasPat- 
tern. O estilo de preenchimento padrao e preto uniforme. 

string font 

A fonte a ser usada por metodos de desenho de texto, especificada como uma string, usando 
a mesma sintaxe do atributo CSS font. O padrao e “lOpx sans-serif”. Se a string de fonte 
usa unidades de tamanho de fonte como “em” ou “ex” ou usa palavras-chave relativas, como 
“larger”, “smaller”, “bolder” ou “lighter”, esses itens sao interpretados como relativos ao estilo 
calculado da fonte CSS do elemento <canvas>. 
double globalAlpha 

Especifica transparency adicional a ser acrescentada a tudo que e desenhado no canvas. O va¬ 
lor alfa de todos os pixels desenhados no canvas e multiplicado pelo valor dessa propriedade. O 
valor deve ser um numero entre 0.0 (torna tudo completamente transparente) e 1.0 (o padrao: 
nao acrescenta transparency adicional). 

string globalCompositeOperation 

Essa propriedade especifica como os pixels de origem que estao sendo renderizados no can¬ 
vas sao combinados (ou “compostos”) com os pixels de destino que ja existem no canvas. 
Normalmente, essa propriedade so tern utilidade quando se esta trabalhando com cores par- 
cialmente transparentes ou a propriedade globalAlpha esta configurada. O valor padrao e 
“source-over”. Outros valores normalmente usados sao “destination-over” e “copy”. Con- 
suite a tabela de valores validos anterior. Note que, quando este livro estava sendo escrito, 
os navegadores tinham diferentes implementagroes de certos modos de composirjao: alguns 
compunham de forma local e alguns compunham globalmente. Consulte a Se$ao 21.4.13 
para ver os detalhes. 
string lineCap 

A propriedade lineCap especifica como as linhas devem ser terminadas. Isso so importa ao 
se desenhar linhas largas. Os valores validos para essa propriedade estao listados na tabela a 
seguir. O valor padrao e “butt”. 


Valor 

Significado 

"butt" 

Esse valor padrao especifica que a linha nao deve ter termina^ao. 0 fim da linha e reto e e perpendicular 
a sua diregao. A linha nao se estende alem de seu ponto extremo. 

"round" 

Esse valor especifica que as linhas devem terminar com um semicirculo cujo diametro e igual a largura 
da linha e que se estende alem do fim da linha por metade da sua largura. 

"square" 

Esse valor especifica que as linhas devem terminar com um retangulo. Esse valor e como“butt", mas a 
linha se estende por metade de sua largura. 
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string lineJoin 

Quando um caminho contem vertices onde segmentos de linha e/ou curvas se encontram, a 
propriedade lineJoin especifica como esses vertices sao desenhados. O efeito dessa proprieda- 
de so aparece ao se desenhar com linhas largas. 

O valor padrao da propriedade e “miter”, o qual especifica que as bordas externas dos dois 
segmentos de linha se estendem ate que se cruzem. Quando duas linhas formam um angulo 
agudo, as jun^oes chanfradas podem se tornar muito longas. A propriedade miterLimit coloca 
um limite superior no comprimento de uma cunha. Se uma cunha exceder esse limite, e con- 
vertida em chanfro. 

O valor “round” especifica que as bordas externas do vertice devem ser unidas com um arco 
preenchido, cujo diametro e igual a largura da linha. O valor “bevel” especifica que as bordas 
externas do vertice devem ser unidas com um triangulo preenchido. 

double lineWidth 

Especifica a largura da linha para operates de tra^ado (desenho de linha). O padrao e 1. As 
linhas sao centralizadas pelo caminho, com metade da largura da linha em cada lado. 
double miterLimit 

Quando linhas sao desenhadas com a propriedade lineJoin configurada como “miter” e duas 
linhas formam um angulo agudo, a cunha resultante pode ser muito longa. Quando as cunhas 
sao longas demais, se tornam visualmente asperas. Essa propriedade miterLimit coloca um 
limite superior no comprimento da cunha. Essa propriedade expressa uma rela^ao do compri¬ 
mento da cunha e metade da largura da linha. O valor padrao e 10, ou seja, uma cunha nunca 
deve ser mais longa do que 5 vezes a largura da linha. Se uma cunha formada por duas linhas 
for maior do que o maximo permitido por miterLimit, essas duas linhas serao unidas com um 
chanfro, em vez de cunha. 
double shadowBlur 

Especifica a quantidade de borramento que as sombras devem ter. O padrao e 0, o qual produz 
sombras com bordas nftidas. Valores maiores produzem borramentos maiores, mas note que as 
unidades nao sao medidas em pixels e nao sao afetadas pela transforma?ao atual. 

string shadowColor 

Especifica a cor das sombras como uma string de cor CSS. O padrao e preto transparente. 

double shadowOffsetX 
double shadowOffsetY 

Especificam o deslocamento horizontal e vertical das sombras. Valores maiores fazem o objeto 
sombreado parecer flutuar sobre o fundo. O padrao e 0. Esses valores sao em unidades do 
espafo de coordenadas e sao independentes da transforma^ao atual. 

any strokeStyle 

Especifica a cor, o padrao ou o gradiente usado para traqar (desenhar) caminhos. Essa proprie¬ 
dade pode ser uma string de cor CSS ou um objeto CanvasGradient ou CanvasPattern. 

string textAlign 

Especifica o alinhamento horizontal do texto e o significado da coordenada X passada para 
fillText() e strokeTextQ. Os valores validos sao “left”, “center”, “right”, “start” e “end”. O 
significado de “start” e “end” depende do atributo dir (direQo do texto) da tag <canvas>. O 
padrao e “start”. 
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string textBaseline 

Especifica o alinhamento vertical do texto e o significado da coordenada Y passada para 
fillText() e strokeText(). Os valores validos sao “top”, “middle”, “bottom”, “alphabetic”, 
“hanging” e “ideographic”. O padrao e “alphabetic”. 


Metodos 

void arc(double x, y,iaio, angulolnicial, anguloFinal, [boolean anti-horario ]) 

Esse metodo adiciona um arco no subcaminho atual de um canvas, usando um ponto central e um 
raio. Os tres primeiros argumentos desse metodo especificam o centra e o raio de um circulo. Os 
dois argumentos seguintes sao angulos que especificam os pontos inicial e final de um arco ao lon- 
go do circulo. Esses angulos sao medidos em radianos. A posi^ao de tres horas ao longo do eixo X 
positivo e um angulo 0, sendo que os angulos aumentam no sentido horario. O ultimo argumento 
especifica se o arco e percorrido no sentido anti-horario (true) ou horario (false ou omitido) ao 
longo da circunferencia do circulo. 

Chamar esse metodo adiciona uma linha reta entre o ponto atual e o ponto inicial do arco e depois 
adiciona o arco em si no caminho atual. 


void arcTo(double xl, yl, x2, y2, raio) 

Esse metodo adiciona uma linha reta e um arco no subcaminho atual e descreve esse arco de uma 
maneira que o torna especialmente util para adicionar cantos arredondados em poligonos. Os ar¬ 
gumentos xl e yl especificam um ponto PI e os argumentos x2 e y2 especificam um ponto P2. O 
arco adicionado no caminho e parte de um circulo com o raio especificado. O arco tern um ponto 
tangente a linha da posi^ao atual ate PI e um ponto tangente a linha de PI a P2. O arco comefa e 
termina nesses dois pontos tangentes e e desenhado na dire^ao que os conecta com o arco mais cur- 
to. Antes de adicionar o arco no caminho, esse metodo adiciona uma linha reta do ponto atual ate 
o ponto inicial do arco. Apos a chamada desse metodo, o ponto atual esta no ponto final do arco, o 
qual fica na linha entre Pie P2. 


Dado um objeto contexto c, voce pode desenhar um quadrado de 100x100 com cantos arredonda¬ 
dos (de raios variados) com codigo como segue: 


c.beginPathQ; 
c.moveTo(l50, 100); 
c.arcTo(200,100,200,200,40); 

c. arcTo(200,200,100,200,30); 

c.arcTo(i00,200,100,100,20); 

c.arcTo(i00,100,200,100,10); 

c.closePathQ; 

c.strokeQ; 


// Comeca no meio da borda superior 

// Desenha a borda superior e o canto superior direito 

// arredondados 

// Desenha a borda direita e o canto inferior direito 
// (menos) arredondados 

// Desenha a inferior e o canto inferior esquerdo 
// arredondados 

// Desenha a esquerda e o canto superior esquerdo 
// arredondados 

// De volta ao ponto de partida. 

// Desenha o caminho 


void beginPathQ 

beginPathQ descarta qualquer caminho atualmente definido e inicia um novo. Nao ha um ponto 
atual apos uma chamada de beginPath(). 

Quando o contexto de um canvas e criado pela primeira vez, beginPath( ) e chamado implicitamente. 
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void bezierCurveTo(double pclx, pcly, pc2x, pc2y, x, y) 

bezierCurveToQ adiciona uma curva Bezier cubica no subcaminho atual de um canvas. O ponto 
inicial da curva e o ponto atual do canvas e o ponto final e (x,y). Os dois pontos de controle da 
curva Bezier (pcXl, pcYl) e (pcX2, pcY2) definem a forma da curva. Quando esse metodo retorna, a 
posi^ao atual e (x,y). 

void clearRect(double x, y, larguia, altuia) 

clearRect() preenche o retangulo especificado com preto transparente. Ao contrario de rect(), nao 
afeta o ponto atual nem o caminho atual. 
void clip() 

Esse metodo calcula a intersec^ao do interior do caminho atual com a regiao de recorte atual e usa 
essa regiao (menor) como a nova regiao de recorte. Note que nao ha como aumentar a regiao de re¬ 
corte. Se quiser uma regiao de recorte temporaria, voce deve primeiro chamar save() para posterior- 
mente chamar restore() a fim de restaurar a regiao de recorte original. A regiao de recorte padrao de 
um canvas e o proprio retangulo do canvas. 

Assim como o metodo fill(), clip() trata todos os subcaminhos como fechados e usa a regra de 
contorno diferente de zero para distinguir o interior do caminho do seu exterior. 

void closePath() 

Se o subcaminho atual do canvas e aberto, closePathQ o fecha, adicionando uma linha que conecta 
o ponto atual ao primeiro ponto do subcaminho. Entao, inicia um novo subcaminho (como se esti- 
vesse chamando moveToQ) nesse mesmo ponto. 

fillQ e clip() tratam todos os subcaminhos como se tivessem sido fechados, de modo que voce 
so precisa chamar closePathQ explicitamente se quiser traqar um caminho fechado com strokeQ. 
ImageData createImageData(ImageData dadosimagem) 

Retorna um novo objeto ImageData com as mesmas dimensoes de dados. 

ImageData createImageData(double u, double h) 

Retorna um novo objeto ImageData com a largura e altura especificadas. Todos os pixels dentro 
desse novo objeto ImageData sao inicializados com preto transparente (todos os componentes de 
cor e alfa sao 0). 

Os argumentos w e h especificam as dimensoes da imagem em pixels CSS. As implementa^oes po- 
dem mapear pixels CSS simples em mais de um pixel de dispositivo subjacente. As propriedades 
width e height do objeto ImageData retornado especificam as dimensoes da imagem em pixels de 
dispositivo e esses valores podem nao corresponder aos argumentos u eh. 

CanvasCradient createLinearCradient(double XO, yO, xl, yl) 

Esse metodo cria e retorna um novo objeto CanvasGradient que interpola as cores entre o ponto ini¬ 
cial (x0,y0) e o ponto final (xl,yl) linearmente. Note que esse metodo nao especifica qualquer cor 
para o gradiente. Para isso, use o metodo addColorStopQ do objeto retornado. Para tra^ar linhas ou 
preencher areas usando um degrade, atribua a um objeto CanvasGradient as propriedades strokeS- 
tyle ou fillStyle. 

CanvasPattern createPattern(Element imagem, string repeticao ) 

Esse metodo cria e retorna um objeto CanvasPattern representando o padrao definido por uma 
imagem disposta lado a lado. O argumento imagem deve ser um elemento <img>, <canvas> ou <video> 
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contendo a imagem a ser usada como padrao. O argumento repeticao especifica como a imagem e 
disposta lado a lado. Os valores possfveis sao: 


Valor 

Significado 

"repeat" 

Dispoe a imagem lado a lado nas duas direjoes. Esse e o padrao. 

"repeat-x" 

Dispoe a imagem lado a lado apenas na dimensao X. 

"repeat-y" 

Dispoe a imagem lado a lado apenas na dimensao Y. 

"no-repeat" 

Nao dispoe a imagem lado a lado; a utiliza apenas uma vez. 


Para usar um padrao para tra^ar linhas ou preencher areas, use um objeto CanvasPattern como valor 
das propriedades strokeStyle ou fillStyle. 

CanvasCradient createRadialGradient(double xO, yO, rO, xl, yl, il) 

Esse metodo cria e retorna um novo objeto CanvasGradient que interpola as cores entre as circun- 
ferencias dos dois cfrculos especificados radialmente. Note que esse metodo nao especifica qualquer 
cor para o gradiente. Para isso, use o metodo addColorStopQ do objeto retornado. Para tra^ar li¬ 
nhas ou preencher areas usando um gradiente, atribua a um objeto CanvasGradient as propriedades 
strokeStyle ou fillStyle. 

Os gradientes radiais sao renderizados com a cor no deslocamento 0 da circunferencia do primeiro 
cfrculo, a cor no deslocamento 1 do segundo cfrculo e valores de cor interpolados nos cfrculos entre 
os dois. 

void drawlmage(Element imagem, double dx, dy, [du, dh]) 

Copia a imagem especificada (que deve ser um elemento <img>, <canvas> ou <video>) no canvas, com 
seu canto superior esquerdo em (dx,dy). Se du e dh sao especificados, a imagem muda de escala de 
modo a ter du pixels de largura e dh pixels de altura. 

void drawlmage(Element imagem, double sx, sy, su, sh, dx, dy, du, dh) 

Essa versao do metodo drawImageQ copia um retangulo de origem da imagem especificada em um 
retangulo de destino do canvas, imagem deve ser um elemento <img>, <canvas> ou <video>. (sx,sy) 
especifica o canto superior esquerdo do retangulo de origem dentro dessa imagem e su e sh especifi- 
cam a largura e a altura do retangulo de origem. Note que esses argumentos sao dados em pixels CSS 
e nao estao sujeitos a transforma^ao. Os argumentos restantes especificam o retangulo de destino 
no qual a imagem deve ser copiada: consulte a versao de cinco argumentos de draw Image () para ver 
os detalhes. Note que esses argumentos de retangulo de destino sao transformados pela matriz de 
transforma^ao atual. 

void fill() 

fill( ) preenche o caminho atual com a cor, degrade ou padrao especificado pela propriedade fillS¬ 
tyle. Os subcaminhos que nao estao fechados sao preenchidos como se o metodo closePath() fosse 
chamado neles. (Note, entretanto, que isso nao faz esses subcaminhos serem realmente fechados.) 

Preencher um caminho nao o limpa. Voce pode chamar strokeQ, apos chamar fill(), sem redefinir 
o caminho. 
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Quando o caminho cruza ele mesmo ou quando subcaminhos se sobrepoem, fill() canvas usa a 
regra de contorno diferente de zero para determinar quais pontos estao dentro do caminho e quais 
estao fora. Isso significa, por exemplo, que se seu caminho define um quadrado dentro de um circulo 
e o subcaminho do quadrado for desenhado na dire^ao oposta ao caminho do circulo, o interior do 
quadrado vai estar fora do caminho e nao sera preenchido. 
void fillRect(double x, y, largura, altuia ) 

fillRect() preenche o retangulo especificado com a cor, gradiente ou padrao definido pela proprie- 
dade fillStyle. 

Ao contrario do metodo rect(), fillRect () nao tern qualquer efeito sobre o ponto atual ou sobre o 
caminho atual. 

void fillText(string texto, double x, y, [double largMax ]) 

fillTextQ desenha texto usando as propriedades font e fillStyle atuais. Os argumentos x ey espe- 
cificam onde o texto deve ser desenhado no canvas, mas a interpreta^ao desses argumentos depende 
das propriedades textAlign e textBaseline, respectivamente. 

Se textAlign e left ou start (o padrao) para um canvas que usa texto da esquerda para a direita 
(tambem o padrao) ou end para um canvas que usa texto da direita para a esquerda, o texto e dese¬ 
nhado a direita da coordenada X especificada. Se textAlign e center, o texto e centralizado horizon- 
talmente em torno da coordenada X especificada. Caso contrario (se textAlign e “right”, e “end” 
para texto da esquerda para a direita ou e “start” para texto da direita para a esquerda), o texto e 
desenhado a esquerda da coordenada X especificada. 

Se textBaseline e “alphabetic” (o padrao), “bottom” ou “ideographic”, a maioria dos caracteres vai 
aparecer acima da coordenada Y especificada. Se textBaseline for “center”, o texto sera centralizado 
aproximadamente na vertical, na coordenada Y especificada. E se textBaseline for “top” ou “han¬ 
ging”, a maioria dos caracteres vai aparecer abaixo da coordenada Y especificada. 

O argumento optional largMax especifica uma largura maxima para o texto. Se texto for mais largo 
do que largMax, o texto sera desenhado usando uma versao menor ou mais condensada da fonte. 
ImageData getImageData(double sx, sy, sw, sh) 

Os argumentos desse metodo sao coordenadas nao transformadas que especificam uma regiao re- 
tangular do canvas. O metodo copia os dados de pixel dessa regiao do canvas em um novo objeto 
ImageData e retorna esse objeto. Consulte ImageData para ver uma explica^ao sobre como acessar os 
componentes vermelho, verde, azul e alfa dos pixels individuals. 

Os componentes de cor RGB dos pixels retornados nao sao previamente multiplicados pelo valor de 
alfa. Se quaisquer partes do retangulo solicitado fleam fora do limite do canvas, os pixels associados 
no objeto ImageData sao configurados com preto transparente (tudo zero). Se a implementa^ao usar 
mais de um pixel de dispositivo por pixel CSS, as propriedades width e height do objeto ImageData 
retornado sercao diferentes dos argumentos sw e sh. 

Assim como Canvas.toDatallRL(), esse metodo esta sujeito a uma verifica^ao de seguran^a para im- 
pedir vazamento de informafoes entre origens. getlmageDataQ so retorna um objeto ImageData se 
o canvas subjacente tern “origem limpa”; caso contrario, lan$a uma excecjao. Um canvas nao tern 
origem limpa se ja teve uma imagem desenhada (diretamente por meio de drawImageQ ou indireta- 
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mente, por meio de um CanvasPattern) de origem diferente da do documento que contem o canvas. 
Alem disso, um canvas nao tem origem limpa se ja teve texto desenhado usando uma fonte Web de 
origem diferente. 

boolean isPointInPath(double x, y) 

isPointlnPathQ retorna true se o ponto especificado cai dentro ou sobre o caminho atual; caso con- 
trario, retorna false. O ponto especificado nao e transformado pela matriz de transforma^ao atual. x 
deve ser um valor entre 0 e canvas .width e y deve ser um valor entre 0 e canvas. height. 

O motivo de isPointlnPathQ testar pontos nao transformados e o fato de ser projetado para “teste 
de sucesso”: determinar se o clique de mouse de um usuario (por exemplo) foi dado na parte do can¬ 
vas descrito pelo caminho. Para se fazer o teste de sucesso, as coordenadas do mouse devem primeiro 
ser transladadas para que sejam relativas ao canvas, em vez da janela. Se o tamanho do canvas na tela 
e diferente do tamanho declarado por seus atributos width e height (se style.width e style.height 
foram configurados, por exemplo), as coordenadas do mouse tambem precisam mudar de escala 
para corresponder as coordenadas do canvas. A funfao a seguir foi projetada para uso como rotina 
de tratamento de evento onclick de um <canvas> e faz a transforma^ao necessaria para converter 
coordenadas do mouse em coordenadas do canvas: 

// Uma rotina de tratamento de evento onclick para uma tag canvas. Presume que um caminho 
// esta definido. 
function hittest(event) { 

var canvas = this; // Chamada no contexto do canvas 

var c = canvas.getContext("2d"); // Obtem o contexto de desenho do canvas 

// Obtem o tamanho e a posiqao do canvas 
var bb = canvas.getBoundingClientRectQ; 

// Converte coordenadas de evento de mouse em coordenadas do canvas 
var x = (event.clientX-bb.left)*(canvas.width/bb.width); 
var y = (event.clientY-bb.top)*(canvas.height/bb.height); 

// Preenche o caminho se o usuario clicou nele 
if (c.isPointInPath(x,y)) c.fillQ; 

} 

void lineTo(double x, double y) 

lineToQ adiciona uma linha reta no subcaminho atual. A linha come^a no ponto atual e termina em 
(x,y). Quando esse metodo retorna, a posiqao atual e (x,y). 

TextMetrics measureText(string texto ) 

measureTextQ mede a largura que o texto especificado ocuparia se fosse desenhado com a font atual 
e retorna um objeto TextMetrics contendo o resultado da medida. Quando este livro estava sendo 
escrito, o objeto retornado tinha apenas uma propriedade width e a altura e o envelope do texto nao 
eram medidos. 

void moveTo(double x, double y) 

moveToQ configura a posiQo atual como (x,y) e inicia um novo subcaminho, sendo esse o primeiro 
ponto. Se houve um subcaminho anterior e ele consistia em apenas um ponto, esse subcaminho 
vazio e removido do caminho. 
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void putImageData(ImageData dadosimagem, double dx, dy, [sx, sy, sw, s/j]) 
putlmageDataQ copia um bloco retangular de pixels de um objeto ImageData no canvas. Essa e uma 
opera^ao de copia de pixel de baixo rn'vel: os atributos globalCompositeOperation e globalAlpha sao 
ignorados, assim como os atributos de regiao de recorte, matriz de transformafao e desenho de 
sombra. 

Os argumentos dx e dy especificam o ponto de destino no canvas. Os pixels de dados serao copiados 
no canvas a partir desse ponto. Esses argumentos nao sao transformados pela matriz de transforma- 
fao atual. 

Os quatro ultimos argumentos especificam um retangulo de origem dentro de ImageData. Se es- 
pecificados, apenas os pixels dentro desse retangulo serao copiados no canvas. Se esses argumentos 
forem omitidos, todos os pixels de ImageData serao copiados. Se esses argumentos especificarem 
um retangulo que ultrapasse os limites de ImageData, o retangulo sera cortado nesses limites. Sao 
permitidos valores negativos para sx e sy. 

Um uso para objetos ImageData e como “armazenamento de apoio” para um canvas - salvar uma 
copia dos pixels do canvas em um objeto ImageData (usando getlmageDataQ) permite desenhar 
temporariamente no canvas e entao restaura-lo ao seu estado original com putlmageDataQ. 

void quadraticCurveTo(double pcx, pcy, x, y) 

Esse metodo adiciona um segmento de curva Bezier quadratica no subcaminho atual. A curva co- 
me<ja no ponto atual e termina em (x,y). O ponto de controle (cpX, cpY) especifica a forma da 
curva entre esses dois pontos. (Entretanto, os calculos matematicos das curvas Bezier estao fora dos 
objetivos deste livro.) Quando esse metodo retorna, a posi^ao atual e (x,y). Consulte tambem o 
metodo bezierCurveToQ. 
void rect(double x, y, w, h) 

Esse metodo adiciona um retangulo no caminho. Esse retangulo e ele proprio um subcaminho e 
nao esta conectado a outro subcaminho do caminho. Quando esse metodo retorna, a posipio atual e 
(x,y). Uma chamada para esse metodo e equivalente a seguinte sequencia de chamadas: 

c.moveTo(x,y); 
c.lineTo(x+w, y); 
c.lineTo(x+w, y+h); 
c.lineTo(x, y+h); 
c.closePathQ; 

void restoreQ 

Esse metodo retira da pilha de estados graficos salvos e restaura os valores das propriedades de Can- 
vasRenderingContext2D, o caminho de corte e a matriz de transforma^ao. Consulte o metodo 
saveQ para obter mais informa^oes. 

void rotate(double angulo) 

Esse metodo altera a matriz de transformapio atual, de modo que qualquer desenho subsequente 
aparece rotacionado pelo angulo especificado dentro do canvas. Ele nao gira o elemento <canvas> em 
si. Note que o angulo e especificado em radianos. Para converter graus em radianos, multiplique por 
Math.PI e divida por 180. 
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void save() 

save( ) coloca uma copia do estado atual da imagem grafica em uma pilha de estados graflcos salvos. 
Isso permite alterar o estado grafico temporariamente e depois restaurar os valores anteriores com 
uma chamada a restore!). 

O estado grafico de um canvas inclui todas as propriedades do objeto CanvasRenderingContext2D 
(exceto a propriedade somente de leitura canvas). Inclui tambem a matriz de transformafao resul- 
tante de chamadas a rotate(), scale!) e translate(). Alem disso, inclui o caminho de recorte, que 
e especificado com o metodo clip(). Note, entretanto, que o caminho atual e a posi^ao atual nao 
fazem parte do estado grafico e nao sao salvos por esse metodo. 
void scale(double sx, double sy) 

scale!) adiciona uma transformaqao de escala na matriz de transforma?ao atual do canvas. A mu- 
danija de escala e feita com fatores de escala horizontal e vertical independentes. Por exemplo, passar 
os valores 2,0 e 0,5 faz com que os caminhos desenhados subsequentemente sejam duas vezes mais 
largos e tenham a metade da altura que teriam. Especificar um valor negativo para sx faz as coorde- 
nadas X serem rebatidas ao longo do eixo Y e um valor negativo de sy faz as coordenadas Y serem 
rebatidas ao longo do eixo X. 
void setTransform(double a, b, c, d, e, f) 

Esse metodo permite configurar a matriz de transformafao atual diretamente, em vez de por meio 
de uma serie de chamadas a translate!), scale() e rotate!). Apos a chamada desse metodo, a nova 
transforma^ao e: 

y' = b d f x y = bx+dy+f 
1 0 0 1 1 

void stroke!) 

O metodo stroke!) desenha o contorno do caminho atual. O caminho define a geometria da linha 
produzida, mas a aparencia visual dessa linha depende das propriedades strokeStyle, lineWidth, 
lineCap, lineJoin e miterLimit. 

O termo stroke se refere a um tra^o de caneta ou pincel. Significa “desenhar o contorno de”. Com¬ 
pare esse metodo stroke!) com fill(), que preenche o interior de um caminho, em vez de tra^ar 
seu contorno. 

void strokeRect(double x, y, w, h) 

Esse metodo desenha o contorno (mas nao preenche o interior) de um retangulo com a posi?ao e o 
tamanho especificados. A cor e a largura da linha sao especificados pelas propriedades strokeStyle e 
lineWidth. A aparencia dos cantos do retangulo e especificada pela propriedade lineJoin. 

Ao contrario do metodo rect(), strokeRectQ nao tern efeito sobre o caminho atual nem sobre o 
ponto atual. 

void strokeText(string texto, double x, y, [ laigMax ]) 

strokeText() funciona exatamente como fillText(), exceto que, em vez de preencher os caracteres 
individuals com fillStyle, tra^a o contorno de cada caractere usando strokeStyle. strokeText() 
produz interessantes efeitos graflcos quando usado em tamanhos de fonte grandes, mas fillText() e 
mais usado para desenho de texto. 
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void transform(double a, b, c, d, e, f) 

Os argumentos desse metodo especificam os seis elementos nao triviais de uma matriz de transfor- 
ma<jao afim T de 3x3: 

b d f 
0 0 1 

transform() configura a matriz de transforma^ao atual com o produto da matriz de transforma^ao 
eT: 

CTM' = CTM x T 

Translates, mudamjas de escala e rotates podem ser implementadas em termos desse metodo 
transformQ de uso geral. Para uma transla^ao, chame transform(i,0,0,i,dx,dy). Para uma mudan^a 
de escala, chame transform(sx, 0, 0, sy, 0, 0). Para uma rotaqao no sentido horario em torno da 
origem, por um angulo x, use: 

transform(cos(x),sin(x),-sin(x), cos(x), 0, 0) 

Para um cisalhamento por um fator k paralelo ao eixo X, chame transform(l,0, k, 1 , 0 ,o). Para um 
cisalhamento paralelo ao eixo Y, chame transform(i,k,0,1,0,0). 
void translate(double x, double y) 

translate() adiciona deslocamentos horizontal e vertical na matriz de transforma^ao do canvas. Os 
argumentos dx e dy sao somados a todos os pontos em quaisquer caminhos definidos subsequente- 
mente. 

ClientRect 

o envelope deumelemento 

Um objeto ClientRect descreve um retangulo, usando coordenadas de Window ou da janela de vi- 
sualiza^ao. O metodo getBoundingClientRect() de Element retorna objetos desse tipo para descrever o 
envelope de um elemento na tela. Os objetos ClientRect sao estaticos em x: eles nao mudam quando 
o elemento que descrevem muda. 

Propriedades 

readonly float bottom 

A posi?ao Y, em coordenadas da janela de visualiza^ao, do lado inferior do retangulo. 
readonly float height 

A altura, em pixels, do retangulo. No IE8 e anteriores, essa propriedade nao e definida; em vez 
disso, use bottom-top. 
readonly float left 

A posi^ao X, em coordenadas da janela de visualiza^ao, do lado esquerdo do retangulo. 
readonly float right 

A posi?ao X, em coordenadas da janela de visuabza^ao, do lado direito do retangulo. 
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readonly float top 

A posi^ao Y, em coordenadas da janela de visualiza^ao, do lado superior do retangulo. 
readonly float width 

A largura, em pixels, do retangulo. No IE8 e anteriores, essa propriedade nao e definida; em 
vez disso, use right-left. 


CloseEvent 

especifica se um WebSocketfoi fechado normalmente Event 

Quando uma conexao de WebSocket se fecha, um evento close que nao borbulha e nao pode ser can- 
celado e disparado no objeto WebSocket e um objeto CloseEvent associado e passado para todas as 
rotinas de tratamento de evento registradas. 

Propriedades 

readonly boolean wasClean 

Se a conexao de WebSocket foi fechada da maneira controlada especificada pelo protocolo 
WebSocket, com reconhecimento entre cliente e servidor, diz-se que o fechamento e limpo e 
essa propriedade sera true. Se essa propriedade e false, o WebSocket pode ter fechado como 
resultado de um erro de rede de algum tipo. 


Comment 

um comentario HTML ou XML Node 

Um no Comment representa um comentario em um documento HTML ou XML. O conteudo do 
comentario (isto e, o texto entre <! - - e -->) esta disponrvel por intermedio da propriedade data ou 
da propriedade nodeValue herdada de Node. Voce pode criar um objeto comentario com Document. 
createComment(). 

Propriedades 

string data 

O texto do comentario. 
readonly unsigned long length 

O niimero de caracteres no comentario. 

Metodos 

void appendData(string dados) 

void deleteData(unsigned long deslocamento, unsigned long contagem) 
void insertData(unsigned long deslocamento, string dados) 

void replaceData(unsigned long deslocamento, unsigned long contagem, string dados) 
string substringData(unsigned long deslocamento, unsigned long contagem) 

Os nos Comment tern a maioria dos metodos de um no Text e esses metodos funcionam como 
acontece nos nos Text. Eles estao listados aqui, mas consulte a documentaqao em Text. 
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Console 

safda de depuragao 

Os navegadores modernos (e os mais antigos com extensoes para depura<jao instaladas, como o 
Firebug) definem uma propriedade global console que se refere a um objeto Console. Os metodos 
desse objeto definem uma API para tarefas de depura^ao simples, como registrar mensagens em uma 
janela de console (a console pode ter um nome como “Developer Tools” ou “Web Inspector”). 

Nao ha um padrao formal que defina a API Console, mas a extensao para depura?ao Firebug do 
Firefox foi estabelecida como padrao de fato e os fornecedores de navegador parecem estar imple- 
mentando a API Firebug, que esta documentada aqui. O suporte para a funijao console. log() basica 
e praticamente universal, mas as outras fun (joes podem nao ser tao bem suportadas em todos os 
navegadores. 

Note que em alguns navegadores mais antigos, a propriedade console e definida apenas quando a ja¬ 
nela de console esta aberta, sendo que executar scripts que utilizam a API Console sem que a console 
esteja aberta vai causar erros. 

Consulte tambem ConsoleCommandLine. 

Metodos 

void assert(any expiessao, string mensagem) 

Exibe uma mensagem de erro na console caso expiessao seja false ou um valor falso, como null, 
undefined, 0 ou a string vazia. 
void count([string titulo]) 

Exibe a string titulo especificada, junto com uma contagem do numero de vezes que esse metodo 
foi chamado com essa string, 
void debug(any mensagem...) 

E como console.log(), mas marca a safda como informaijao de depura<jao. 
void dir(any objeto) 

Exibe o objeto JavaScript na console de uma maneira que permite ao desenvolvedor examinar suas 
propriedades ou elementos e explorar objetos ou arrays aninhados interativamente. 
void dirxml(any no) 

Exibe marcaijao XML ou HTML do documento no na console, 
void error(any mensagem...) 

E como console.log(), mas marca a safda como um erro. 
void group(any mensagem...) 

Exibe mensagem da mesma maneira que log(), mas a exibe como tftulo de um grupo de mensagens 
de depuratjao que pode ser recolhido. Toda safda de console subsequente sera formatada como parte 
desse grupo, ate que ocorra uma chamada correspondente de groupEndQ. 

void groupCollapsed(any mensagem...) 

Inicia um novo grupo de mensagens, mas comeija em seu estado recolhido, de modo que a safda de 
depurafao subsequente fica oculta por padrao. 
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void groupEnd() 

Finaliza o grupo de safda de depuraQo iniciado mais recentemente com groupQ ou groupCollap- 
sed(). 

void info(any mensagem ...) 

E como console.log(), mas marca a safda como mensagem informativa. 
void log(string foimato, any mensagem ...) 

Esse metodo exibe seus argumentos na console. No caso mais simples, quando foimato nao contem 
caracteres %, ele simplesmente convene seus argumentos em strings e as exibe com espa^os entre 
elas. Quando um objeto for passado para esse metodo, e possfvel clicar na string exibida na console 
para ver o conteudo do objeto. 

Para mensagens de log mais complexas, esse metodo suporta um subconjunto simples dos recursos 
de formataQo de printf () da linguagem C. Os argumentos mensagem serao interpolados no argu- 
mento foimato no lugar das sequencias de caractere “%s”, “%d”, “%i”, “%f” e “%o” e, entao, a 
string formatada sera exibida na console (seguida por qualquer um dos argumentos mensagem nao 
utilizados). Os argumentos que substituem “%s” sao formatados como strings. Os que substituem 
“%d” ou “%i” sao formatados como inteiros. Os que substituem “%f” sao formatados como nu- 
meros em ponto flutuante e os que substituem “%o” sao formatados como objetos em que se pode 
clicar. 

void profile([string titulo]) 

Inicia o tra^ador de perfil de JavaScript e exibe titulo no infcio de seu relatorio. 

void profileEndQ 

Para o tra^ador de perfil e exibe seu relatorio de perfil de codigo. 
void time(string nome) 

Inicia um timer com o nome especificado. 
void timeEnd(string nome) 

Finaliza o timer com o nome especificado e exibe o nome e o tempo decorrido desde a chamada cor- 
respondente de time() 

void traceQ 

Exibe uma pilha com o rastro. 
void warn(any mensagem ...) 

E como console. log( ), mas marca a safda como um aviso. 

ConsoleCommandLine 

utilitarios globais para a janela de console 

A maioria dos navegadores Web suporta uma console JavaScript (que pode ser conhecida por um 
nome como “Developer Tools” ou “Web Inspector”) que permite inserir linhas de codigo JavaScript 
individuals. Alem das variaveis e fun^oes globais normais de JavaScript do lado do cliente, a linha de 
comando da console normalmente suporta as propriedades e fun^oes uteis descritas aqui. Consulte 
tambem a API Console. 
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Propriedades 

readonly Element $0 

O elemento do documento selecionado mais recentemente por meio de algum outro recurso 
do depurador. 
readonly Element $1 

O elemento do documento selecionado antes de $o. 

Metodos 

void cd(Window quadro) 

Quando um documento contem quadros aninhados, a funqtio cd() permite trocar os objetos globais 
e executar os comandos subsequentes no escopo do quadro especificado. 
void clear() 

Limpa a janela da console, 
void dir(object o) 

Exibe as propriedades ou os elementos de o. E como Console. dir(). 
void dirxml(Element elt) 

Exibe uma representa<;ao de elt baseada emXML ou HTML. E como Console. dirxmlQ. 

Element {(string id) 

Um atalho para document.getElementByldQ. 

NodeList {{(string seletor) 

Retorna um objeto semelhante a um array com todos os elementos correspondentes ao seletor CSS 
especificado. E um atalho para document.querySelectorAllQ. Em algumas consoles, retorna um ar¬ 
ray verdadeiro em vez de um NodeList. 
void inspect(any objeto, [string nomeguia ]) 

Exibe o objeto, possivelmente trocando da console para uma guia diferente do depurador. O segun- 
do argumento e uma dica optional sobre como voce gostaria de exibir o objeto. Os valores suporta- 
dos podem incluir “html”, “css”, “script” e “dom”. 

string[] keys(any objeto) 

Retorna um array com os nomes de propriedade de objeto. 
void monitorEvents(Element objeto, [string tipo ]) 

Registra eventos do tipo especificado, enviados para objeto. Os valores de tipo incluem “mouse”, 
“key”, “text”, “load”, “form”, “drag” e “contextmenu”. Se tipo e omitido, todos os eventos em objeto 
sao registrados. 

void profile(string titulo) 

Inicia o tra?ado do perfil do codigo. Consulte Console.profileQ. 

void profileEndQ 

Finaliza o tra^ado de perfil. Consulte Console.profileEndQ. 
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void unmonitorEvents(Element objeto, [string tipo ]) 

Para de monitorar eventos tipo em objeto. 
any[] values(any objeto ) 

Retorna um array com os valores de propriedade de objeto. 

CSS2Properties 

consulte CSSStyleDeclaration 

CSSRule 

uma regra em uma folha de estilo CSS 

Descri^ao 

Um objeto CSSRule representa uma regra em um CSSStyleSheet: representa informa^oes de estilo 
a serem aplicadas em um conjunto especifico de elementos do documento. selectorText e a repre- 
senta?ao de string do seletor de elementos para essa regra e style e um objeto CSSStyleDeclaration 
representando o conjunto de atributos e valores de estilo a aplicar nos elementos selecionados. 

A especifica^ao CSS Object Model define uma hierarquia de subtipos de CSSRule para representar 
diferentes tipos de regras que podem aparecer em uma folha de estilo CSS. As propriedades listadas 
aqui sao do tipo generico CSSRule e de seu subtipo CSSStyleRule. As regras de estilo sao os tipos 
mais comuns e importantes em uma folha de estilo e as que mais provavelmente vao constar em seus 
scripts. 

No IE8 e anteriores, os objetos CSSRule suportam apenas as propriedades selectorText e style. 

Constantes 

unsigned short STYLE_RULE = 1 
unsigned short IMPORT_RULE = 3 
unsigned short MEDIA_RULE = 4 
unsigned short FONT_FACE_RULE = 5 
unsigned short PAGE_RULE = 6 
unsigned short NAMESPACE_RULE = 10 

Esses sao os valores possiveis para a propriedade type a seguir e especificam qual e o tipo de 
regra. Se type for diferente de 1, o objeto CSSRule tera outras propriedades que nao estao 
documentadas aqui. 

Propriedades 

string cssText 

O texto completo dessa regra CSS. 
readonly CSSRule parentRule 

A regra, se houver, dentro da qual essa regra esta contida. 
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readonly CSSStyleSheet parentStyleSheet 

A folha de estilo dentro da qual essa regra esta contida. 

string selectorText 

Quando type e STYLE_RULE, essa propriedade contem o texto seletor que especifica os elementos 
do documento a que essa regra de estilo se aplica. 
readonly CSSStyleDeclaration style 

Quando type e STYLE_RULE, essa propriedade especifica os estilos que devem ser aplicados nos 
elementos especificados por selectorText. Note que, embora a propriedade style em si seja 
somente de leitura, as propriedades do objeto CSSStyleDeclaration as quais ela se refere sao 
de leitura/grava?ao. 
readonly unsigned short type 

O tipo dessa regra. O valor sera uma das constantes definidas anteriormente. 


CSSStyleDeclaration 

um conjunto de atributos CSS e seus valores 

Um objeto CSSStyleDeclaration representa um conjunto de atributos de estilo CSS e seus valores, 
permitindo que esses valores de estilo sejam consultados e configurados usando-se nomes de pro¬ 
priedade JavaScript semelhantes aos nomes de propriedade CSS. A propriedade style de um HTM- 
LElement e um objeto CSSStyleDeclaration de leitura/grava?ao, assim como a propriedade style 
de um objeto CSSRule. Contudo, o valor de retorno de Window.getComputedStyleQ e um objeto 
CSSStyleDeclaration cujas propriedades sao somente para leitura. 

Um objeto CSSStyleDeclaration torna os atributos de estilo CSS disponiveis por meio de proprieda¬ 
des de JavaScript. Os nomes dessas propriedades de JavaScript sao muito parecidos com os nomes de 
atributo CSS, com pequenas altera^oes necessarias para evitar erros de sintaxe em JavaScript. Atribu¬ 
tos de varias palavras que contem hifens, como “font-family”, sao escritos sem hifens em JavaScript, 
com cada palavra apos a primeira com inicial maiuscula: fontFamily. Alem disso, o atributo “float” 
entra em conflito com a palavra reservada float; portanto, se transforma na propriedade cssFloat. 
Note que voce pode usar nomes de atributo CSS nao modificados, se usar strings e colchetes para 
acessar as propriedades. 

Propriedades 

Alem das propriedades descritas anteriormente, um objeto CSSStyleDeclaration tern mais duas: 

string cssText 

A representaQo textual de um conjunto de atributos de estilo e seus valores. O texto e forma- 
tado como em uma folha de estilo CSS, menos o seletor de elemento e as chaves que circun- 
dam os atributos e valores. 
readonly unsigned long length 

O numero de pares atributo/valor contidos nesse objeto CSSStyleDeclaration. Um objeto 
CSSStyleDeclaration tambem e um objeto semelhante a um array cujos elementos sao os no¬ 
mes dos atributos de estilo CSS declarados. 
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CSSStyleSheet 

lima folha de estilo CSS 

Essa interface representa uma folha de estilo CSS. Ela tem propriedades e metodos para desabilitar a 
folha de estilo e para consultar, inserir e remover regras de estilo CSSRule. Os objetos CSSStyleSheet 
aplicados a um documento sao membros do array styleSheets[] do objeto Document e tambem 
podem estar dispom'veis por meio da propriedade sheet do elemento <style> ou <link> que define 
ou de links para a folha de estilo. 

No IE8 e anteriores, use o array rules[], em vez de cssRules[], e use addRuleQ e removeRuleQ, em 
vez de insertRuleQ e deleteRuleQ padrao do DOM. 

Propriedades 

readonly CSSRule[] cssRules 

Um objeto semelhante a um array somente de leitura contendo os objetos CSSRule que com- 
poem a folha de estilo. No IE, use a propriedade rules em vez disso. 

boolean disabled 

Se for true, a folha de estilo e desabilitada e nao e aplicada ao documento. Se for false, a folha 
de estilo e habibtada e aplicada ao documento. 
readonly string href 

O URL de uma folha de estilo vinculada ao documento ou null, para folhas de estilo em linha. 
readonly string media 

Uma lista da midia a qual essa folha de estilo se aplica. Voce pode consultar e configurar essa 
propriedade como uma unica string ou trata-la como um objeto semelhante a um array de 
tipos de midia, com metodos appendMediumQ e deleteMediumQ. (Formalmente, o valor dessa 
propriedade e um objeto MediaList, mas esse tipo nao e abordado nesta referenda.) 

readonly Node ownerNode 

O elemento do documento que “possui” essa folha de estilo ou null, caso nao haja nenhum. 
Consulte Link e Style, 
readonly CSSRule ownerRule 

O objeto CSSRule (de uma folha de estilo pai) que fez essa folha de estilo ser incluida ou null, 
se essa folha de estilo foi incluida de alguma outra maneira. (Note que a entrada de CSSRule 
nesta referenda documenta apenas regras de estilo e nao regras @import.) 

readonly CSSStyleSheet parentStyleSheet 

A folha de estilo que incluiu essa ou null, se essa folha de estilo foi incluida diretamente no 
documento. 

readonly string title 

O titulo da folha de estilo, se especificado. Um titulo pode ser especificado pelo atributo title 
de um elemento <style> ou <link> que se refira a folha de estilo. 
readonly string type 

O tipo MIME dessa folha de estilo. As folhas de estilo CSS tem o tipo “text/css”. 
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Metodos 

void deleteRule(unsigned long indice) 

Esse metodo exclui a regra no indice especificado do array cssRules. No IE8 e anteriores, use 
o metodo equivalente removeRuleQ, em vez disso. 
unsigned long insertRule(string regra, unsigned long indice) 

Esse metodo insere (ou anexa) uma nova regra CSS (uma unica string especificando seletor 
e estilos dentro de chaves) no indice especificado do array cssRules dessa folha de estilo. No 
IE8 e anteriores, use addRuleQ, em vez disso, e passe a string seletora e a string de estilos (sem 
chaves) como dois argumentos separados, passando o indice como terceiro argumento. 


DataTransfer 

uma transferenda de dados via arrastar e soltar 

Quando o usuario executa uma operaqao de arrastar e soltar, uma sequencia de eventos e disparada 
na origem ou no alvo da soltura (ou em ambos, caso os dois ocorram em uma janela do navegador). 
Esses eventos sao acompanhados por um objeto evento cuja propriedade dataTransfer (consulte 
Event) se refere a um objeto DataTransfer. O objeto DataTransfer e central em qualquer opera^ao 
de arrastar e soltar: a origem do arrasto armazena os dados a serem transferidos para ele e o alvo da 
soltura extrai os dados transferidos dele. Alem disso, o objeto DataTransfer gerencia uma negocia^ao 
entre a origem do arrasto e o alvo da soltura para decidir arrastar e soltar sera uma opera?ao de copia, 
movimenta^ao ou cria^ao de um bnk. 

A API descrita aqui foi criada pela Microsoft para o IE e tern sido implementada, pelo menos par- 
cialmente, por outros navegadores. HTML5 padroniza a API basica do IE. Quando este livro foi 
para a grafica, HTML5 tinha definido uma nova versao da API que estabelecia a propriedade items 
como um objeto semelhante a um array de objetos DataTransferltem. Essa e uma API interessante 
e racional, mas como nenhum navegador a implementa ainda, nao esta documentada aqui. Em vez 
disso, esta pagina documenta os recursos que (geralmente) funcionam nos navegadores atuais. Con¬ 
sulte a Seqao 17.7 para uma discussao adicional sobre essa API pecuhar. 

Propriedades 

string dropEffect 

Essa propriedade especifica o tipo de transferenda de dados que esse objeto representa. Deve 
ter um dos valores “none”, “copy”, “move” ou “link”. Normalmente, o alvo da soltura vai con- 
figurar essa propriedade a partir de um evento dragenter ou dragover. O valor dessa proprie¬ 
dade tambem pode ser afetado pelas teclas modificadoras que o usuario mantem pressionadas 
enquanto realiza o arrastamento, mas isso depende da plataforma. 
string effectAllowed 

Essa propriedade especifica qual combinaQo de transferencias de copia, movimenta?ao e link 
sao permitidas para essa opera?ao de arrastar e soltar. Normalmente, ela e configurada pela 
origem do arrasto em resposta ao evento dragstart. Os valores validos sao “none”, “copy”, 
“copyLink”, “copyMove”, “link”, “linkMove”, “move” e “all”. (Como um mnemonico, note 
que, nos valores que especificam duas operates, os nomes de operaQo sempre aparecem em 
ordem alfabetica.) 
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readonly File[] files 

Se os dados que estao sendo arrastados correspondem a um ou mais arquivos, essa propriedade 
sera configurada como um array ou um objeto semelhante a um array de objetos File, 
readonly string[] types 

Esse e um objeto semelhante a um array de strings que especificam os tipos MIME dos dados 
que foram armazenados nesse objeto DataTransfer (com setDataQ, caso a origem do arrasto 
seja dentro do navegador, ou por algum outro mecanismo, caso a origem do arrasto seja fora 
dele). O objeto semelhante a um array que contem os tipos deve ter um metodo contains() 
para testar se uma string especffica esta presente. Contudo, alguns navegadores apenas o trans- 
formam em um array verdadeiro e, nesse caso, voce pode usar o metodo indexOfQ, em vez 
disso. 

Metodos 

void addElement(Element elemento ) 

Esse metodo diz ao navegador para que use elemento ao criar o efeito visual que o usuario ve enquan- 
to arrasta. Geralmente, esse metodo e chamado pela origem do arrasto e pode nao estar implemen- 
tado ou nao ter qualquer efeito em todos os navegadores. 
void clearData([string formato ]) 

Remove quaisquer dados no formato especificado, configurados anteriormente com setData (). 

string getData(string formato) 

Retorna os dados transferidos no formato especificado. Se formato e igual (ignorando a caixa) a 
“text”, use “text/plain”, em vez disso. E se e igual (ignorando a caixa) a “url”, use “text/uri-list”. Esse 
metodo e chamado pelo alvo da soltura em resposta ao evento drop no final de uma opera^ao de 
arrastar e soltar. 

void setData(string formato, string dados) 

Especifica os dados a serem transferidos e o tipo MIME formato desses dados. A origem do arrasto 
chama esse metodo em resposta a um evento dragstart no inicio de uma opera^ao de arrastar e soltar. 
Ele nao pode ser chamado a partir de nenhuma outra rotina de tratamento de evento. Se a origem do 
arrasto pode tornar seus dados disponiveis em mais de um formato, pode chamar esse metodo varias 
vezes para registrar valores para cada formato suportado. 
void setDragImage(Element imagem, long x, long y) 

Esse metodo especifica uma imagem (normalmente um elemento <img>) que deve ser exibida para o 
usuario como represen tagio visual do valor que esta sendo arrastado. As coordenadas x e y fornecem 
os deslocamentos do cursor do mouse dentro da imagem. Esse metodo so pode ser chamado pela 
origem do arrasto em resposta ao evento dragstart. 

DataView 

le e grava valores de um ArrayBuffer ArrayBufferView 

DataView e um ArrayBufferView que empacota um ArrayBuffer (ou uma regiao de um buffer de 
array) e define metodos para ler e gravar inteiros com e sem sinal de 1, 2 e 4 bytes e niimeros em 
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ponto flutuante de 4 e 8 bytes do (ou no) buffer. Os metodos suportam ordens de byte big-endian e 
little-endian. Consulte tambem TypedArray. 

Construtora 

new DataViewfArrayBuffer buffer, 

[unsigned long deslocamentoByte], [unsigned long comprimentoByte ]) 

Essa construtora cria um novo objeto DataView que permite acesso de leitura e gravapio aos bytes 
em buffer ou a uma regiao de buffer. Com apenas um argumento, ela cria um modo de exibi- 
pio do buffer inteiro. Com dois argumentos, cria um modo de exibipio que se estende do byte 
numero byteOffset ate o final do buffer. E com tres argumentos, cria um modo de exibipio dos 
comprimentoByte bytes, comepindo no byte Offset. 

Metodos 

Cada um desses metodos le um valor numerico (ou grava um valor numerico) do ArrayBuffer subja- 
cente. O nome do metodo especifica o tipo lido ou gravado. Todos os metodos que leem ou gravam 
mais de um byte aceitam um argumento opcional littleEndian final. Se esse argumento e omitido 
ou e false, e usada a ordem de byte big-endian, com os bytes mais significativos sendo lidos ou gra- 
vados primeiro. Contudo, se o argumento e true, e usada a ordem de byte little-endian, 
float getFloat32(unsigned long deslocamentoByte, [boolean littleEndian ]) 

Interpreta os 4 bytes comepindo em deslocamentoByte como um numero em ponto flutuante e 
retorna esse numero. 

double getFloat64(unsigned long deslocamentoByte, [boolean littleEndian ]) 

Interpreta os 8 bytes comepindo em deslocamentoByte como um numero em ponto flutuante e 
retorna esse numero. 

short getlntl6(unsigned long deslocamentoByte, [boolean littleEndian ]) 

Interpreta os 2 bytes comepindo em deslocamentoByte como um numero inteiro com sinal e retorna 
esse numero. 

long getlnt32(unsigned long deslocamentoByte, [boolean littleEndian ]) 

Interpreta os 4 bytes comepindo em deslocamentoByte como um numero inteiro com sinal e retorna 
esse numero. 

byte getlnt8(unsigned long deslocamentoByte) 

Interpreta o byte em deslocamentoByte como um numero inteiro com sinal e retorna esse numero. 
unsigned short getUintl6(unsigned long deslocamentoByte, [boolean littleEndian ]) 
Interpreta os 2 bytes comepindo em deslocamentoByte como um numero inteiro sem sinal e retorna 
esse numero. 

unsigned long getUint32(unsigned long deslocamentoByte, [boolean littleEndian ]) 
Interpreta os 4 bytes comepindo em deslocamentoByte como um numero inteiro sem sinal e retorna 
esse numero. 

unsigned byte getUint8(unsigned long deslocamentoByte) 

Interpreta o byte em deslocamentoByte como um numero inteiro sem sinal e retorna esse numero. 
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void setFloat32(unsigned long deslocamentoByte, float valor, [boolean littleEndian ]) 
Convene valor em uma representa^ao em ponto flutuante de 4 bytes e grava esses bytes em deslo¬ 
camentoByte. 

void setFloat64(unsigned long deslocamentoByte, double valor, [boolean littleEndian ]) 
Convene valor em uma representagio em ponto flutuante de 8 bytes e grava esses bytes em deslo¬ 
camentoByte. 

void setlntl6(unsigned long deslocamentoByte, short valor, [boolean littleEndian ]) 
Convene valor em uma representa^ao de inteiro de 2 bytes e grava esses bytes em deslocamentoByte. 
void setlnt32(unsigned long deslocamentoByte, long valor, [boolean littleEndian ]) 
Convene valor em uma representa^ao de inteiro de 4 bytes e grava esses bytes em deslocamentoByte. 
void setlnt8(unsigned long deslocamentoByte, byte valor ) 

Convene valor em uma representa^ao de inteiro de 1 byte e grava esse byte em deslocamentoByte. 
void setUintl6(unsigned long deslocamentoByte, unsigned short valor, [boolean 
littleEndian ]) 

Convene valor em uma representa^ao de inteiro sem sinal de 2 bytes e grava esses bytes em deslo¬ 
camentoByte. 

void setUint32(unsigned long deslocamentoByte, unsigned long valor, [boolean 
littleEndian ]) 

Convene valor em uma represen taipao de inteiro sem sinal de 4 bytes e grava esses bytes em deslo¬ 
camentoByte. 

void setUint8(unsigned long deslocamentoByte, octet valor) 

Convene valor em uma representa^ao de inteiro sem sinal de 1 byte e grava esse byte em desloca¬ 
mentoByte. 



Document 

um documento HTML ou XML Node 

Um objeto Document e um Node que serve como raiz de uma arvore de documentos. A proprie- 
dade documentElement e o Element raiz do documento. Um no Document pode ter outros filhos 
(como nos Comment e DocumentType), mas tern apenas um filho Element com todo o conteudo 
do documento. 

Normalmente, um objeto Document e obtido por meio da propriedade document de um objeto 
Window. Os objetos Document tambem estao dispomveis por meio da propriedade contentDocument 
de elementos IFrame ou da propriedade ownerDocument de qualquer Node. 

A maioria das propriedades de um objeto Document da acesso aos elementos do documento ou a 
outros objetos importantes associados ao documento. Varios metodos de Document fazem a mes- 
ma coisa: fornecem uma maneira de pesquisar elementos dentro da arvore de documentos. Muitos 
outros metodos de Document sao “metodos fabrica” que criam elementos e objetos relacionados. 

Os objetos Document, assim como os objetos Element que content, sao alvos de evento. Eles im- 
plementam os metodos definidos por EventTarget e tambem suportam muitas propriedades de tra- 
tamento de evento. 
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Novos objetos Document podem ser criados com os metodos createDocumentQ e createHTMLDocu- 
ment() de DOMImplementation: 

document.implementation.createHTMLDocument("New Doc"); 

Tambem e possfvel carregar um arquivo HTML ou XML da rede e analisa-lo em um objeto Docu¬ 
ment. Consulte a propriedade responseXML do objeto XMLHttpRequest. 

A entrada de referenda de HTMLDocument, que aparecia nas versoes anteriores deste livro, foi 
mesclada nesta pagina. Note que algumas das propriedades, metodos e rotinas de tratamento de 
evento descritos aqui sao especfficos de HTML e nao vao funcionar em documentos XML. 

Propriedades 

Alem das propriedades listadas aqui, voce tambem pode usar o valor do atributo name de elementos 
<iframe>, <form> e <img> como propriedades de documento. O valor dessas propriedades e o Ele¬ 
ment nomeado ou um NodeList de tais elementos. Contudo, para elementos <iframe> nomeados, a 
propriedade se refere ao objeto Window do <iframe>. Consulte a Setjao 15.2.2 para ver os detalhes. 
readonly Element activeElement 

O elemento do documento que tern o foco do teclado no momento. 

Element body 

Para documentos HTML, esse elemento se refere ao Element <body>. (Para documentos que 
definem framesets*, essa propriedade se refere ao <frameset> mais externo.) 
readonly string characterSet 

A codificafao de caractere desse documento. 

string charset 

A codifica?ao de caractere desse documento. E como characterSet, mas voce pode configurar 
para mudar a codifica^ao. 

readonly string compatMode 

Essa propriedade e a string “BackCompat” se o documento esta sendo renderizado no “modo 
Quirks” CSS para compatibilidade com navegadores muito antigos. Caso contrario, essa pro¬ 
priedade e “CSSICompat”. 

string cookie 

Essa propriedade permite ler, criar, modificar e excluir o cookie (ou cookies) aplicado no docu¬ 
mento atual. Um cookie e um pequeno volume de dados nomeados, armazenados pelo navega- 
dor Web. Ele proporciona aos navegadores Web uma “memoria”, para que possam usar entrada 
de dados de uma pagina em outra pagina ou recordar de preferencias do usuario entre sessoes 
de navegatjao na Web. Dados de cookie sao transmitidos automaticamente entre o navegador 
Web e o servidor Web quando apropriado, de modo que scripts do lado do servidor podem 
ler e gravar valores de cookie. Codigo JavaScript do lado do cliente tambem pode ler e gravar 
cookies com essa propriedade. Note que essa e uma propriedade de leitura/gravafao, mas o 
valor lido, em geral, nao e igual ao valor gravado. Consulte a Sefao 20.2 para ver os detalhes. 
readonly string defaultCharset 

O conjunto de caracteres padrao do navegador. 


* N. deR.T.: O elemento frameset divide uma janelaem subespa^os i 
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readonly Window defaultView 

O objeto Window do navegador Web no qual esse documento e exibido. 

string designMode 

Se essa propriedade esta “ativada”, o documento inteiro pode ser editado. Se esta “desativada”, 
o documento inteiro nao pode ser editado. (Mas os elementos com propriedade contentedita- 
ble configuradas ainda podem ser editados, evidentemente.) Consulte a Se^ao 15.10.4. 
string dir 

Para documentos HTML, essa propriedade espelha o atributo dir do elemento <html>. Portan- 
to, e o mesmo que documentElement.dir. 
readonly DocumentType doctype 

O no DocumentType que representa o <! DOCTYPE > do documento. 

readonly Element documentElement 

O elemento raiz do documento. Para documentos HTML, essa propriedade e sempre o objeto 
Element que representa a tag <html>. Esse elemento raiz tambem esta disponivel por meio do 
array childNodesf] herdado de Node, mas geralmente nao e o primeiro elemento desse array. 
Consulte tambem a propriedade body. 

string domain 

O nome de host do servidor a partir do qual o documento foi carregado ou null, se nao ha 
nenhum. Essa propriedade pode ser configurada com seu proprio sufixo, para abrandar a po- 
Etica da mesma origem e garantir o acesso a documentos servidos de dominios relacionados. 
Consulte a Seqao 13.6.2.1 para ver os detalhes. 
readonly HTMLCollection embeds 

Um objeto semelhante a um array de elementos <embed> no documento. 
readonly HTMLCollection forms 

Um objeto semelhante a um array com todos os elementos Form no documento. 
readonly Element head 

Para documentos HTML, essa propriedade se refere ao elemento <head>. 
readonly HTMLCollection images 

Um objeto semelhante a um array com todos os elementos Image no documento. 
readonly DOMImplementation implementation 

O objeto DOMImplementation desse documento. 

readonly string lastModified 

Especifica a data e hora da modifica^ao mais recente feita no documento. Esse valor vem do 
cabe?alho HTTP Last-Modified, enviado opcionalmente pelo servidor Web. 
readonly HTMLCollection links 

Um objeto semelhante a um array com todos os hiperlinks no documento. Esse HTMLCol¬ 
lection contem todos os elementos <a> e <area> com atributos href e nao inclui elementos 
<link>. Consulte Link, 
readonly Location location 

Sinonimo de Window.location. 
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readonly HTMLCollection plugins 

Um sinonimo para a propriedade embeds, 
readonly string readyState 

Essa propriedade e a string “loading” se o documento ainda estiver sendo carregado e “com¬ 
plete”, se estiver totalmente carregado. O navegador dispara um evento readystatechange em 
Document quando essa propriedade muda para “complete”, 
readonly string referrer 

O URL do documento vinculado a esse documento ou null, se esse documento nao foi aces- 
sado por meio de um hiperlink ou se o servidor Web nao relatou o documento referido. Essa 
propriedade permite a JavaScript do lado do cliente acessar o cabe^alho HTTP referer. Con- 
tudo, observe a diferen^a na grafia: o cabe^alho HTTP tern tres “r” e a propriedade JavaScript 
tern quatro. 

readonly HTMLCollection scripts 

Um objeto semelhante a um array com todos os elementos <script> no documento. 
readonly CSSStyleSheet[] styleSheets 

Um conjunto de objetos representando todas as folhas de estilo incorporadas ou vinculadas 
a um documento. Em documentos HTML, isso inclui as folhas de estilo definidas com tags 
<link> e <style>. 
string title 

O conteudo de texto puro da tag <title> desse documento. 
readonly string URL 

O URL a partir do qual o documento foi carregado. Esse valor e frequentemente o mesmo 
da propriedade location.href, mas se um script mudar o identificador de fragmento (a pro¬ 
priedade location.hash), a propriedade location e a propriedade URL nao vao mais se referir ao 
mesmo URL. Nao confunda Document.URL com Window.URL. 

Metodos 

Node adoptNode(Node no) 

Esse metodo remove no de qualquer documento de que fa?a parte e altera sua propriedade owner- 
Document nesse documento, tornando-o pronto para insenjao nesse documento. Compare isso com 
importNode(), que copia um no de outro documento sem remove-lo. 

void closeQ 

Fecha um fluxo de documento aberto com o metodo open(), obrigando a exibi^ao de qualquer saida 
colocada em buffer. 

Comment createComment(string dados) 

Cria e retorna um novo no Comment com o conteudo especificado. 

DocumentFragment createDocumentFragment() 

Cria e retorna um novo no DocumentFragment vazio. 
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Element createElement(string nomeLocal) 

Cria e retorna um novo no Element vazio com o nome de tag especificado. Em documentos HTML, 
o nome de tag e convertido para maiusculas. 

Element createElementNS(string namespace, string nomeOualificado) 

Cria e retorna um novo no Element vazio. O primeiro argumento especifica o URI de namespace 
do elemento e o segundo argumento especifica o prefixo do namespace, dois-pontos e o nome de 
tag do elemento. 

Event createEvent(string interfaceEvento) 

Cria e retorna um objeto Event sintetico e nao inicializado. O argumento deve especificar o tipo de 
evento e ser uma string como “Event”, “UIEvent”, “MouseEvent”, “MessageEvent”, etc. Apos criar 
um objeto Event, voce pode inicializar suas propriedades somente para leitura, chamando um meto- 
do de inicializafao de evento apropriado nele, como initEventQ, initUIEventQ, initMouseEventQ, 
etc. A maioria desses metodos de inicializa^ao especificos do evento nao e abordada neste livro, mas 
consulte Event.initEventQ para ver o mais simples. Quando voce tiver criado e inicializado um 
objeto evento sintetico, pode envia-lo usando o metodo dispatchEvent() de EventTarget. Os eventos 
sinteticos sempre terao a propriedade isTrusted false. 

Processinglnstruction createProcessingInstruction(string destino, string dados ) 

Cria e retorna um novo no Processinglnstruction com o alvo e a string de dados especificados. 

Text createTextNode(string dados ) 

Cria e retorna um novo no Text para representar o texto especificado. 

Element elementFromPoint(float x, float y) 

Retorna o Element mais profundamente aninhado, em coordenadas da janela (x, y). 
boolean execCommand(string idComando, [boolean iuExibicao, [string valor]]) 

Executa o comando de edifao nomeado pelo argumento idComando no elemento modificavel que 
tiver o cursor de insenjao. HTML5 define os seguintes comandos: 


bold 

insertLineBreak 

selectAll 

createLink 

insertOrderedList 

subscript 

delete 

insertUnorderedList 

superscript 

formatBlock 

insertParagraph 

undo 

forwardDelete 

insertText 

unlink 

insertlmage 

italic 

unselect 

insertHTML 

redo 



Alguns desses comandos (como “createLink”) exigem um valor de argumento. Se o segundo argu¬ 
mento de execCommand() e false, o terceiro argumento e utilizado pelo comando. Caso contrario, o 
navegador vai solicitar o valor necessario para o usuario. Consulte a Secjao 15.10.4 para obter mais 
informa^oes sobre execCommand(). 

Element getElementById(string idElemento) 

Esse metodo pesquisa o documento em busca de um no Element com um atributo id cujo valor e 
idElemento e retorna esse Element. Se nenhum Element assim for encontrado, ele retorna null. O 
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valor do atributo id deve ser unico dentro de um documento, mas se esse metodo encontra mais de 
um Element com a idElemento especificada, ele retorna o primeiro. Esse e um metodo importante 
e normalmente usado, pois fornece uma maneira simples de obter o objeto Element que representa 
um elemento especffico do documento. Note que o nome desse metodo termina com “Id” e nao 
com “ID”. 

NodeList getElementsByClassName(string nomesClasse) 

Retorna um objeto semelhante a um array de elementos cujo atributo class inclui todos os nomes¬ 
Classe especificados. nomesClasse pode ser uma unica classe ou uma lista de classes separadas por es- 
pa?os. O objeto NodeList retornado e dinamico e atualizado automaticamente quando o documen¬ 
to muda. Os elementos no objeto NodeList retornado aparecem na mesma ordem que aparecem no 
documento. Note que esse metodo tambem e definido em Element. 

NodeList getElementsByName(string nomeElemento) 

Esse metodo retorna um objeto semelhante a um array dinamico e somente para leitura de Elements 
que tern um atributo name cujo valor e nomeElemento. Se nao houver um elemento coincidente, ele 
retorna um NodeList com length 0. 

NodeList getElementsByTagName(string nomeOualificado) 

Esse metodo retorna um objeto semelhante a um array somente para leitura que contem todos os 
nos Element do documento que tern o nome de tag especificado, na ordem em que aparecem na 
origem do documento. O NodeList e “dinamico” - seu conteudo e atualizado automaticamente, 
conforme o necessario, quando o documento muda. Para elementos HTML, a compara^ao de no- 
mes de tag nao diferencia letras maiusculas e minusculas. Como um caso especial, o nome de tag 
corresponde a todos os elementos em um documento. 

Note que a interface Element define um metodo de mesmo nome que so pesquisa uma subarvore 
do documento. 

NodeList getElementsByTagNameNS(string namespace, string nomeLocal) 

Esse metodo funciona como getElementsByTagNameQ, mas especifica o nome de tag desejado como 
uma combina^ao de URI de namespace e nome local dentro desse espa^o de nomes. 

boolean hasFocusQ 

Esse metodo retorna true se o objeto Window desse documento tern o foco do teclado (e, se essa 
janela nao e de nivel superior, todas as suas ascendentes tern o foco). 

Node importNode(Node no, boolean profundidade) 

Esse metodo recebe um no definido em outro documento e retorna uma copia do no, conveniente 
para inserijao nesse documento. Se profundidade e true, todos os descendentes do no tambem sao 
copiados. O no original e seus descendentes nao sao modificados. A copia retornada tern sua pro- 
priedade ownerDocument configurada com esse documento, mas parentNode igual a null, pois ainda 
nao foi inserida no documento. As funfoes receptoras de evento registradas no no original ou na 
arvore nao sao copiadas. Consulte tambem adoptNodeQ. 

Window open(string url, string nome, string recursos, [boolean substituicao ]) 
Quando o metodo open( ) de um documento e chamado com tres ou mais argumentos, ele age como 
o metodo open() do objeto Window. Consulte Window. 
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Document open([string tipo], [string substituicao ]) 

Com dois ou menos argumentos, esse metodo apaga o documento atual e inicia um novo (usan- 
do o objeto Document existente, que e o valor de retorno). Apos chamar open(), voce pode usar 
os metodos write() e writelnQ para colocar o conteudo no documento e close() para finalizar 
o documento e obrigar seu novo conteudo a ser exibido. Consulte a Seqao 15.10.2 para ver os 
detalhes. 

O novo documento sera um documento HTML se tipo for omitido ou for “text/html”. Caso con¬ 
trario, vai ser um documento de texto puro. Se o argumento substituicao e true, o novo documento 
substitui o antigo no historico de navega^ao. 

Esse metodo nao deve ser chamado por um script ou rotina de tratamento de evento que fa$a parte do 
documento que esta sendo sobrescrito, pois o proprio script ou rotina de tratamento sera sobrescrito. 

boolean queryCommandEnabled(string idComcmdo) 

Retorna true se for significativo passar idComando para execCommand() e false, caso contrario. O 
comando “undo”, por exemplo, nao e habilitado se nao ha nada para desfazer. Consulte a Seqao 
15.10.4. 

boolean queryCommandIndeterm(string idComando) 

Retorna true se idComando esta em um estado indeterminado para o qual queryCommandState() nao 
pode retornar um valor significativo. Os comandos definidos por HTML5 nunca sao indetermina- 
dos, mas os comandos especfficos dos navegadores podem ser. Consulte a Seqao 15.10.4. 

boolean queryCommandState(string idComando) 

Retorna o estado da idComando especificada. Alguns comandos de ediqao, como “negrito” e “itali- 
co,” tern um estado true se o cursor ou a seleqao esta em italico e false, caso contrario. Contudo, 
a maioria dos comandos nao tern estado e esse metodo sempre retorna false para eles. Consulte a 
Seqao 15.10.4. 

boolean queryCommandSupported(string idComando) 

Retorna true se o navegador suporta o comando especificado e false, caso contrario. Consulte a 
Seqao 15.10.4. 

string queryCommandValue(string idComando) 

Retorna o estado do comando especificado como uma string. Consulte a Seqao 15.10.4. 

Element querySelector(string seletores) 

Retorna o primeiro elemento desse documento que corresponda aos seletores CSS especificados 
(pode ser um unico seletor CSS ou um grupo de seletores separados por virgulas). 

NodeList querySelectorAll(string seletores) 

Retorna um objeto semelhante a um array contendo todos os Elements desse Document que cor- 
respondam aos seletores especificados (pode ser um unico seletor CSS ou um grupo de seletores 
separados por virgulas). Ao contrario dos NodeLists retornados por getElementsByTagName() e meto¬ 
dos semelhantes, o NodeList retornado por esse metodo nao e dinamico: e apenas um instantaneo 
estatico dos elementos que corresponderam quando o metodo foi chamado. 
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void write(string texto...) 

Esse metodo anexa seus argumentos no documento. Esse metodo pode ser usado enquanto o docu- 
mento esta carregando, para inserir conteudo no local da tag <script>, ou usado apos a chamada do 
metodo open(). Consulte a Se^ao 15.10.2 para ver os detalhes. 
void writeln(string texto...) 

Esse metodo e como HTMLDocument.writeQ, exceto que coloca um novo caractere de nova linha apos 
o texto anexado, o que pode ser util ao se gravar o conteudo de uma tag <pre>, por exemplo. 

Eventos 

Os navegadores nao disparam muitos eventos diretamente em objetos Document, mas os eventos 
Element borbulham para o Document que os contem. Portanto, os objetos Document suportam 
todas as propriedades de tratamento de evento listadas em Element. Assim como Elements, os objetos 
Document implementam os metodos EventTarget. 

Os navegadores disparam dois eventos de prontidao de documento no objeto Document. Quando a 
propriedade readyState muda, o navegador dispara um evento readystatechange. Voce pode registrar 
uma rotina de tratamento para esse evento com a propriedade onreadystatechange. O navegador 
tambem dispara um evento DOMContentLoaded (consulte a Se$ao 17.4) quando a arvore de docu- 
mentos esta pronta (mas antes que os recursos externos tenham terminado de carregar). Entretanto, 
voce deve usar um metodo EventTarget para registrar uma rotina de tratamento para esses eventos, 
pois existe uma propriedade onDOMContentLoaded. 

DocumentFragment 

nos adjacentes e suas subarvores Node 

A interface DocumentFragment representa uma parte - ou fragmento - de um documento. Mais es- 
pecificamente, e uma lista de nos adjacentes e todos os descendentes de cada um, mas sem qualquer 
no pai comum. Os nos DocumentFragment nunca fazem parte de uma arvore de documentos e a 
propriedade herdada parentNode e sempre null. Contudo, os nos DocumentFragment exibem um 
comportamento especial que os torna muito uteis: quando e feito um pedido para inserir um Docu¬ 
mentFragment em uma arvore de documentos, nao e o no DocumentFragment em si que e inserido, 
mas sim cada filho dele. Isso torna DocumentFragment util como espa^o reservado temporario para 
nos que voce deseja inserir, todos de uma vez, em um documento. 

Voce pode criar um novo DocumentFragment vazio com Document.createDocumentFragment(). 

Voce pode procurar elementos em um DocumentFragment com querySelectorQ e querySelecto- 
rAll(), que funcionam exatamente como os mesmos metodos do objeto Document. 

Metodos 

Element querySelector(string seletores) 

Consulte Document. querySelector(). 

NodeList querySelectorAll(string seletores) 

Consulte Document. querySelectorAll(). 
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DocumentType 

a dedara$ao <!D0CTYPE> de um documento Node 

Esse tipo raramente usado representa a declara^ao <!D0CTYPE> de um documento. A propriedade 
doctype de um Document contem o no DocumentType desse documento. Os nos DocumentType 
sao imutaveis e nao podem ser modificados. 

Os nos DocumentType sao usados para criar novos objetos Document com DOMImplementation. 
createDocument(). Voce pode criar novos objetos DocumentType com DOMImplementation.createDo- 
cumentTypeQ. 


Propriedades 

readonly string name 

O nome do tipo de documento. Esse identificador vem imediatamente apos <!D0CTYPE> no 
infcio de um documento eeo mesmo nome de tag do elemento raiz do documento. Para 
documentos HTML, isso sera “html”. 

readonly string publicld 

O identificador publico da DTD ou a string vazia, se nenhum foi especificado. 

readonly string systemld 

O identificador de sistema da DTD ou a string vazia, se nenhum foi especificado. 



DOMException 

uma exce^ao lan^ada por uma API Web 

A maioria das APIs de JavaScript do lado do cliente lan?a objetos DOMException quando precisa 
sinalizar um erro. As propriedades code e name do objeto fornecem mais detalhes sobre o erro. Note 
que uma DOMException pode ser lanijada ao se ler ou gravar uma propriedade de um objeto e 
tambem ao se chamar um metodo de um objeto. 

DOMException nao e uma subclasse do tipo Error do nucleo de JavaScript, mas funciona como 
uma, sendo que alguns navegadores incluem uma propriedade message para compatibilidade com 
Error. 

Constantes 

unsigned short INDEX_SIZE_ERR = 1 
unsigned short HIERARCHY_REOUEST_ERR = 3 
unsigned short WR0NG_D0CUME NT_ERR = 4 
unsigned short INVALID_CHARACTER_ERR = 5 
unsigned short NO_MODIFICATION_ALLOWED_ERR = 7 
unsigned short N0T_F0UND_ERR =~8 
unsigned short NOT_SUPPORTED_ERR = 9 
unsigned short INVALID_STATE_ERR = 11 
unsigned short SYNTAX_ERR = 12 
unsigned short INVALID_MODIFICATION_ERR = 13 
unsigned short NAMESPACE_ERR = 14 
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unsigned short INVALID_ACCESS_ERR = 15 
unsigned short TYPE_MISMATCH_ERR = 17 
unsigned short SECURITY_ERR = 18 
unsigned short NETWORK_ERR = 19 
unsigned short AB0RT_ERR = 20 
unsigned short URL_MISMATCH_ERR = 21 
unsigned short 0U0TA_EXCEEDED_ERR = 22 
unsigned short TIME0UT_ERR = 23 
unsigned short DATA_CLONE_ERR = 25 

Esses sao os valores possfveis da propriedade code. Os nomes de constante sao prolixos o sufi- 

ciente para indicar o motivo aproximado pelo qual a exce^ao foi lanijada. 


Propriedades 

unsigned short code 

Um dos valores de constante listados anteriormente, indicando o tipo de exce^ao ocorrida. 

string name 

O nome do tipo de exce^ao especffico. Sera um dos nomes de constante listados anteriormen¬ 
te, como uma string. 


DOMImplementation 

metodos globais do DOM 

O objeto DOMImplementation define metodos que nao sao especificos de nenhum objeto Do¬ 
cument em especial, mas sao “globais” para uma implementa^ao do DOM. Voce pode obter uma 
referenda para o objeto DOMImplementation por meio da propriedade implementation de qualquer 
objeto Document. 

Metodos 

Document createDocument(string namespace, string nomeOualificado, 

DocumentType tipodoc) 

Esse metodo cria e retorna um novo objeto XML Document. Se nomeOualificado e especificado, 
um elemento raiz com esse nome e criado e adicionado no documento como seu documentElement. 
Se nomeOualificado inclui um prefixo de namespace e dois-pontos, namespace deve ser o URI que 
identifica exclusivamente o espa^o de nomes. Se o argumento tipodoc nao e null, a propriedade 
ownerDocument desse objeto DocumentType e configurada como o documento recentemente criado 
e o no DocumentType e adicionado no novo documento. 

DocumentType createDocumentType(string nomeOualificado, idPublica, idSistema) 

Esse metodo cria e retorna um novo no DocumentType para representar uma declara^ao <! D0CTYPE> 
que pode ser passada para createDocument(). 

Document createHTMLDocument(string titulo ) 

Esse metodo cria um novo objeto HTMLDocument com um esqueleto de arvore de documentos 
que inclui o titulo especificado. A propriedade documentElement do objeto retornado e um elemento 
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<html> e esse elemento raiz tem tags <head> e <body> como filhos. O elemento <head>, por sua vez, 
tem um filho <title>, o qual tem como filho a string tltulo especificada. 


DOMSettableTokenList 

uma lista de si'mbolos com um valor de string que pode ser configurado DOMTokenList 

Um DOMSettableTokenList e um DOMTokenList que tambem tem uma propriedade value que pode 
ser configurada para especificar o conjunto inteiro de si'mbolos de uma so vez. 

A propriedade classList de Element e um DOMTokenList que representa o conjunto de sfm- 
bolos na propriedade className, que e uma string. Se quiser configurar todos os si'mbolos de 
classList de uma so vez, pode simplesmente configurar a propriedade className com uma nova 
string. A propriedade sandbox do elemento IFrame e um pouco diferente. Essa propriedade e o 
atributo HTML em que e baseada foram definidas por HTML5 e, portanto, nao ha necessidade 
de uma representapio de string antiga e de uma nova representapio de DOMTokenList. Nesse 
caso, a propriedade e simplesmente definida como DOMSettableTokenList: voce pode le-la e grava- 
-la como se fosse uma string ou utilizar seus metodos e usa-la como um conjunto de si'mbolos. A 
propriedade htmlFor de Output e a propriedade audio de Video tambem sao DOMSettableToken- 

Propriedades 

string value 

A represen tapio de string separada por espapas do conjunto de si'mbolos. Voce pode ler ou gra- 
var essa propriedade para tratar o conjunto como um unico valor de string. Contudo, normal- 
mente, e preciso usar essa propriedade explicitamente: quando um DOMSettableTokenList e 
usado como uma string, e esse valor de string que e retornado. E se voce atribui uma string a 
um DOMSettableTokenList, essa propriedade e configurada implicitamente. 


DOMTokenList 

um conjunto de si'mbolos separados por espagis 

Um DOMTokenList e uma rep resen tapio analisada de uma string de si'mbolos separados por es- 
papas, como a propriedade className de um Element. Uma DOMTokenList e, conforme seu nome 
implica, uma lista - trata-se de um objeto semelhante a um array com uma propriedade length e e 
possfvel indexa-la para recuperar os si'mbolos individuals. Porem, o mais importante e que ela define 
metodos contains!), add(), remove!) e metodos toggle!) que permitem trata-la como um conjunto 
de si'mbolos. Se um DOMTokenList e usado como se fosse uma string, ele e avaliado como uma 
string de si'mbolos separados por espapas. 

A propriedade de HTML5 classList de objetos Element e um DOMTokenList nos navegadores 
que suportam essa propriedade eeo linico DOMTokenList que voce provavelmente vai usar com 
frequencia. Consulte tambem DOMSettableTokenList. 
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Propriedades 

readonly unsigned long length 

Um DOMTokenList e um objeto semelhante a um array; essa propriedade especifica o nume- 
ro de sfmbolos exclusivos que ele contem. 

Metodos 

void add(string simbolo) 

Se o DOMTokenList ainda nao contem simbolo, o adiciona no fim da lista. 
boolean contains(string simbolo) 

Retorna true se o DOMTokenList contem simbolo ou false, caso contrario. 
string item(unsigned long indice) 

Retorna o simbolo no 1 ndice especificado ou null, caso Indice esteja fora do limite. Voce tambem 
pode indexar o DOMTokenList diretamente, em vez de chamar esse metodo. 
void remove(string simbolo) 

Se esse DOMTokenList contem simbolo, o remove. Caso contrario, nao faz nada. 
boolean toggle(string simbolo) 

Se o DOMTokenList contem simbolo, o remove. Caso contrario, o adiciona. 

Element 

um elemento do documento Node, EventTarget 

Um objeto Element representa um elemento em um documento HTML ou XML. A propriedade 
tagName especifica o nome de tag ou tipo do elemento. Atributos HTML padrao do elemento estao 
disponiveis por meio de propriedades JavaScript do objeto Element. Os atributos, incluindo os 
XML e os HTML nao padronizados, tambem podem ser acessados com os metodos getAttributeQ 
e setAttributeQ. O conteudo de Element esta disponivel por meio de propriedades herdadas de 
Node. Se estiver interessado apenas nos parentes Element de um Element, pode usar a propriedade 
children ou firstElementChild, nextElementSibling e propriedades relacionadas. 

Ha varias maneiras de obter objetos Element de documentos. A propriedade documentElement de um 
Document se refere ao elemento raiz desse documento, como o elemento <html> de um documento 
HTML. Para documentos HTML, as propriedades head e body sao semelhantes: elas se referem aos 
elementos <head> e <body> do documento. Para localizar um elemento especifico nomeado por meio 
seu atributo id exclusivo, use Document.getElementByldQ. Conforme descrito na Sepio 15.2, tambem 
e possivel obter objetos Element com metodos de Document e Element, como getElementsByTag- 
NameQ, getElementsByClassName() e querySelectorAllQ. Por fim, voce pode criar novos objetos Ele¬ 
ment para inserpio em um documento, com Document.createElement(). 

Os navegadores Web disparam muitos tipos diferentes de eventos nos elementos do documento e 
os objetos Element definem muitas propriedades de tratamento de evento. Alem disso, os objetos 
Element definem os metodos EventTarget (consulte EventTarget) para adicionar e remover ouvintes 
de evento. 




Referenda de JavaScript do lado do cliente 887 


A entrada de referenda de HTMLElement, que aparecia nas versoes anteriores deste livro, foi mes- 
clada nesta sepao. Note que algumas das propriedades, metodos e rotinas de tratamento de evento 
descritos aqui sao especfficos de HTML e nao vao funcionar com os elementos de documentos XML. 


Propriedades 

Alem das propriedades listadas aqui, os atributos HTML de elementos HTML estao acessfveis como 
propriedades JavaScript do objeto Element. As tags HTML e seus atributos validos estao listados no 
final desta entrada de referenda. 


readonly Attr[] attributes 

Um objeto semelhante a um array de objetos Attr que representam os atributos HTML ou 
XML desse elemento. Contudo, os objetos Element geralmente tornam os atributos acessfveis 
por meio de propriedades de JavaScript; portanto, nunca e realmente necessario usar esse array 
attributes!]. 


readonly unsigned long childElementCount 

O numero de elementos filhos (nao nos filhos) que esse elemento tern. 

readonly HTMLCollection children 

Um objeto semelhante a um array dos filhos Element (excluindo filhos que nao sao Element, 
como nos Text e Comment) desse Element, 
readonly DOMTokenList classList 

O atributo de classe de um elemento e uma lista de nomes de classe separados por espapos. 
Essa propriedade permite acessar os elementos individuals dessa lista e define metodos para 
consultar, adicionar, remover e alternar nomes de classe. Consulte DOMTokenList para ver os 
detalhes. 



string className 

Essa propriedade representa o atributo class do elemento. class e uma palavra reservada em 
JavaScript, de modo que a propriedade JavaScript e className, em vez de class. Note que esse 
nome de propriedade e enganoso, pois o atributo class frequentemente inclui mais de um 
nome de classe. 


readonly long clientHeight 
readonly long clientWidth 

Se esse elemento e o elemento raiz (consulte document.documentElement), essas propriedades 
retornam as dimensoes do objeto Window. Essas sao as dimensoes internas ou da porta de 
visualizapao que excluem barras de rolagem e outro “cromo” do navegador. Caso contrario, 
essas propriedades retornam as dimensoes do conteudo do elemento, mais o preenchimento. 

readonly long clientLeft 
readonly long clientTop 

Essas propriedades retornam o numero de pixels entre a margem esquerda ou superior da 
borda do elemento e a margem esquerda ou superior de seu preenchimento. Normalmen- 
te, essa e apenas a largura da borda esquerda e superior, mas essas quantidades tambem 
podem incluir a largura de uma barra de rolagem, caso uma seja renderizada a esquerda ou 
acima do elemento. 
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CSSStyleDeclaration currentStyle 

Essa propriedade especifica do IE representa o conjunto em cascata de todas as propriedades 
CSS que se aplicam ao elemento. Voce pode usa-la no IE8 e anteriores como uma substituta 
para o metodo padrao Window.getComputedStyleQ. 
readonly object dataset 

Voce pode associar valores arbitrarios a qualquer elemento HTML, designando esses valores 
a atributos cujos nomes come^am com o prefixo especial “data-”. Essa propriedade dataset e 
o conjunto de atributos de dados de um elemento e torna facil configura-los e consulta-los. 

O valor dessa propriedade se comporta como um objeto JavaScript normal. Cada propriedade 
do objeto corresponde a um atributo de dados no elemento. Se o elemento tern um atributo 
chamado data-x, o objeto dataset tern uma propriedade chamada x e dataset.x tern o mesmo 
valor de getAttribute("data-x"). 

Consultar e configurar propriedades do objeto dataset consulta e configura os atributos de da¬ 
dos correspondentes desse elemento. Voce pode usar o operador delete para remover atributos 
de dados e pode usar um la^o for/in para enumera-los. 
readonly Element firstElementChild 

Essa propriedade e como a propriedade firstChild de Node, mas ignora nos Text e Comment 
e retorna apenas Elements, 
string id 

O valor do atributo id. Dois elementos dentro do mesmo documento nao devem ter o mesmo 
valor de id. 
string innerHTML 

Uma string de leitura/grava^ao que especifica a marca^ao HTML ou XML contida no elemen¬ 
to, nao incluindo as tags de abertura e fechamento do elemento em si. Consultar essa proprie¬ 
dade retorna o conteudo do elemento como uma string de texto HTML ou XML. Configurar 
essa propriedade com uma string de texto HTML ou XML substitui o conteudo do elemento 
pela representa?ao analisada desse texto. 
readonly boolean isContentEditable 

Essa propriedade e true se o elemento pode ser editado ou false, caso contrario. Um elemento 
pode ser editado por causa da propriedade contenteditable nele ou em um ascendente ou por 
causa da propriedade designMode do Document conteiner. 
string lang 

O valor do atributo lang, o qual especifica o codigo de idioma do conteudo do elemento. 
readonly Element lastElementChild 

Essa propriedade e como a propriedade lastChild de Node, mas ignora nos Text e Comment e 
retorna apenas Elements, 
readonly string localName 

O nome local, sem prefixo, desse elemento. Isso e diferente do atributo tagName, que inclui o 
prefix de namespace, caso haja um (e e convertido em maiuscula para elementos HTML). 
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readonly string namespacellRI 

O URL que define formalmente o espa^o de nomes desse elemento. Pode ser null ou uma 
string como “http://www.w3.org/1999/xhtml”. 

readonly Element nextElementSibling 

Essa propriedade e como a propriedade nextSibling de Node, mas ignora nos Text e Comment 
e retorna apenas Elements. 

readonly long offsetHeight 
readonly long offsetWidth 

A altura e largura, em pixels, do elemento e todo seu conteudo, incluindo o preenchimento e 
a borda CSS do elemento, mas nao sua margem. 

readonly long offsetLeft 
readonly long offsetTop 

As coordenadas X e Y do canto superior esquerdo da borda CSS do elemento em rela^ao ao 
elemento conteiner offsetParent. 
readonly Element offsetParent 

Especifica o elemento conteiner que define o sistema de coordenadas no qual offsetLeft e 
offsetTop sao medidos. Para a maioria dos elementos, offsetParent e o elemento <body> que 
os contem. Contudo, se um elemento tern um conteiner posicionado dinamicamente, o ele¬ 
mento posicionado dinamicamente e o offsetParent e se o elemento esta em uma tabela, um 
elemento <td>, <th> ou <table> pode ser o offsetParent. Consulte a Se^ao 15.8.5. 
string outerHTML 

A marca^ao HTML ou XML que define esse elemento e seus filhos. Se configura essa proprie¬ 
dade como uma string, voce substitui esse elemento (e todo o seu conteudo) pelo resultado da 
analise do novo valor como um fragmento de documento HTML ou XML. 
readonly string prefix 

O prefixo de namespace para esse elemento. Normalmente e null, a nao ser que voce esteja 
trabalhando com um documento XML que utilize espa^o de nomes. 

readonly Element previousElementSibling 

Essa propriedade e como a propriedade previousSibling de Node, mas ignora nos Text e Com¬ 
ment e retorna apenas Elements. 

readonly long scrollHeight 
readonly long scrollWidth 

A altura e largura globais, em pixels, de um elemento. Quando um elemento tern barras 
de rolagem (por causa do atributo CSS overflow, por exemplo), essas propriedades diferem 
de offsetHeight e offsetWidth, que simplesmente informam o tamanho da parte visivel do 
elemento. 

long scrollLeft 
long scrollTop 

O numero de pixels que rolaram para fora da margem esquerda ou da margem superior do 
elemento. Essas propriedades sao uteis apenas para elementos com barras de rolagem, como os 
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elementos com o atributo CSS overflow configurado como auto. Quando essas propriedades 
sao consultadas no elemento <html> (consulte Document.documentElement), elas especificam a 
quantidade de rolagem do documento como um todo. Note que essas propriedades nao espe¬ 
cificam a quantidade de rolagem em uma tag <iframe>. Essas propriedades podem ser configu- 
radas para rolar um elemento ou o documento inteiro. Consulte a Secjao 15.8.5. 
readonly CSSStyleDeclaration style 

O valor do atributo style que especifica estilos CSS em linha para esse elemento. Note que 
o valor dessa propriedade nao e uma string, mas um objeto com propriedades de leitura/gra- 
va^ao correspondentes aos atributos de estilo CSS. Consulte CSSStyleDeclaration para ver os 
detalhes. 

readonly string tagName 

O nome de tag do elemento. Para documentos HTML, o nome de tag e retornado em maius- 
culas, independente da caixa das letras na origem do documento; portanto, um elemento <p> 
teria uma propriedade tagName “P”. Os documentos XML diferenciam letras maiiisculas e mi- 
nusculas e o nome de tag e retornado exatamente como esta gravado na origem do documen¬ 
to. Essa propriedade tern o mesmo valor da propriedade herdada nodeName da interface Node, 
string title 

O valor do atributo title do elemento. Muitos navegadores exibem o valor desse atributo em 
uma dica de ferramenta, quando o mouse e deixado sobre o elemento. 


Metodos 

void blur() 

Esse metodo transfere o foco do teclado para o elemento body do objeto Document conteiner. 
void click() 

Esse metodo Simula um clique nesse elemento. Se clicar nesse elemento normalmente faria algo 
acontecer (seguir um link, por exemplo), esse metodo tambem faz isso acontecer. Caso contrario, 
chamar esse metodo apenas dispara um evento click no elemento. 

void focusQ 

Transfere o foco do teclado para esse elemento. 
string getAttribute(string nomeOualificado) 

getAttributeQ retorna o valor de um atributo nomeado de um elemento ou null, caso nao exista 
um atributo com esse nome. Note que o objeto HTMLElement define propriedades de JavaScript 
que correspondem a cada um dos atributos HTML padrao; portanto, voce so precisa usar esse 
metodo com documentos HTML se estiver consultando o valor de atributos nao padronizados. 
Em documentos HTML, as compara^oes de nome de atributo nao diferenciam letras maiiisculas e 
minus culas. 

Em documentos XML, os valores de atributo nao estao diretamente disponiveis como propriedades 
de elemento e devem ser pesquisados pela chamada desse metodo. Para documentos XML que usam 
espa^os de nomes, inclua o prefixo de namespace e dois-pontos no nome de atributo passado para 
esse metodo ou use getAttributeNSQ, em vez disso. 



Referenda de JavaScript do lado do cliente 891 


string getAttributeNS(string namespace, string nomeLocal) 

Esse metodo funciona exatamente como o metodo getAttributeQ, exceto que o atributo e especifi- 
cado por uma combinapio de URI de namespace e nome local dentro desse espap) de nomes. 

ClientRect getBoundingClientRect() 

Retorna um objeto ClientRect que descreve o envelope desse elemento. 

ClientRect[] getClientRectsQ 

Retorna um objeto semelhante a um array de ClientRects que descreve um ou mais retangulos ocu- 
pados por esse elemento. (Os elementos em linha que abrangem mais de uma linha, normalmente 
exigem mais de um retangulo para descrever precisamente sua regiao da janela.) 

NodeList getElementsByClassName(string nomesClasse) 

Retorna um objeto semelhante a um array de elementos descendentes que tern um atributo class 
incluindo todos os nomesClasse especificados. nomesClasse pode ser uma unica classe ou uma lista 
de classes separadas por espapas. O objeto NodeList retornado e dinamico e e atualizado automa- 
ticamente quando o documento muda. Os elementos no objeto NodeList retornado aparecem 
na mesma ordem que aparecem no documento. Note que esse metodo tambem e definido em 
Document. 

NodeList getElementsByTagName(string nomeOualificado) 

Esse metodo percorre todos os descendentes desse elemento e retorna um NodeList dinamico seme¬ 
lhante a um array de nos Element, representando todos os elementos do documento com o nome 
de tag especificado. Os elementos no array retornado aparecem na mesma ordem que aparecem no 
documento de origem. 

Note que os objetos Document tambem tern um metodo getElementsByTagName() que funciona 
exatamente como este, mas que percorre o documento inteiro, em vez de apenas os descendentes de 
um unico elemento. 

NodeList getElementsByTagNameNS(string namespace, string nomeLocal) 

Esse metodo funciona como getElementsByTagName(), exceto que o nome de tag dos elementos de- 
sejados e especificado como uma combinapio de um URI de namespace e um nome local definido 
dentro desse espapa de nomes. 
boolean hasAttribute(string nomeOualificado) 

Esse metodo retorna true se esse elemento tern um atributo com o nome especificado e false, caso 
contrario. Em documentos HTML, os nomes de atributo nao diferenciam letras maiusculas e mi- 
niisculas. 

boolean hasAttributeNS(string namespace, string nomeLocal) 

Esse metodo funciona como hasAttributeQ, exceto que o atributo e especificado pelo URI de na¬ 
mespace e pelo nome local dentro desse espapa de nomes. 

void insertAdjacentHTML(string posicao, string texto) 

Esse metodo insere o texto de maicacao HTML especificado na posicao especificada relativa a esse 
elemento. O argumento posicao deve ser uma das quatro strings a seguir: 
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Posigao 

Significado 

beforebegin 

Insere o texto antes da tag de abertura 

afterend 

Insere o texto apos a tag de fechamento 

afterbegin 

Insere o texto imediatamente apos a tag de abertura 

beforeend 

Insere o texto imediatamente antes da tag de fechamento 


Element querySelector(string seletores ) 

Retorna o primeiro descendente desse elemento que corresponda aos seletores CSS especificados 
(pode ser um unico seletor CSS ou um grupo de seletores separados por vfrgulas). 

NodeList querySelectorAll(string seletores ) 

Retorna um objeto semelhante a um array contendo todos os descendentes desse Element que cor- 
respondam aos seletores especificados (pode ser um unico seletor CSS ou um grupo de seletores 
separados com vfrgulas). Ao contrario do NodeList retornado por getElementsByTagName(), o Node- 
List retornado por esse metodo nao e dinamico: e apenas um instantaneo estatico dos elementos que 
corresponderam quando o metodo foi chamado. 
void removeAttribute(string nomeOualificado) 

removeAttributeQ exclui um atributo nomeado desse elemento. Tentativas de remover atributos 
inexistentes sao ignoradas silenciosamente. Em documentos HTML, os nomes de atributo nao dife- 
renciam letras maiusculas e mimisculas. 

void removeAttributeNS(string namespace, string nomeLocal) 

removeAttributeNSQ funciona exatamente como removeAttributeQ, exceto que o atributo a ser re- 
movido e especificado pelo URI de namespace e pelo nome local, 
void scrollIntoView([boolean topo ]) 

Se um elemento HTML nao esta visfvel na janela, esse metodo rola o documento para que ele se 
torne visfvel. O argumento topo e uma dica opcional sobre se o elemento deve ser posicionado pro¬ 
ximo a parte superior ou inferior da janela. Se for true ou omitido, o navegador vai tentar posicionar 
o elemento proximo a parte superior. Se for false, o navegador vai tentar posiciona-lo proximo a 
parte inferior. Para elementos que aceitam o foco do teclado, como os elementos Input, o metodo 
focus () executa implicitamente essa mesma operaqao de rolar para a area visfvel. Consulte tambem 
o metodo scrollToQ de Window. 

void setAttribute(string nomeOualificado, string valor) 

Esse metodo configura o atributo especificado com o valor indicado. Se ainda nao existe um atri¬ 
buto com esse nome, um novo e criado. Em documentos HTML, o nome do atributo e convertido 
para mimisculas antes de ser configurado. Note que os objetos HTMLElement de um documento 
HTML definem propriedades JavaScript que correspondem a todos os atributos HTML padrao e 
voce pode configurar atributos diretamente com essas propriedades. Assim, voce so precisa usar esse 
metodo se quer configurar um atributo nao padronizado. 

void setAttributeNS(string namespace, string nomeOualificado, string valor ) 

Esse metodo e como setAttributeQ, exceto que o atributo a ser criado ou configurado e especificado 
com um URI de namespace e um nome qualificado consistindo em um prefixo de namespace, dois- 
-pontos e um nome local dentro do esparto de nomes. 
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Rotinas de tratamento de evento 

Os objetos Element que representam elementos HTML definem muitas propriedades de tratamento 
de evento. Configure qualquer uma das propriedades listadas a seguir como uma fun^ao e essa fun- 
$ao sera chamada quando ocorrer um tipo de evento especffico no elemento (ou borbulhar ate ele). 
Voce tambem pode usar os metodos definidos por EventTarget para registrar rotinas de tratamento 
de evento, evidentemente. 

Amaioria dos eventos borbulha na hierarquia de documento ate o no Document e, entao, de la para 
o objeto Window. Assim, cada uma das propriedades de tratamento de evento listadas aqui tambem 
e definida nos objetos Document e Window. No entanto, o objeto Window tern muitas rotinas de 
tratamento de evento proprias e as propriedades marcadas com um asterisco na tabela a seguir tern 
um significado diferente no objeto Window. Por motivos historicos, as rotinas de tratamento de 
evento registradas como atributos HTML do elemento <body> sao registradas no objeto Window e 
isso significa que, no elemento <body>, as propriedades de tratamento de evento com asteriscos tern 
um significado diferente do de outros elementos. Consulte Window. 

Muitos dos eventos listados aqui sao disparados apenas em certos tipos de elementos HTML. Mas 
como a maioria desses eventos borbulha para cima na arvore de documentos, as propriedades de 
tratamento de evento sao definidas genericamente para todos os elementos. Os eventos de midia de 
HTML5 disparados em tags <audio> e <video> nao borbulham, de modo que estao documentados 
em MediaElement. Do mesmo modo, alguns eventos de HTML5 relacionados a formulario nao bor¬ 
bulham e sao abordados sob FormControl. 


Rotina de tratamento de evento 

Chamada quando... 


onabort 

o carregamento do recurso e cancelado a pedido do usuario 


onblur* 

o elemento perde o foco de entrada 


onchange 

o usuario muda o conteudo ou o estado do controle formulario (disparado por edigoes 
completas e nao por toques de teda individuals) 

onclick 

o elemento foi ativado por clique de mouse ou outros meios 


oncontextmenu 

o menu de contexto esta para ser exibido, normalmente devido a um clique con 
direito do mouse 

nobotao 

ondblclick 

ocorrem dois cliques rapidos de mouse 


ondrag 

o arrasto continua (disparado na origem do arrasto) 


ondragend 

o arrasto termina (disparado na origem do arrasto) 


ondragenter 

o arrasto entra (disparado no alvo da soltura) 


ondragleave 

o arrasto sai (disparado no alvo da soltura) 


ondragover 

o arrasto continua (disparado no alvo da soltura) 


ondragstart 

o usuario inicia o arrasto e soltura (disparado na origem do arrasto) 


ondrop 

o usuario condui o arrasto e soltura (disparado no alvo da soltura) 


onerror* 

o carregamento do recurso falhou (normalmente devido a um erro de rede) 


onfocus* 

o elemento ganha o foco do tedado 



(continual 
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Rotina de tratamento de evento Chamada quando... 


oninput 

a entrada ocorre em um elemento de formulario (disparado mais frequentemente do que 
onchange) 

onkeydown 

o usuario pressiona uma teda 

onkeypress 

um pressionamento de teda gera um caractere imprimivel 

onkeyup 

o usuario solta uma teda 

onload* 

o carregamento do recurso (por exemplo, de <img>) foi conduido 

onmousedown 

o usuario pressiona um botao do mouse 

onmousemove 

o usuario move o mouse 

onmouseout 

o mouse saideum elemento 

onmouseover 

o mouse entra em um elemento 

onmouseup 

o usuario solta um botao do mouse 

onmousewheel 

o usuario gira a roda do mouse 

onreset 

um <form> e redefinido 

onscroll* 

um elemento com barras de rolagem e rolado 

onselect 

o usuario seleciona texto em um elemento de formulario 

onsubmit 

quando um <form> e enviado 


Elementos e atributos HTML 

Esta seijao de referenda inclui paginas de referenda individuals para os seguintes tipos de elemento 
HTML: 


Elemento(s) 

Pagina de referenda 

Elemento(s) 

Pagina de referenda 

<audio> 

Audio 

<output> 

Output 

<button>, <inputtype="button"> 

Button 

<progress> 

Progress 

<canvas> 

Canvas 

<script> 

Script 

<fieldset> 

FieldSet 

<select> 

Select 

<form> 

Form 

<style> 

Style 

<iframe> 

IFrame 

<td> 

TableCell 

<img> 

Image 

<tr> 

TableRow 

<input> 

Input 

<tbody>, <tfoot>, <thead> 

TableSection 

<label> 

Label 

<table> 

Table 

<a>, <area>, <link> 

Link 

<textarea> 

TextArea 

<meter> 

Meter 

<video> 

Video 

<option> 

Option 




Os elementos HTML que nao tem suas proprias paginas de referenda sao aqueles cujas unicas 
propriedades simplesmente espelham os atributos HTML do elemento. Os atributos a seguir 
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sao validos em qualquer elemento HTML e, portanto, sao propriedades de todos os objetos 
Element: 


Atributo 

Descrigao 

accessKey 

Atalho detedado 

class 

Classe CSS: consulta as propriedades dassName e dassList anteriores. 

contentEditable 

Se o conteudo do elemento pode ser editado. 

contextMenu 

A identificaqio de um elemento <menu> a ser exibida como menu de contexto. Suportado apenas pelo IE 
quando este livro estava sendo escrito. 

dir 

Diregao do texto: "ltr"ou "rtl". 

draggable 

Um atributo booleano configurado em elementos que sao origens do arrasto da API Drag-and-Drop. 

dropzone 

Um atributo configurado em elementos que sao alvos de soltura da API Drag-and-Drop. 

hidden 

Um atributo booleano configurado em elementos que nao devem ser exibidos. 

id 

Um identificador exdusivo para o elemento. 

lang 

0 idioma principal do texto no elemento. 

spellcheck 

Se a ortografia do texto do elemento deve serverificada. 

style 

Estilos CSS em linha do elemento. Consulte a propriedade style anterior. 

tablndex 

Especifica a ordem do foco do elemento. 

title 

Texto de dica de ferramenta para o elemento. 



Os elementos HTML a seguir nao definem nenhum atributo que nao sejam os globais anteriores: 


<abbr> 

<code> 

<footer> 

<hr> 

<rt> 

<sup> 

<address> 

<datalist> 

<h1> 

<i> 

<ruby> 

<tbody> 

<article> 

<dd> 

<h2> 

<kbd> 

<s> 

<tfoot> 

<aside> 

<dfn> 

<h3> 

<legend> 

<samp> 

<thead> 

<b> 

<div> 

<h4> 

<mark> 

<section> 

<title> 

<bdi> 

<dl> 

<h5> 

<nav> 

<small> 

<tr> 

<bdo> 

<dt> 

<h6> 

<noscript> 

<span> 

<ul> 

<br> 

<em> 

<head> 

<P> 

<strong> 

<var> 

<caption> 

<figcaption> 

<header> 

<pre> 

<sub> 

<wbr> 

<cite> 

<figure> 

<hgroup> <rp> 

<summary> 



Os elementos HTML restantes e os atributos que suportam estao listados a seguir. Note que essa 
tabela lista apenas atributos que nao sao os globais descritos anteriormente. Note tambem que ela 
content elementos que tern suas proprias paginas de referenda: 


Elemento 

Atributos 

<area> 

href, target, ping, rel, media, hreflang, type 

alt, coords, shape, href, target, ping, rel, media, hreflang, type 


(continual 
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Elemento 

Atributos 

<audio> 

src, preload, autoplay, loop, controls 

<base> 

href, target 

<blockquote> 

<body> 

cite 

onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onload, 
onmessage, onoffline, ononline, onpagehide, onpageshow, onpopstate, onredo, onresize, onscroll, 
onstorage, onundo, onunload 

<button> 

autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, 
name, type,value 

<canvas> 

width, height 

<col> 

span 

<colgroup> 

<command> 

type, label, icon, disabled, checked, radiogroup 

<del> 

cite, datetime 

<details> 

open 

<embed> 

src, type, width, height, 

<fieldset> 

disabled, form, name 

<form> 

accept-charset, action, autocomplete, enctype, method, name, novalidate, target 

<html> 

manifest 

<iframe> 

src, srcdoc, name, sandbox, seamless, width, height 

<input> 

alt, src, usemap, ismap, width, height 

accept, alt, autocomplete, autofocus, checked, dirname, disabled, form, formaction, formenctype, 
formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, name, 
pattern, placeholder, readonly, required, size, src, step, type, value, width 

<ins> 

cite, datetime 

<keygen> 

<label> 

autofocus, challenge, disabled, form, keytype, name 

form, for 

<li> 

value 

<link> 

href, rel, media, hreflang, type, sizes 

<map> 

name 

<menu> 

type, label 

<meta> 

name, http-equiv, content, charset 

<meter> 

value, min, max, low, high, optimum, form 

<object> 

<ol> 

data, type, name, usemap, form, width, height 

reversed,start 


(continua) 
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Elemento 

Atributos 

<optgroup> 

disabled, label 

<option> 

disabled, label, selected, value 

<output> 

for, form, name 

<param> 

name, value 

<progress> 

value, max, form 

<q> 

cite 

<script> 

<select> 

src, async, defer, type, charset 

autofocus, disabled, form, multiple, name, required, size 

<source> 

src, type, media 

<style> 

<table> 

media, type, scoped 

summary 

<td> 

colspan, rowspan, headers 

<textarea> 

autofocus, cols, disabled, form, maxlength, name, placeholder, readonly, required, rows, wrap 

<th> 

colspan, rowspan, headers, scope 

<time> 

datetime, pubdate 

<track> 

default, kind, label, src, srdang 

<video> 

src, poster, preload, autoplay, loop, controls, width, height 


ErrorEvent 


uma exce^ao nao capturada de um thread worker Event 

Quando ocorre uma exce^ao nao capturada em um thread Worker e a exce^ao nao e tratada pela 
funfao onerror em WorkerClobalScope, essa exce^ao faz um evento error que nao borbulha ser dispa- 
rado no objeto Worker. O evento tem um objeto ErrorEvent associado para fornecer detalhes sobre 
a exce^ao ocorrida. Chamar preventDefaultQ no objeto ErrorEvent (ou retornar false da rotina 


de tratamento de evento) vai i 
pode evitar que seja exibido et 

impedir que o erro se propague para as threads conteineres e tambem 
n uma console de erro. 

Propriedades 

readonly string filename 



O URL do arquivo JavaScript no qual a exce^ao foi lan^ada originalmente. 
readonly unsigned long lineno 

O niimero da linha dentro desse arquivo na qual a exce^ao foi lan^ada. 
readonly string message 

Uma mensagem descrevendo a exceqao. 
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Event 

detalhes de eventos padrao, eventos do IE e eventos da jQuery 

Quando uma rotina de tratamento de evento e chamada, recebe um objeto Event cujas propriedades 
fornecem detalhes sobre o evento, como seu tipo e o elemento no qual ocorreu. Os metodos desse 
objeto Event podem controlar a propaga^ao do evento. Todos os navegadores modernos implemen- 
tam um modelo de evento padrao, exceto o IE, o qual, na versao 8 e anteriores, define seu proprio 
modelo incompatfvel. Esta pagina documenta as propriedades e metodos do objeto evento padrao 
e as alternativas do IE para eles; aborda tambem o objeto evento da jQuery, que Simula um objeto 
evento padrao para o IE. Leia mais sobre eventos no Capitulo 17 e mais sobre eventos da jQuery na 
Se^ao 19.4. 

No modelo de evento padrao, diferentes tipos de eventos tern diferentes tipos de objetos evento as- 
sociados: os eventos de mouse tern um objeto MouseEvent com propriedades relacionadas a mouse, 
por exemplo, e os eventos de teclado tern um objeto KeyEvent com propriedades relacionadas a te- 
cla. Os tipos MouseEvent e KeyEvent compartilham uma superclasse Event comum. Contudo, nos 
modelos de evento do IE e da jQuery, um unico tipo de objeto Event e usado para todos os eventos 
que podem ocorrer em objetos Element. As propriedades de Event especificas para eventos de tecla¬ 
do nao terao um valor util quando ocorre um evento de mouse, mas essas propriedades ainda serao 
definidas. Por simplicidade, esta pagina quebra a hierarquia de eventos e documenta as propriedades 
de todos os eventos que podem ser enviados para objetos Element (e que entao borbulham para os 
objetos Document e Window). 

Originalmente, quase todos os eventos de JavaScript do lado do cliente eram disparados em ele- 
mentos do documento e, portanto, e natural agrupar desse modo as propriedades de objetos evento 
relacionados a documento. Mas HTML5 e padroes relacionados introduzem varios tipos novos de 
evento que sao disparados em objetos que nao sao elementos do documento. Esses eventos frequen- 
temente tern seus proprios tipos Event que sao cobertos em suas proprias paginas de referenda. 
Consulte BeforeUnloadEvent, CloseEvent, ErrorEvent, HashChangeEvent, MessageEvent, PageTransitio- 
nEvent, PopStateEvent, ProgressEvent e StorageEvent. 

A maioria desses tipos de objeto evento estende Event. Outros tipos de evento novos relacionados ao 
padrao HTML5 nao definem um objeto evento proprio - o objeto associado a esses eventos e apenas 
um objeto Event normal. Esta pagina documenta esse objeto Event “normal”, alem das propriedades 
de alguns de seus subtipos. As propriedades marcadas com um asterisco na lista a seguir sao aquelas 
definidas pelo proprio tipo Event. Essas sao as propriedades herdadas por tipos de evento como 
MessageEvent e sao as propriedades definidas para eventos normais simples, como o evento load do 
objeto Window e o evento playing de um objeto MediaElement. 

Constantes 

Estas constantes definem os valores da propriedade eventPhase. Essa propriedade (e as constantes) 
nao sao suportadas no modelo de evento do IE. 
unsigned short CAPTURING_PHASE = 1 

O evento esta sendo enviado para rotinas de captura de tratamento de evento de captura regis- 
tradas em ascendentes de seu alvo. 
unsigned short AT_TARGET = 2 

O evento esta sendo enviado em seu alvo. 




Referenda de JavaScript do lado do cliente 899 


unsigned short BUBBLING_PHASE = 3 

O evento esta borbulhando e sendo enviado nos ascendentes de seu alvo. 

Propriedades 

As propriedades listadas aqui sao definidas pelo modelo de evento padrao de objetos Event e tam¬ 
bem dos objetos evento associados a eventos de mouse e tecla. As propriedades dos modelos de 
evento do IE e da jQuery tambem estao listadas. As propriedades com um asterisco sao definidas 
diretamente por Event e estao universalmente disponfveis em qualquer objeto Event padrao, inde- 
pendente do tipo de evento. 
readonly boolean altKey 

Se a tecla Alt estava pressionada quando o evento ocorreu. Definida para eventos de mouse e 
tecla e tambem por eventos do IE. 
readonly boolean bubbles* 

true se o evento e de um tipo que borbulha (a nao ser que stopPropagationQ seja chamado); 
caso contrario, false. Nao definida por eventos do IE. 
readonly unsigned short button 

Qual botao do mouse mudou de estado durante um evento mousedown, mouseup ou click. 
O valor 0 indica o botao esquerdo, o valor 2 indica o botao direito e o valor 1 indica o botao 
do meio do mouse. Note que essa propriedade e definida quando um botao muda de estado; 
ela nao e usada para informar se um botao estava pressionado durante um evento mousemove, 
por exemplo. Alem disso, essa propriedade nao e um mapa de bits: ela nao pode informar 
se mais de um botao estava pressionado. Por fim, alguns navegadores so geram eventos para 
cliques do botao esquerdo. 

Os eventos do IE definem uma propriedade button incompativel. Nesse navegador, essa pro¬ 
priedade e uma mascara de bits: o bit 1 e ativado se o botao esquerdo foi pressionado, o 2 bit e 
ativado se o botao direito foi pressionado e o bit 4 e ativado se o botao do meio (de um mouse 
com tres botoes) foi pressionado. A jQuery nao Simula a propriedade button padrao no IE; em 
vez disso, consulte a propriedade which, 
readonly boolean cancelable* 

true se a a^ao padrao associada ao evento pode ser cancelada com preventDefault( ); caso con¬ 
trario, false. Definida por todos os tipos de evento padrao, mas nao por eventos do IE. 

boolean cancelBubble 

No modelo de evento do IE, se uma rotina de tratamento de evento quer interromper a propa- 
ga^ao de um evento para os objetos conteineres, deve configurar essa propriedade como true. 
Use o metodo stopPropagationQ para eventos padrao. 
readonly integer charCode 

Para eventos keypress, essa propriedade e a codificaQo Unicode do caractere imprimfvel ge- 
rado. Essa propriedade e 0 para teclas de funijao nao imprimfveis e nao e usada para even¬ 
tos keydown e keyup. Use String.fromCharCodeQ para converter esse valor em uma string. 
A maioria dos navegadores configura keyCode com o mesmo valor dessa propriedade para 
eventos keypress. Contudo, no Firefox keyCode e indefinida para eventos keypress e deve-se 
usar charCode. Essa propriedade nao e padronizada e nao e definida em eventos do IE nem 
simulada pela jQuery. 
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readonly long clientX 
readonly long clientY 

As coordenadas X e Y do cursor do mouse em rela^ao a area cliente (ou janela do navegador). 
Note que essas coordenadas nao levam em conta a rolagem do documento; se um evento 
ocorre no topo da janela, clientY e 0 independente de quanto o documento tenha rolado para 
baixo. Essas propriedades sao definidas para todos os tipos de eventos de mouse. Sao definidas 
para eventos do IE e tambem para eventos padrao. Consulte tambem pageX e pageY. 
readonly boolean ctrlKey 

Se a tecla Ctrl estava pressionada quando o evento ocorreu. Definida para eventos de mouse e 
tecla e tambem por eventos do IE. 
readonly EventTarget currentTarget* 

O objeto Element, Document ou Window que esta tratando desse evento. Durante a captura 
e a borbulha, isso e diferente de target. Nao e definida por eventos do IE, mas e simulada por 
eventos da jQuery. 

readonly DataTransfer dataTransfer 

Para eventos arrastar e soltar, essa propriedade especifica o objeto DataTransfer que coordena a 
operaQo de arrastar e soltar inteira. Os eventos arrastar e soltar sao um tipo de evento de mou¬ 
se; qualquer evento que tenha essa propriedade configurada tambem tera clientX, clientY e 
outras propriedades de evento de mouse. Os eventos arrastar e soltar sao dragstart; drag e drag 
end, na origem do arrasto; e dragenter, dragover, dragleave e drop no alvo da soltura. Consulte 
DataTransfer e a Se^ao 17.7 para ver os detalhes sobre as operates de arrastar e soltar. 
readonly boolean defaultPrevented* 

true se defaultPrevented () foi chamado nesse evento ou false, caso contrario. Essa e uma no- 
vidade no modelo de evento padrao e pode nao estar implementada em todos os navegadores. 
(Os eventos da jQuery definem um metodo isDefaultPreventedQ que funciona como essa 
propriedade.) 
readonly long detail 

Um detalhe numerico sobre o evento. Para eventos click, mousedown e mouseup, esse campo 
e a contagem de cliques: 1 para um clique simples, 2 para um clique duplo, 3 para um clique 
triplo e assim por diante. No Firefox, os eventos DOMMouseScroll usam essa propriedade 
para informar quantidades de rolagem da roda do mouse, 
readonly unsigned short eventPhase* 

A fase atual da propagaQo de evento. O valor e uma das tres constantes definidas anterior- 
mente. Nao e suportada por eventos do IE. 
readonly boolean isTrusted* 

true se esse evento foi criado e enviado pelo navegador ou false, caso seja um evento sintetico 
criado e enviado por codigo JavaScript. Essa e uma adi?ao relativamente nova no modelo de 
evento padrao e pode nao estar implementada por todos os navegadores. 
readonly Element fromElement 

Para eventos mouseover e mouseout no IE, fromElement se refere ao objeto a partir do qual o 
cursor do mouse esta se movendo. Para eventos padrao, use a propriedade relatedTarget. 
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readonly integer keyCode 

O codigo de tecla virtual da tecla pressionada. Essa propriedade e usada por todos os tipos 
de eventos de teclado. Os codigos de tecla podem ser dependentes do navegador, do sistema 
operacional e do hardware do teclado. Normalmente, quando uma tecla exibe um caractere 
imprimfvel nela, o codigo de tecla virtual dessa tecla e igual a codifica$ao do caractere. Os 
codigos de tecla para teclas de funQo nao imprimiveis podem variar mais, mas consulte o 
Exemplo 17-8 para ver um conjunto de codigos normalmente usados. Essa propriedade nao 
foi padronizada, mas e definida por todos os navegadores, incluindo o IE. 
readonly boolean metaKey 

Se a tecla Meta estava pressionada quando o evento ocorreu. Definida para eventos de mouse 
e tecla e tambem por eventos do IE. 

readonly integer offsetX, offsetY 

Para eventos do IE, essas propriedades especificam as coordenadas nas quais o evento ocorreu 
no sistema de coordenadas do elemento de origem do evento (consulte srcElement). Os even¬ 
tos padrao nao tern propriedades equivalentes. 
readonly integer pageX, pageY 

Essas propriedades nao padronizadas, mas amplamente suportadas, sao como clientX e 
clientY, mas utilizam coordenadas do documento em vez de coordenadas da janela. Os 
eventos do IE nao definem essas propriedades, mas a j Query as Simula para todos os na¬ 
vegadores. 

readonly EventTarget relatedTarget* 

Refere-se a um alvo de evento (normalmente um elemento do documento) relacionado ao no 
target do evento. Para eventos mouseover, e o elemento que o mouse deixou quando foi mo- 
vido para o alvo. Para eventos mouseout, e o elemento em que o mouse entrou ao sair do alvo. 
Essa propriedade nao e definida por eventos do IE, mas e simulada por eventos da j Query. 
Consulte as propriedades do IE -fromElement e toElement. 
boolean returnValue 

Para eventos do IE, configure essa propriedade como false para cancelar a a?ao padrao do 
elemento de origem no qual o evento ocorreu. Para eventos padrao, use o metodo preventDe- 
fault(), em vez disso. 

readonly long screenX, screenY 

Para eventos de mouse, essas propriedades especificam as coordenadas X e Y do cursor do 
mouse em rela^ao ao canto superior esquerdo do monitor do usuario. Essas propriedades 
geralmente nao sao uteis, mas sao definidas para todos os tipos de eventos de mouse e sao 
suportadas por eventos padrao e eventos do IE. 
readonly boolean shiftKey 

Se a tecla Shift estava pressionada quando o evento ocorreu. Definida para eventos de mouse 
e tecla e tambem por eventos do IE. 
readonly EventTarget srcElement 

Para eventos do IE, essa propriedade especifica o objeto em que o evento foi disparado. Para 
eventos padrao, use target, em vez disso. 
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readonly EventTarget target* 

O objeto de alvo desse evento - isto e, o objeto no qual o evento foi disparado. (Todos os 
objetos que podem ser alvos de evento implementam os metodos de EventTarget.) Essa pro- 
priedade nao e definida para eventos do IE, mas e simulada por eventos da jQuery. Consulte 
srcElement. 

readonly unsigned long timeStamp* 

Um numero especificando a data e hora na qual o evento ocorreu ou que pelo menos pode ser 
usado para determinar a ordem em que dois eventos ocorreram. Muitos navegadores retornam 
um timestamp que pode ser passado para a construtora Date(). Contudo, no Firefox 4 e an- 
teriores essa propriedade e algum outro tipo de timestamp, como o numero de milissegundos 
desde que o computador foi iniciabzado. Os eventos do IE nao suportam isso. A jQuery confi- 
gura essa propriedade com um timestamp no formato retornado por Date.getTimeQ. 

Element toElement 

Para eventos mouseover e mouseout no IE, toElement se refere ao objeto para o qual o cursor 
do mouse esta se movendo. Para eventos padrao, use relatedTarget, em vez disso. 
readonly string type* 

O nome do evento que esse objeto Event representa. Esse e o nome com o qual a rotina de 
tratamento de evento foi registrada ou o nome da propriedade de tratamento de evento com o 
“on” inicial removido - por exemplo, “click”, “load” ou “submit”. Essa propriedade e definida 
por eventos padrao e eventos do IE. 
readonly Window view 

A janela (chamada de “view” por motivos historicos) na qual o evento foi gerado. Essa pro¬ 
priedade e definida para todos os eventos de interface com o usuario padrao, como eventos de 
mouse e teclado. Nao e suportada em eventos do IE. 
readonly integer wheelDelta 

Para eventos da roda do mouse, essa propriedade especifica a quantidade de rolagem ocorrida 
no eixo Y. Diferentes navegadores configuram diferentes valores nessa propriedade. Consulte 
a SeQo 17.6 para ver os detalhes. Essa e uma propriedade nao padronizada, mas e suportada 
por todos os navegadores, incluindo o IE8 e anteriores. 
readonly integer wheelDeltaX 
readonly integer wheelDeltaY 

Para eventos da roda do mouse em navegadores que suportam rodas de mouse bidimensionais, 
essas propriedades especificam a quantidade de rolagem nas dimensoes X e Y. Consulte a Secjao 
17.6 para ver uma explica^ao sobre como interpretar essas propriedades. Se wheelDeltaY for 
definida, tera o mesmo valor da propriedade wheelDelta. 
readonly integer which 

Essa propriedade legada, nao padronizada, e suportada por navegadores que nao sao oIEee 
simulada na jQuery. Para eventos de mouse, ela e uma unidade a mais do que a propriedade 
button: 1 significa o botao esquerdo, 2 significa o botao do meio e 3 significa o botao direito. 
Para eventos de tecla, ela tern o mesmo valor de keyCode. 
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Metodos 

Todos esses metodos sao definidos pela propria classe Event, de modo que cada um deles esta dispo- 
nivel em qualquer objeto Event padrao. 

void initEvent(string tipo, boolean borbulha, boolean cancelamento) 

Esse metodo inicializa as propriedades type, bubbles e cancelable de um objeto Event. Crie um novo 
objeto evento, passando a string “Event” para o metodo createEventQ de Document. Entao, apos 
inicializa-lo com esse metodo, envie-o em qualquer EventTarget, passando-o para o metodo dispa- 
tchEventQ desse alvo. As outras propriedades de evento padrao (alem de type, bubbles e cancelable) 
serao inicializadas pelo envio. Se quiser criar, inicializar e enviar um evento sintetico mais compli- 
cado, voce vai ter de passar um argumento diferente (como “MouseEvent”) para createEvent() e 
depois inicializar o objeto evento com uma fun^ao de inicializa^ao especifica para o tipo, como 
initMouseEventQ (nao documentada neste livro). 
void preventDefaultQ 

Diz ao navegador Web para que nao execute a afao padrao associada a esse evento, se houver uma. Se 
o evento nao e de um tipo que pode ser cancelado, esse metodo nao tem efeito algum. Esse metodo 
nao e definido em objetos evento do IE, mas e simulado pela jQuery. No modelo de evento do IE, 
configure a propriedade returnValue como false, em vez disso. 

void stopImmediatePropagation() 

E como stopPropagationQ, mas tambem impede a chamada de quaisquer outras rotinas de trata- 
mento registradas no mesmo elemento do documento. Esse metodo e uma novidade no modelo de 
evento padrao e pode nao estar implementado em todos os navegadores. Nao e suportado no mode¬ 
lo de evento do IE, mas e simulado pela jQuery. 

void stopPropagationQ 

Impede o evento de se propagar mais nas fases de captura, destino ou borbulha da propagaQo de 
eventos. Depois que esse metodo e chamado, todas as outras rotinas de tratamento para o mesmo 
evento no mesmo no sao chamadas, mas o evento nao e enviado para nenhum outro no. Esse me¬ 
todo nao e suportado no modelo de evento do IE, mas e simulado pela jQuery. No IE, configure 
cancelBubble como true, em vez de chamar stopPropagationQ. 

Propriedades propostas 

As propriedades listadas aqui sao propostas pela versao draft atual da especificaQo DOM Level 3 
Events. Elas tratam de importantes areas de incompatibilidade entre os navegadores atuais, mas 
ainda nao foram (quando este livro estava sendo escrito) implementadas por quaisquer navegadores. 
Se forem implementadas de forma a operar em conjunto, elas vao tornar muito mais facil escrever 
codigo portavel para tratar de eventos de entrada de texto, eventos de tecla e eventos de mouse, 
readonly unsigned short buttons 

Essa propriedade e como a versao do IE da propriedade button descrita anteriormente. 
readonly string char 

Para eventos de teclado, essa propriedade contem a string de caracteres (que pode ter mais de 
um caractere) gerada pelo evento. 
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readonly string data 

Para eventos textinput, essa propriedade especifica o texto que foi inserido. 
readonly unsigned long deltaMode 

Para eventos da roda do mouse, essa propriedade especifica a interpreta^ao apropriada das 
propriedades deltaX, deltaY e deltaZ. O valor dessa propriedade sera uma destas constantes: 
DOM_DELTA_PIXEL, D0M_DELTA_LINE, D0M_DELTA_PAGE. O valor dessa propriedade e determinado 
de acordo com a plataforma. Pode depender das preferencias do sistema ou de modificadoras 
do teclado pressionadas durante o evento da roda do mouse, 
readonly long deltaX, deltaY, deltaZ 

Para eventos da roda do mouse, essas propriedades especificam o quanto a roda do mouse 
girou em torno de cada um de seus tres eixos possiveis. 
readonly unsigned long inputMethod 

Para eventos textinput, essa propriedade especifica como o texto foi inserido. O valor sera uma 
destas constantes: D0M_INPUT_METH0D_UNKN0WN, D0M_INPUT_METH0D_KEYB0ARD, D0M_INPUT_METH0D_ 
PASTE, D0M_INPUT_METH0D_DR0P, D0M_INPUT_METH0D_IME, D0M_INPUT_METH0D_0PTI0N, D0M_INPUT_ME- 
THOD_HANDWRITING, D0M_INPUT_METH0D_V0ICE, D0M_INPUT_METH0D_MULTIMODAL, D0M_INPUT_METH0D_ 
SCRIPT. 

readonly string key 

Para eventos de teclado que geram caracteres, essa propriedade tern o mesmo valor de char. 
Se o evento de teclado nao gerou caracteres, essa propriedade content o nome da tecla (como 
“Tab” ou “Down”) que foi pressionada. 
readonly string locale 

Para eventos de teclado e eventos textinput, essa propriedade especifica um codigo de idioma 
(como “en-GB”) identificando a localidade para a qual o teclado foi configurado, caso essa 
informa^ao seja conhecida. 
readonly unsigned long location 

Para eventos de teclado, essa propriedade especifica o local da tecla que foi pressionada no 
teclado. O valor vai ser uma destas constantes: D0M_KEY_L0CATI0N_STANDARD, D0M_KEY_L0CATI0N_ 
LEFT, D0M_KEY_L0CATI0N_RIGHT, D0M_KEY_L0CATI0N_NUMPAD, D0M_KEY_L0CATI0N_M0BILE, D0M_KEY_L0- 
CATIONJOYSTICK. 
readonly boolean repeat 

Para eventos de teclado, essa propriedade sera true se o evento foi causado porque uma tecla 
foi pressionada por tempo suficiente para come^ar a se repetir. 

Metodo proposto 

Assim como as propriedades propostas listadas anteriormente, o metodo listado aqui foi proposto 
em uma versao preliminar do padrao, mas ainda nao foi implementado por nenhum navegador. 
boolean getModifierState(string modificadoia) 

Para eventos de mouse e teclado, esse metodo retorna true se a tecla modificadoia especificada 
estava pressionada quando o evento ocorreu; caso contrario, retorna false, modificadoia pode 
ser uma das strings “Alt”, “AltGraph”, “CapsLock”, “Control”, “Fn”, “Meta”, “NumLock”, 
“Scroll”, “Shift”, “SymbolLock” e “Win”. 
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EventSource 

uma conexao Comet com urn servidor HTTP EventTarget 

EventSource representa uma conexao HTTP de longa duraqao, por meio da qual um servidor Web 
pode “enviar” mensagens textuais. Para usar esses “eventos enviados pelo servidor”, passe o URL do 
servidor para a construtora EventSourceQ e, em seguida, registre uma rotina de tratamento de evento 
mensagem no objeto EventSource resultante. 

Eventos enviados pelo servidor sao novos e, quando este livro estava sendo escrito, nao eram supor- 
tados em todos os navegadores. 

Construtora 

new EventSource(string uil) 

Cria um novo objeto EventSource conectado ao servidor Web no url especificado. url e interpretado 
em rela^ao ao URL do documento container. 

Constantes 

Estas constantes definem os valores possiveis da propriedade readyState. 
unsigned short CONNECTING = 0 

A conexao esta sendo estabelecida ou fechou e EventSource esta conectando novamente. 
unsigned short OPEN = 1 

A conexao esta aberta e eventos estao sendo enviados. 
unsigned short CLOSED = 2 

A conexao foi fechada porque close () foi chamado ou porque ocorreu um erro fatal e nao e 
possivel conectar novamente. 

Propriedades 

readonly unsigned short readyState 

O estado da conexao. As constantes anteriores definem os valores possiveis. 
readonly string url 

O URL absoluto no qual EventSource esta conectado. 

Metodos 

void closeQ 

Esse metodo fecha a conexao. Uma vez que esse metodo seja chamado, o objeto EventSource nao 
pode mais ser usado. Caso precise conectar novamente, crie um novo objeto EventSource. 

Rotinas de tratamento de evento 

A comunica?ao pela rede e assincrona, de modo que EventSource dispara eventos quando a cone¬ 
xao se abre, quando ocorre um erro e quando chegam mensagens do servidor. Voce pode registrar 
rotinas de tratamento de evento nas propriedades listadas aqui ou, em vez disso, usar os metodos de 
EventTarget. Todos os eventos de EventSource sao enviados no proprio objeto EventSource. Eles nao 
borbulham e nao tern uma aq:ao padrao que possa ser cancelada. 
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onerror 

Disparada quando ocorre um erro. O objeto evento associado e um Event simples, 
onmessage 

Disparada quando chega uma mensagem do servidor. O objeto evento associado e um Mes- 
sageEvent e o texto da mensagem do servidor esta dispom'vel por meio da propriedade data 
desse objeto. 
onopen 

Disparada quando a conexao se abre. O objeto evento associado e um Event simples. 

EventTarget 

um objeto que recebe eventos 

Os objetos que tern eventos disparados neles ou objetos para os quais eventos borbulham, precisam 
ter uma maneira de definir rotinas de tratamento para esses eventos. Esses objetos normalmente de- 
finem propriedades de registro de rotina de tratamento de evento cujos nomes come^am com “on” 
e normalmente tambem definem os metodos descritos aqui. O registro de rotina de tratamento e 
um assunto surpreendentemente complexo. Consulte a Secjao 17.2 para ver os detalhes e note, em 
especial, que o IE8 e anteriores usam metodos diferentes (descritos em uma seqao especial a seguir) 
de todos os outros navegadores. 

Metodos 

void addEventListener(string tipo, function ouvinte, [boolean usaCaptura ]) 

Esse metodo registra a funfao ouvinte especificada como uma rotina de tratamento para eventos do 
tipo especificado. tipo e uma string de nome de evento e nao inclui o prefixo “on”. O argumento 
usaCaptuia deve ser true se essa e uma rotina de captura de evento (consulte a Se^ao 17.2.3) sendo 
registrada em um documento ascendente do verdadeiro alvo do evento. Note que alguns navegado¬ 
res ainda exigem que voce passe um terceiro argumento para essa fun^ao, sendo que false deve ser 
passado para registrar uma rotina de tratamento normal que nao e de captura. 
boolean dispatchEvent(Event evento) 

Esse metodo envia um evento sintetico para esse alvo de evento. Crie um novo objeto Event com 
document.createEventQ, passando o nome do evento (como “event” para eventos simples). Em se- 
guida, chame o metodo de inicializaqao de evento do objeto Event que voce criou: para um evento 
simples, isso vai ser initEventQ (consulte Event). Em seguida, passe o evento inicializado para esse 
metodo a fim de envia-lo. Nos navegadores modernos, todo objeto Event tern uma propriedade is- 
Trusted. Essa propriedade sera false para qualquer evento sintetico enviado por JavaScript. 

Todo tipo de objeto evento define um metodo de inicializa^ao especifico. Esses metodos sao rara- 
mente usados, tem listas de argumentos longas e complicadas e nao estao documentados neste livro. 
Caso precise criar, inicializar e enviar eventos sinteticos de algum tipo mais complexo do que um 
Event basico, voce vai ter de pesquisar o metodo de inicializa^ao online, 
void removeEventListener(string tipo, function ouvinte, [boolean usaCaptura ]) 

Esse metodo remove uma funijao ouvinte de evento registrada. Ele recebe os mesmos argumentos de 
addEventListenerQ. 
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Metodos do Internet Explorer 

O IE8 e anteriores nao suportam addEventListenerQ e removeEventListener(). Em vez disso, imple- 
mentam os dois metodos a seguir, que sao muito parecidos. (A Se^ao 17.2.4 lista algumas diferen$as 
importantes.) 

void attachEvent(string tipo, function ouvinte) 

Registra a funpio ouvinte especificada como uma rotina de tratamento de eventos do tipo especifica- 
do. Note que esse metodo espera que tipo inclua o prefixo “on” antes do nome do evento. 
void detachEvent(string tipo, function ouvinte) 

Esse metodo fimciona como attachEventQ ao contrario. 


FieldSet 


um <fieldset> em um formulario HTML Node, Element, FormControl 

O objeto FieldSet representa um <fieldset> em um <form> HTML. Os FieldSet implementam a 
maioria (mas nao todas) das propriedades e metodos de FormControl. 

Propriedades 

boolean disabled 

true se o FieldSet esta desabilitado. Desabilitar um FieldSet desabilita os controles de formu¬ 
lario que ele contem. 

readonly HTMLFormControlsCollection elements 

Um objeto semelhante a um array de todos os controles de formulario contidos nesse <fiel- 
dset>. 



File 

um arquivo em um sistema de arquivos local Blob 

Um File e um Blob que tern um nome e possivelmente tambem uma data de modificapio. Ele re¬ 
presenta um arquivo no sistema de arquivos local. Obtenha um arquivo selecionado pelo usuario a 
partir do array files de um elemento <input type=file> ou do array files do objeto DataTransfer 
associado ao objeto Event que acompanha um evento drop. 

Voce tambem pode obter objetos File que representam arquivos em um sistema de arquivo privado 
colocado em caixa de areia, conforme descrito na Se$ao 22.7. Entretanto, a API de sistema de arquivo 
nao era estavel quando este livro estava sendo escrito e nao esta documentada nesta se$ao de referenda. 

Voce pode carregar o conteudo de um arquivo em um servidor com um objeto FormData ou passando 
o File para XMLHttpRequest.sendQ, mas nao ha muito mais que possa fazer com o objeto File em si. 
Use FileReader para ler o conteudo de um File (ou de qualquer Blob). 

Propriedades 

readonly Date lastModifiedDate 

A data de modifica^ao do arquivo ou null, caso nao esteja disponivel. 
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readonly string name 

O nome do arquivo (mas nao seu caminho). 


FileError 

erro durante a leitura de um arquivo 

Um objeto FileError representa um erro ocorrido na leitura de um arquivo com FileReader ou 
FileReaderSync. Se e usada a API sfncrona, o objeto FileError e lanijado. Se e usada a API assfncrona, o 
objeto FileError e o valor da propriedade error do objeto FileReader quando o evento error e enviado. 

Note que a API File Writer (descrita na Se$ao 22.7, mas nao estavel o suficiente para documentar 
nesta se^ao de referenda) adiciona novas constantes de codigo de erro nesse objeto. 

Constantes 

Os codigos de erro de FileError sao os seguintes: 
unsigned short N0T_F0UND_ERR = 1 

O arquivo nao existe. (Talvez tenha sido excluido depois que o usuario o selecionou, mas antes 
de seu programa tentar le-lo.) 
unsigned short SECURITY_ERR = 2 

Problemas de seguran^a nao especificados nao deixam que o navegador permita seu codigo ler 
o arquivo. 

unsigned short AB0RT_ERR = 3 

A tentativa de ler o arquivo foi cancelada. 

unsigned short NOT_READABLE_ERR = 4 

O arquivo nao pode ser lido, talvez porque suas permissoes mudaram ou porque outro pro- 
cesso o bloqueou. 

unsigned short ENCODING_ERR = 5 

Uma chamada para readAsDataURLQ falhou porque o arquivo era longo demais para codificar 
em um URL data: / /. 

Propriedades 

readonly unsigned short code 

Essa propriedade especifica o tipo de erro ocorrido. Seu valor e uma das constantes anteriores. 


FileReader 

le um File ou Blob de forma assfncrona EventTarget 

Um FileReader define uma API assfncrona para ler o conteudo de um File ou qualquer Blob. Para 
ler um arquivo, siga estes passos: 

• Crie um FileReader com a construtora FileReader(). 


Defina as rotinas de tratamento de evento necessarias. 
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• Passe seu objeto File ou Blob para um dos quatro metodos de leitura. 

• Quando sua rotina de tratamento de onload e disparada, o conteudo do arquivo esta disponi- 
vel como a propriedade result. Ou entao, se a rotina de tratamento de onerror e disparada, a 
propriedade error se refere a um objeto FileError que fornece mais informa^oes. 

• Quando a leitura estiver concluida, voce pode reutilizar o objeto FileReader ou descarta-lo e 
criar outros novos, conforme for necessario. 

Consulte FileReaderSync para ver uma API sincrona que pode ser usada em threads worker. 

Construtora 

new FileReader() 

Cria um novo objeto FileReader com a construtora FileReaderQ, a qual nao espera argumentos. 


Constantes 

Estas constantes sao os valores da propriedade readyState: 
unsigned short EMPTY = 0 

Nenhum metodo de leitura foi chamado ainda. 
unsigned short LOADING = 1 

Uma leitura esta em andamento. 
unsigned short DONE = 2 

Uma leitura terminou com sucesso ou com um erro. 



Propriedades 

readonly FileError error 

Se ocorrer um erro durante uma leitura, essa propriedade vai se referir a um FileError que 
descreve o erro. 

readonly unsigned short readyState 

Essa propriedade descreve o estado atual do FileReader. Seu valor sera uma das tres constantes 
listadas anteriormente. 

readonly any result 

Se a leitura terminou com sucesso, essa propriedade tera o conteudo do File ou Blob como 
uma string ou ArrayBuffer (dependendo do metodo de leitura chamado). Quando readyState 
e LOADING ou quando e disparado um evento progress, essa propriedade pode ter um con¬ 
teudo parcial do File ou Blob. Se nenhum metodo de leitura foi chamado ou se ocorreu um 
erro, essa propriedade sera null. 

Metodos 

void abort() 

Esse metodo cancela uma leitura. Ele configura readyState como DONE, result como null e error 
como um objeto FileError com code igual a FileError.AB0RT_ERR. Entao, dispara um evento abort e 
um evento loadend. 
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void readAsArrayBuffer(Blob blob) 

Le os bytes de blob de forma assmcrona e os torna dispom'veis como um ArrayBuffer na propriedade 
result. 

void readAsBinaryString(Blob blob) 

Le os bytes de blob de forma assmcrona, codifica-os como uma string binaria de JavaScript e configu- 
ra a propriedade result com a string resultante. Cada “caractere” de uma string binaria de JavaScript 
tern um codigo de caractere entre 0 e 255. Use String.charCodeAt() para extrair esses valores de byte. 
Note que strings binarias sao uma representa^ao ineficiente de dados binarios: quando possivel, voce 
deve usar ArrayBuffers, em vez disso. 


void readAsDataURL(Blob blob) 



Le os bytes de blob de forma assmcrona, codifica-os (junto co 
e configura a propriedade result com a string resultante. 

m o tipo do Blob) em 

um URL data:// 

void readAsText(Blob blob, [string codificacao ]) 




Le os bytes de blob de forma assmcrona e os decodifica usando a codificacao especificada em uma 
string de texto Unicode e, entao, configura a propriedade result com essa string decodificada. Se a 
codificacao nao for especificada, sera usada UTF-8 (texto codificado em UTF-16 tambem e detec- 
tado e decodificado automaticamente, caso comece com uma Byte Order Mark - marca de ordem 
de byte). 

Rotinas de tratamento de evento 

Assim como todas as APIs assincronas, FileReader e baseada em eventos. Voce pode usar as proprie- 
dades de tratamento de evento listadas aqui para registrar rotinas de tratamento de evento ou usar os 
metodos EventTarget implementado por FileReader. 

Os eventos de FileReader sao disparados no proprio objeto FileReader. Eles nao borbulham e nao 
tern uma agio padrao para cancelar. As rotinas de tratamento de evento de FileReader recebem sem- 
pre um objeto ProgressEvent. Uma leitura bem-sucedida comegi com um evento loadstart, seguido 
de zero ou mais eventos progress, um evento load e um evento loadend. Uma leitura malsucedida 
comegi com um evento loadstart, seguido de zero ou mais eventos progress, um evento error ou 
abort e um evento loadend. 
onabort 

Disparado se a leitura e cancelada com o metodo abort (). 
onerror 

Disparado se ocorre um erro de algum tipo. A propriedade error de FileReader vai se referir a 
um objeto FileError que tenha um codigo de erro. 
onload 

Disparado quando File ou Blob foi lido com sucesso. A propriedade result de FileReader tern o 
conteudo do File ou Blob, em uma representat;ao que depende do metodo de leitura chamado. 
onloadend 

Toda chamada para um metodo de leitura de FileReader finalmente produz um evento load, 
um evento error ou um evento abort. O FileReader tambem dispara um evento loadend apos 
cada um desses eventos para proveito dos scripts que querem receber apenas um evento, em 
vez de receber todos os tres. 
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onloadstart 

Disparado depois que um metodo de leitura e chamado, mas antes que qualquer dado seja 
lido. 

onprogress 

Disparado aproximadamente 20 vezes por segundo, enquanto os dados de File ou Blob estao 
sendo lidos. O objeto ProgressEvent vai especificar quantos bytes foram lidos e a propriedade 
result do FileReader pode conter uma representa?ao desses bytes. 


FileReaderSync 

le um File ou Blob de forma smcrona 

FileReaderSync e uma versao smcrona da API FileReader, disponivel apenas para threads Worker. A 
API smcrona e mais facil de usar do que a assincrona: basta criar um objeto FileReaderSync() e entao 
chamar um de seus metodos de leitura, o qual vai retornar o conteudo de File ou Blob ou lan^ar um 
objeto FileError. 

Construtora 

new FileReaderSync!) 

Cria um novo objeto FileReaderSync com a construtora FileReaderSync!), a qual nao espera argu¬ 
ments. 

Metodos 

Estes metodos la.nqa.rn um objeto FileError, caso a leitura falhe por qualquer motivo. 

ArrayBuffer readAsArrayBuffer(Blob blob) 

Le os bytes de blob e os retorna como um ArrayBuffer. 

string readAsBinaryString(Blob blob) 

Fe os bytes de blob, os codifica como uma string binaria de JavaScript (consulte String.fromCharCo- 
de()) e retorna essa string binaria. 

string readAsDataURL(Blob blob) 

Fe os bytes de blob e os codifica junto com a propriedade type de blob em um URL data: / / e, entao, 
retorna esse URL. 

string readAsText(Blob blob, [string codificacao]) 

Le os bytes de blob, os decodifica em texto usando a codificacao especificada (ou usando UTF-8 ou 
UTF-16, caso nao seja especificada nenhuma codificacao) e retorna a string resultante. 

Form 

um <form> em um documento HTML Node, Element 

O objeto Form representa um elemento <form> em um documento HTML. A propriedade elements e 
um HTMLCollection que fornece acesso conveniente a todos os elementos do formulario. Os metodos 
submit!) e reset!) permitem que um formulario seja enviado ou redefinido sob controle do programa. 
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Cada formulario em um documento e representado como um elemento do array document.forms[]. 
Os elementos de um formulario (botoes, campos de entrada, caixas de sele^ao, etc.) sao reunidos 
no objeto semelhante a um array Form.elements. Controles de formulario nomeados podem ser 
referenciados diretamente pelo nome: o nome do controle e usado como nome de propriedade no 
objeto Form. Assim, para se referir a um elemento Input com o atributo name “phone” dentro de um 
formulario f, voce poderia usar a expressao JavaScript f. phone. 

Consulte a Se^ao 15.9 para obter mais informa^oes sobre formularios HTML. Consulte FormCon- 
trol, FieldSet, Input, Label, Select e TextArea para obter mais informa^oes sobre os controles que 
podem aparecer em um formulario. 

Esta pagina documenta recursos de formulario de HTML5 que, quando este livro estava sendo 
escrito, ainda nao eram amplamente implementados. 

Propriedades 

A maioria das propriedades listadas aqui simplesmente espelha os atributos HTML de mesmo nome. 

string acceptCharset 

Uma lista de um ou mais conjuntos de caractere permitidos nos quais os dados do formulario 
podem ser codificados para envio. 

string action 

O URL para o qual o formulario deve ser enviado. 

string autocomplete 

A string “on” ou “off”. Se for “on”, o navegador pode preencher os controles do formulario 
antecipadamente com os valores salvos de uma visita anterior a pagina. 
readonly HTMLFormControlsCollection elements 

Um objeto semelhante a um array de controles contidos nesse formulario. 

string enctype 

Especifica como os valores dos controles de formulario sao codificados para envio. Os valores 
validos dessa propriedade sao: 

• “application/x-www-form-urlencoded” (o padrao) 

• “multipart/form-data” 

• “text/plain” 
readonly long length 

O numero de controles de formulario representados pela propriedade elements. Os elementos do 
formulario se comportam como se fossem eles proprios objetos semelhantes a um array de contro¬ 
les de formulario e, paraum formulario f e um inteiro n, a expressao f[n] e igual a f .elements[n]. 
string method 

O metodo HTTP usado para enviar o formulario para o URL action. E “get” ou “post”, 
string name 

O nome do formulario, conforme especificado pelo atributo HTML name. O valor dessa pro¬ 
priedade pode ser usado como nome de propriedade no objeto documento. O valor dessa 
propriedade de documento sera esse objeto Form. 
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boolean noValidate 

true se o formulario nao deve ser validado antes do envio. Espelha o atributo HTML novali- 
date. 

string target 

O nome de uma janela ou quadro no qual deve ser exibido o documento retornado pelo envio 
do formulario. 

Metodos 

boolean checkValidityQ 

Nos navegadores que suportam valida^ao de formulario, esse metodo verifica a validade de cada 
controle de formulario. Retorna true se todos sao validos. Se algum controle nao e valido, ele dispara 
um evento invalid nesse controle e entao retorna false. 

void dispatchFormChange() 

Esse metodo dispara um evento formchange em cada controle nesse formulario. Normalmente, o 
formulario faz isso automaticamente, quando a entrada do usuario dispara um evento change; por- 
tanto, normalmente voce nao precisa chamar esse metodo. 

void dispatchFormInput() 

Esse metodo dispara um evento forminput em cada controle nesse formulario. Normalmente, o for¬ 
mulario faz isso automaticamente, quando a entrada do usuario dispara um evento input; portanto, 
normalmente voce nao precisa chamar esse metodo. 

void resetQ 

Redefine todos os elementos do formulario com seus valores padrao. 

void submitQ 

Envia o formulario manualmente, sem disparar um evento submit. 

Rotinas de tratamento de evento 

Estas propriedades de tratamento de evento relacionadas a formulario sao definidas em Element, 
mas estao documentadas com mais detalhes aqui porque sao disparadas em elementos Form, 
onreset 

Chamada imediatamente antes que os elementos do formulario sejam redefinidos. Retorna 
false ou cancela o evento para impedir a redefini^ao. 
onsubmit 

Chamada imediatamente antes que formulario seja enviado. Retorna false ou cancela o even¬ 
to para impedir o envio. 


FormControl 

recursos comuns de todos os controles de formulario 

Em sua maioria, os controles de formulario HTML sao elementos <input>, mas os formularios tam- 
bem podem conter controles <button>, <select> e <textarea>. Esta pagina documenta os recursos 
que esses tipos de elemento tern em comum. Consulte a Seqao 15.9 para ver uma introdu^ao aos 
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formularios HTML e consulte Form, Input, Select e TextArea para mais informa^oes sobre formula- 
rios e controles de formulario. 

Os elementos <fieldset> e <output> implementam a maioria (mas nao todas) das propriedades des- 
critas aqui. Esta referenda trata objetos FieldSet e Output como FormControls, mesmo que nao 
implementem cada propriedade. 

Esta pagina documenta certos recursos de formulario HTML5 (especialmente a valida^ao de formu¬ 
lario) que, quando este livro estava sendo escrito, ainda nao estavam amplamente implementados. 

Propriedades 

boolean autofocus 

true se o controle deve receber o foco do teclado automaticamente, assim que o documento 
for carregado. (Os controles FieldSet e Output nao implementam essa propriedade.) 

boolean disabled 

true se o controle de formulario esta desabilitado. Os controles desabilitados nao respondem 
a entrada do usuario e nao estao sujeitos a valida^ao de formulario. (Os elementos Output 
nao implementam essa propriedade; os elementos FieldSet a utilizam para desabilitar todos os 
controles que contem.) 
readonly Form form 

Uma referenda ao Form que e o proprietario desse controle ou null, caso ele nao tenha um. 
Se um controle esta contido dentro de um elemento <form>, esse e seu formulario proprietario. 
Caso contrario, se o controle tern um atributo HTML form que especifica a identifica^ao de 
um <form>, esse formulario nomeado e o formulario proprietario. 
readonly NodeList labels 

Um objeto semelhante a um array de elementos Label associado a esse controle. (Os controles 
FieldSet nao implementam essa propriedade.) 
string name 

O valor do atributo HTML name para esse controle. O nome de um controle pode ser usado 
como propriedade do elemento Form: o valor dessa propriedade e o elemento do controle. Os 
nomes de controle tambem sao usados ao se enviar um formulario. 

string type 

Para elementos <input>, a propriedade type tern o valor do atributo type ou o valor “text”, 
caso nao seja especificado um atributo type na tag <input>. Para elementos <button>, <select> 
e textaiea, a propriedade type e “button”, “select-one” (ou “select-multiple”, se o atributo 
multiple estiver configurado) e “textarea”. Para elementos <fieldset>, type e “fieldset”, e para 
elementos <output>, type e “output”, 
readonly string validationMessage 

Se o controle for valido ou nao estiver sujeito a valida^ao, essa propriedade sera a string vazia. 
Caso contrario, essa propriedade vai conter uma string localizada explicando por que a entrada 
do usuario e invalida. 
readonly FormValidity validity 

Essa propriedade se refere a um objeto que especifica se a entrada do usuario para esse controle 
e valida e, se nao for, por que nao. 
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string value 

Todo controle de formulario tem uma string value usada quando o formulario e enviado. Para 
controles de entrada de texto, o valor e a entrada do usuario. Para botoes, e apenas o valor do 
atributo HTML value. Para elementos de safda, essa propriedade e como a propriedade tex- 
tContent herdada de Node. Elementos FieldSet nao implementam essa propriedade. 
readonly boolean willValidate 

Essa propriedade e true se o controle toma parte na valida^ao de formulario; caso contrario, e 
false. 

Rotinas de tratamento de evento 

Os controles de formulario definem as seguintes propriedades de tratamento de evento. Voce tam- 
bem pode registrar rotinas de tratamento de evento usando os metodos EventTarget implementados 
por todos os Elements: 



Rotina de tratamento de evento 

Chamada quando 

onformchange 

Quando um evento change e disparado em qualquer controle no formulario, o formulario transmite 
um evento formchange que nao borbulha para todos os seus controles. Os controles podem usar essa 
propriedade de tratamento de evento para detectar altera^oes em seus controles irmaos. 

onforminput 

Quando um evento input e disparado em qualquer controle no formulario, o formulario transmite 
um evento forminput que nao borbulha para todos os seus controles. Os controles podem usar essa 
propriedade de tratamento de evento para detectar alterapes em seus controles irmaos. 

oninvalid 

Se um controle do formulario nao tiver validapo, um evento invalid sera disparado nele. Esse evento 
nao borbulha, mas se for cancelado, o navegador nao vai exibir uma mensagem de erro para o controle. 


Metodos 

boolean checkValidityQ 

Retorna true se o controle e valido (ou se nao esta sujeito a valida^ao). Caso contrario, dispara um 
evento invalid no controle e retorna false. 

void setCustomValidity(string erro) 

Se erro e uma string nao vazia, esse metodo marca o controle como invalido e usa eno como men- 
sagem localizada ao informar para o usuario a invalidade do elemento. Se erro e a string vazia, qual- 
quer string erro anterior e removida e o controle e considerado valido. 

Form Data 

corpo de um pedido HTTP multipart/form-data 

O tipo FormData e um recurso de XMLHttpRequest Level 2 (XHR2) que torna facil fazer requisites 
HTTP PUT com codifica^ao multipart/form-data usando um XMLHttpRequest. A codifica^ao mul¬ 
tipart e necessaria, por exemplo, se voce quer carregar varios objetos File em uma unica requisite. 

Crie um objeto FormData com a construtora e entao adicione nele pares nome/valor com o metodo 
append(). Uma vez que voce tenha adicionado todas as partes do corpo de sua requisi^ao, pode passar 
o FormData para o metodo send() de um XMLHttpRequest. 
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Construtora 

new FormData() 

Essa construtora sem argumentos retorna um objeto FormData vazio. 

Metodos 

void append(string nome, any valor) 

Esse metodo adiciona uma nova parte ( com o nome e valor especificados) no FormData. O argu- 
mento valor pode ser uma string ou um Blob (lembre-se de que os objetos File sao Blobs). 

FormValidity 

a validade de um controle de formulario 

A propriedade validity de um FormControl se refere a um objeto FormValidity que e uma representa- 
fao dinamica do estado da validade desse controle. Se a propriedade valido e false, o controle nao e 
valido e pelo menos uma das outras propriedades sera true para indicar a natureza do erro (ou erros) 
de validade. 

A valida^ao de formulario e um recurso de HTML5 que, quando este livro estava sendo escrito, 
ainda nao era amplamente implementado. 

Propriedades 

readonly boolean customError 

Um script chamou FormControl. setCustomValidityQ nesse elemento. 
readonly boolean patternMismatch 

A entrada nao corresponde a expressao regular pattern, 
readonly boolean rangeOverflow 
A entrada e grande demais. 
readonly boolean rangeUnderflow 
A entrada e pequena demais. 
readonly boolean stepMismatch 

A entrada nao corresponde ao step especificado. 
readonly boolean tooLong 
A entrada e longa demais. 
readonly boolean typeMismatch 
A entrada e do tipo errado. 
readonly boolean valid 

Se essa propriedade e true, o controle de formulario e valido e todas as outras propriedades sao 
false. Se essa propriedade e false, o controle de formulario nao e valido e pelo menos uma das 
outras propriedades e true, 
readonly valor booleanoMissing 

O elemento do formulario era required, mas nenhum valor foi inserido. 
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Geocoordinates 

uma posigao geografica 

Um objeto desse tipo representa um posigao na superficie terrestre. 

Propriedades 

readonly double accuracy 

A precisao dos valores de latitude e longitude, em metros, 
readonly double altitude 

A altitude, em metros, acima do nfvel do mar ou null, caso a altitude nao esteja dispom'vel. 

readonly double altitudeAccuracy 

A precisao, em metros, da propriedade altitude. Se altitude for null, altitudeAccuracy tam- 
bem sera null, 
readonly double heading 

A diregao de viagem do usuario em graus, no sentido horario a partir do norte real, ou null, 
caso o cabegalho nao esteja disponivel. Se a informagao de cabegalho estiver dispom'vel, mas 
speed for 0, heading sera NaN. 
readonly double latitude 

A latitude do usuario em graus decimals ao norte do equador. 

readonly double longitude 

A longitude do usuario em graus decimals a leste do Meridiano de Greenwich, 
readonly double speed 

A velocidade do usuario em metros por segundo ou null, se a informagao de velocidade nao estiver 
disponivel. Essa propriedade nunca sera um numero negativo. Consulte tambem heading. 


Geolocation 

obtem a latitude e longitude do usuario 

O objeto Geolocation define metodos para determinar a localizagao geografica precisa do usuario. 
Nos navegadores que o suportam, o objeto Geolocation esta disponivel por meio do objeto Naviga¬ 
tor como navigator.geolocation. Os metodos descritos aqui dependem de alguns outros tipos: as 
localizagoes sao relatadas na forma de um objeto Ceoposition e os erros sao informados como objetos 
GeolocationError. 

Metodos 

void clearWatch(long idObservacao) 

Deixa de monitorar a localizagao do usuario. O argumento idObservacao deve ser o valor retornado 
pela chamada correspondente de watchPositionQ. 

void getCurrentPosition(function sucesso, [function erro], [object opcoes ]) 

Determina a localizagao do usuario de forma assincrona, usando as opcoes (consulte a lista de proprie¬ 
dades de opgao a seguir) especificadas. Esse metodo retorna imediatamente e, quando a localizagao do 
usuario se torna disponivel, ele passa um objeto Geoposition para a fungao callback sucesso especificada. 






918 Parte IV Referenda de JavaScript do lado do cliente 


Ou entao, se ocorre um erro (talvez porque o usuario nao tenha dado permissao para compartilhar 
sua localiza^ao), ele passa um objeto GeolocationError para a fun^ao callback erro, se uma foi espe- 
cificada. 

long watchPosition(function sucesso, [function eiro], [object opcoes ]) 

Esse metodo e como getCurrentPositionQ, mas depois de determinar a localiza^ao atual do usuario, 
continua a monitorar sua localizafao e chama a funfao callback sucesso sempre que descobrir que 
a posi^ao mudou significativamente. O valor de retorno e um numero que pode ser passado para 
clearWatchQ a fim de interromper o monitoramento da localiza^ao do usuario. 

Op0es 

O argumento opcoes de getCurrentPositionQ e watchPositionQ e um objeto JavaScript normal, 
com zero ou mais das seguintes propriedades: 

boolean enableHighAccuracy 

Esta opfao e uma dica de que uma posi^ao de alta precisao e desejada, mesmo que demore 
mais para ser determinada ou use mais energia da bateria, por exemplo. O padrao e false. Em 
equipamentos que podem determinar a posi^ao via sinais WiFi ou por GPS, configurar essa 
op^ao como true normalmente vai significar “use o GPS”. 

long maximumAge 

Esta op^ao especifica a maior idade aceitavel (em milissegundos) do primeiro objeto Geopo¬ 
sition passado para successCallback. O padrao e 0, ou seja, cada chamada de getCurrentPo- 
sitionQ ou watchPositionQ tera de solicitar uma nova corre^ao de posiqao. Se essa op^ao for 
configurada como 60000, por exemplo, a implementa^ao podera retornar qualquer posi^ao 
geografica determinada no ultimo minuto. 
long timeout 

Esta op?ao especifica quanto tempo, em milissegundos, o solicitante deseja esperar por uma 
corre^ao de posi^ao. O valor padrao e Infinity. Se decorrer mais do que timeout milissegun¬ 
dos, enoiCallback sera chamada. Note que o tempo gasto para pedir permissao ao usuario 
para compartilhar sua localiza?ao nao conta nesse valor de timeout. 


GeolocationError 

um erro ao consultar a localiza$ao do usuario 

Se uma tentativa de determinar a posi^ao geografica do usuario falhar, sua fun9k) callback de error 
sera chamada com um objeto GeolocationError descrevendo o que deu errado. 

Constantes 

Estas constantes sao os valores possfveis da propriedade code: 

unsigned short PERMISSION_DENIED = 1 

O usuario nao deu permissao para compartilhar sua localiza^ao. 

unsigned short POSITIONUNAVAILABLE = 2 

A localiza^ao nao pode ser determinada por um motivo nao especificado. Isso poderia ser cau- 
sado por um erro da rede, por exemplo. 
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unsigned short TIMEOUT = 3 

A localiza^ao nao pode ser determinada dentro do tempo designado (consulte a op^ao timeout 
descrita em Ceolocation). 

Propriedades 

readonly unsigned short code 

Essa propriedade tera um dos tres valores anteriores. 

readonly string message 

Uma mensagem fornecendo mais detalhes sobre o erro. A mensagem se destina a ajudar na 
depura^ao e nao e conveniente para exibi^ao aos usuarios finais. 

Geoposition 

um relatorio de posigao com timestamp 

Um objeto Geoposition representa a posi^ao geografica do usuario em um momento especifico. Os 
objetos desse tipo tern apenas duas propriedades: um timestamp e uma referenda para um objeto 
Geocoordinates que contem as propriedades de posifao reais. 

Propriedades 

readonly Geocoordinates coords 

Essa propriedade se refere a um objeto Geocoordinates cujas propriedades especificam a lati¬ 
tude, a longitude do usuario, etc. 
readonly unsigned long timestamp 

O tempo no qual essas coordenadas eram validas, em milissegundos desde a epoca. Esse valor 
pode ser usado para criar um objeto Date, se desejar. 

HashChangeEvent 

objeto evento para eventos hashchange Event 

Os navegadores disparam um evento hashchange quando o identificador de fragmento (a parte de um 
URL que come5a com o sinal numerico #) do URL do documento muda. Isso pode acontecer por causa 
de uma altera^ao com script feita na propriedade hash do objeto Location ou porque o usuario utilizou 
os botoes Back ou Forward para navegar pelo historico do navegador. Em um ou outro caso, um evento 
hashchange e disparado. O objeto evento associado e um HashChangeEvent. Consulte a Se^ao 22.2 para 
mais informafoes sobre gerenciamento de historico com location. hash e sobre o evento hashchange. 

Propriedades 

readonly string newURL 

Essa propriedade contem o novo valor de location.href. Note que esse e o URL completo e 
nao apenas a parte hash dele, 
readonly string oldURL 

Essa propriedade contem o valor antigo de location. href. 
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History 

o historico de navegagao de um objeto Window 

O objeto History representa o historico de navega?ao de uma janela. Contudo, por motivos de pri- 
vacidade, ele nao permite acesso atraves de script aos URLs reais que foram visitados. Os metodos 
do objeto History permitem que os scripts movam a janela para tras e para frente no historico de 
navega^ao e adicionem novas entradas no historico. 

Propriedades 

readonly long length 

Essa propriedade especifica o numero de entradas na lista do historico do navegador. Como 
nao ha como determinar o indice do documento atualmente exibido dentro dessa lista, saber 
o tamanho da lista nao e especialmente util. 

Metodos 

void back() 

back() faz a janela ou quadro ao qual o objeto History pertence revisitar o URL (se houver) que foi 
visitado imediatamente antes do atual. Chamar esse metodo tem o mesmo efeito de clicar no botao 
Back do navegador. Tambem e equivalente a: 
history.go(-l); 

void forward() 

forward () faz a janela ou quadro ao qual o objeto History pertence revisitar o URL (se houver) que 
foi visitado imediatamente apos o atual. Chamar esse metodo tem o mesmo efeito de clicar no botao 
Forward do navegador. Tambem e equivalente a: 

history.go(l); 
void go([long delta]) 

O metodo History.go() recebe um argumento inteiro e faz o navegador visitar o URL que esta o 
numero especificado de posi^oes distante na lista do historico de navega^ao mantida pelo objeto 
History. Argumentos positivos movem o navegador para frente na lista e argumentos negativos o 
movem para tras. Assim, chamar history.go(-i) e equivalente a chamar history.back() e produz 
o mesmo efeito de clicar no botao Back. Com um argumento 0 ou sem nenhum argumento, esse 
metodo recarrega o documento correntemente exibido. 
void pushState(any dados, string t'ltulo, [string url ]) 

Esse metodo adiciona uma nova entrada no historico de navega^ao da janela, armazenando um 
clone estruturado (consulte “Clones estruturados”, na pagina 672) de dados, assim como o tltulo e 
url especificados. Se, posteriormente, o usuario utilizar o mecanismo de navega^ao de historico do 
navegador para retornar a esse estado salvo, um evento popstate sera disparado na janela e o objeto 
PopStateEvent contera outro clone de dados em sua propriedade state. 

O argumento tltulo fornece um nome para esse estado e os navegadores podem exibi-lo em suas 
interfaces de historico. (Quando este livro estava sendo escrito, os navegadores ignoravam esse argu¬ 
mento.) Se for especificado, o argumento url e exibido na barra de endere^o e fornece a esse estado 
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um estado permanente que pode ser marcado ou compartilhado com outros. url e solucionado em 
rela^ao a local iza^ao atual do documento. Se url e um URL absoluto, deve ter a mesma origem do 
documento atual. Uma tecnica comum e usar URLs que sao apenas identificadores de fragmento 
come^ando com #. 

void replaceState(any dados, string titulo, [string url]) 

Esse metodo e como pushState(), exceto que, em vez de criar uma nova entrada no historico de na- 
vega?ao da janela, ele atualiza a entrada atual com dados, titulo e url de um novo estado. 

HTMLCollection 

uma colegao de elementos acesslveis pelo nome ou numero 

HTMLCollection e um objeto semelhante a um array somente de leitura de objetos Element que 
tambem define propriedades correspondentes aos valores de name e id dos elementos reunidos. O 
objeto Document define propriedades HTMLCollection como forms e image. 

Os objetos HTMLCollection definem metodos item() e namedltemQ para recuperar elementos pela 
posiqao ou pelo nome, mas nunca e necessario utiliza-los: voce pode simplesmente tratar HTML¬ 
Collection como um objeto JavaScript e acessar suas propriedades e elementos de array. Por exemplo: 
document.imagesjO] // Um elemento numerado de um HTMLCollection 

document.forms.address // Um elemento nomeado de um HTMLCollection 

Propriedades 

readonly unsigned long length 

O numero de elementos no conjunto. 

Metodos 

Element item(unsigned long indice) 

Retorna o elemento no Indice especificado no conjunto ou null, se Indice estiver fora do limite. 
Tambem e possfvel simplesmente especificar a posi?ao dentro dos colchetes do array, em vez de cha- 
mar esse metodo explicitamente. 

object namedltem(string nome) 

Retorna o primeiro elemento do conjunto que tenha o nome especificado por seu atributos id ou 
name, ou null, caso nao exista tal elemento. Voce tambem pode colocar o nome do elemento dentro 
dos colchetes do array, em vez de chamar esse metodo explicitamente. 


HTMLDocument 

consulte Document 


HTMLEIement 


consulte Element 
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HTMLFormControlsCollection 

urn objeto semelhante a um array de controles de formulario HTMLCollection 

HTMLFormControlsCollection e um HTMLCollection especializado, usado por elementos Form 
para representar cole^oes de controles de formulario. Assim como com HTMLCollection, voce pode 
indexa-lo numericamente como um array ou trata-lo como um objeto e indexa-lo com os nomes ou 
identifica$oes de controles de formulario. Os formularios HTML frequentemente possuem varios 
controles (normalmente botoes de op^ao ou caixas de sele^ao) que tern o mesmo valor de seus atri- 
butos name, sendo que um HTMLFormControlsCollection trata isso de forma diferente de como 
um HTMLCollection normal faria. 

Quando uma propriedade de um HTMLFormControlsCollection e lida e o formulario content 
mais de um elemento com essa propriedade como nome, o HTMLFormControlsCollection retorna 
um objeto semelhante a um array com todos os controles de formulario que compartilham o nome. 
Alem disso, o objeto semelhante a um array retornado tern uma propriedade value que retorna o 
atributo value do primeiro botao de op^ao com esse nome marcado. Voce pode ate configurar essa 
propriedade value para marcar o botao de op^ao com o valor correspondente. 


HTMLOptionsCollection 

uma colegao de elementos Option HTMLCollection 

HTMLOptionsCollection e um HTMLCollection especializado que representa o elementos Option 
dentro de um elemento Select. Ele anula o metodo namedltem() para manipular varios elementos 
Option com o mesmo nome e define metodos para adicionar e remover elementos. Por motivos 
historicos, HTMLOptionsCollection define uma propriedade length gravavel que pode ser configu- 
rada para truncar ou estender a colecjao. 

Propriedades 

unsigned long length 

Essa propriedade retorna o numero de elementos na colefao. No entanto, ao contrario da 
propriedade length de um HTMLCollection normal, essa nao e somente de leitura. Se voce a 
configura com um valor menor do que o atual, a cole^ao de elementos Option e truncada e os 
que nao estao mais na cole^ao sao removidos do elemento Select conteiner. Se voce configura 
length com um valor maior do que o atual, elementos <option/> vazios sao criados e adiciona- 
dos ao elemento Select e na cole^ao. 
long selectedlndex 

O mdice do primeiro elemento Option selecionado no conjunto ou -1, caso nenhum ele¬ 
mento Option esteja selecionado. Voce pode configurar essa propriedade para alterar o item 
selecionado. 

Metodos 

void add(Element opcao, [any antes]) 

Insere a opcao (que deve ser um elemento <option> ou <optgroup>) nessa cole^ao (e no elemento Se¬ 
lect), na posi?ao especificada por antes. Se antes e null, a insere no fim. Se antes e um indice inteiro, 
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a insere antes do item que esta atualmente nesse indice. Se antes e outro Element, insere a opcao 
antes desse elemento. 

Element item(unsigned long indice) 

HTMLOptionsCollection herda esse metodo de HTMLCollection. Ele retorna o elemento no 
indice especificado ou null, caso indice esteja fora do limite. Voce tambem pode indexar a cole^ao 
diretamente com colchetes, em vez de chamar esse metodo explicitamente. 
object namedltem(string nome) 

Esse metodo retorna todos os elementos Option da cole^ao que tenham o nome ou a identifica^ao 
especificada. Se nenhum elemento corresponder, retorna null. Se um elemento Option correspon- 
der, retorna esse elemento. Se mais de um elemento corresponder, retorna um NodeList desses ele¬ 
mentos. Note que e possivel indexar um HTMLOptionsCollection diretamente, usando nome como 
um nome de propriedade, em vez de chamar esse metodo explicitamente. 
void remove(long indice) 

Esse metodo remove o elemento <option> no indice especificado na cole^ao. Se for chamado sem 
argumentos ou com um argumento que esteja fora do limite, pode remover o primeiro elemento da 


IFrame 

um <iframe> HTML Node, Element 

Um objeto IFrame representa um elemento <iframe> em um documento HTML. Se voce pesqui- 
sar um <iframe> usando getElementByldQ ou uma funijao de consulta semelhante, vai obter um 
objeto IFrame. Contudo, se acessar o <iframe> por meio da propriedade frames do objeto Window 
ou usando o nome do <iframe> como propriedade da janela container, vai obter o objeto Window 
representado pelo <iframe>. 

Propriedades 

readonly Document contentDocument 

O documento contido nesse elemento <iframe>. Se o documento exibido no <iframe> e de 
uma origem diferente, a politica da mesma origem (Se^ao 13.6.2) vai impedir o acesso a esse 
documento. 

readonly Window contentWindow 

O objeto Window do <iframe>. (O frameElement desse objeto Window vai ser uma referenda 
para esse objeto IFrame.) 

string height 

A altura, em pixels CSS, do <iframe>. Essa propriedade espelha o atributo HTML height, 
string name 

O nome do <iframe>. Essa propriedade espelha o atributo HTML name e seu valor pode ser 
usado como target de objetos Link e Form, 
readonly DOMSettableTokenList sandbox 

Essa propriedade espelha o atributo HTML5 sandbox e permite consulta-lo e configura-lo 
como uma string ou como um conjunto de simbolos individuals. 
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O atributo sandbox especifica que o navegador deve impor restrifoes de seguran^a adicionais 
para conteudo nao confiavel exibido em um <iframe>. Se o atributo sandbox estiver presente, 
mas vazio, o conteudo de <iframe> sera tratado como se fosse de uma origem diferente, nao 
vai poder executar scripts, nao vai poder exibir formularios e nao vai poder mudar o local de 
sua janela container. O atributo sandbox tambem pode ser configurado como uma lista de 
simbolos separados por espa^os, cada um dos quais revogando uma dessas restrRoes de segu- 
ran^a adicionais. Os simbolos validos sao “allow-same-origin”, “allow-scripts”, “allow-forms” 
e “allow-top-navigation”. 

O atributo sandbox ainda nao estava amplamente implementado quando este livro estava sen- 
do escrito. Consulte uma referenda sobre HTML para ver mais detalhes. 

boolean seamless 

Essa propriedade espelha o atributo HTML seamless. Se e true, o navegador deve renderizar o 
conteudo do <iframe> de modo que pare^a fazer parte do documento conteiner. Isso significa, 
em parte, que o navegador deve aplicar os estilos CSS do documento conteiner no conteudo 
do <iframe>. 

O atributo seamless foi introduzido como parte de HTML5 e ainda nao estava amplamente 
implementado quando este livro estava sendo escrito. 
string src 

Essa propriedade espelha o atributo src do <iframe>: ela especifica o URL do conteudo de um 
quadro. 

string srcdoc 

Essa propriedade espelha o atributo HTML srcdoc e especifica o conteudo do <iframe> como 
uma string. O atributo srcdoc foi introduzido recentemente como parte de HTML5 e ainda 
nao era implementado quando este livro estava sendo escrito. 

string width 

A largura, em pixels CSS, do <iframe>. Essa propriedade espelha o atributo HTML width. 


Image 

um elemento <img> em um documento HTML Node, Element 

Um objeto Image representa uma imagem incorporada em um documento HTML com uma tag 
<img>. As imagens que aparecem em um documento sao coletadas no array document.images[]. 

A propriedade src do objeto Image e a mais interessante. Quando essa propriedade e configurada, o 
navegador carrega e exibe a imagem especificada pelo novo valor. Isso permite efeitos visuais, como 
imagens rebatidas e animates. Consulte a SeQo 21.1 para ver exemplos. 

Voce pode criar objetos Image fora da tela simplesmente criando novos elementos <img> com 
document.createElement() ou com a construtora Image(). Note que essa construtora nao tern um 
argumento para especificar a imagem a ser carregada: para carregar uma imagem, basta configurar 
a propriedade src de seu objeto Image. Para exibir a imagem realmente, insira o objeto Image no 
documento. 
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Construtora 

new Image([unsigned long laiguia, unsigned long altuia ]) 

Voce pode criar um novo objeto Image como criaria qualquer elemento HTML com document. 
createElementQ. Entretanto, por motivos historicos, JavaScript do lado do cliente tambem define a 
construtora Image () para fazer a mesma coisa. Se os argumentos laiguia ou altuia sao especificados, 
eles configuram os atributos width e height da tag <img>. 


Propriedades 

Alem das propriedades listadas aqui, os elementos Image tambem expoem os seguintes atributos 
HTML como propriedades de JavaScript: alt, usemap, ismap. 
readonly boolean complete 

true se nenhum src de imagem foi especificado ou se a imagem foi baixada completamente. 
false, caso contrario. 
unsigned long height 

A altura na tela com que a imagem e exibida, em pixels CSS. Configure isso para mudar a 
altura da imagem. 

readonly unsigned long naturalHeight 
A altura intrinseca da imagem. 
readonly unsigned long naturalWidth 
A largura intrinseca da imagem. 
string src 

O URL da imagem. Configurar essa propriedade faz a imagem especificada ser carregada. Se o 
objeto Image foi inserido no documento, a nova imagem sera exibida. 
unsigned long width 

A largura, em pixels CSS, com que a imagem e realmente exibida na tela. Voce pode configu¬ 
rar isso para mudar o tamanho da imagem na tela. 



ImageData 

um array de dados de pixel de um <canvas> 

Um objeto ImageData contem as componentes vermelho, verde, azul e alfa (transparencia) de uma 
regiao retangular de pixels. Obtem um objeto ImageData com os metodos createlmageDataQ ou 
getlmageDataQ do objeto CanvasRenderingContext2D de uma tag <canvas>. 

As propriedades width e height especificam as dimensoes do retangulo de pixels. A propriedade data 
e um array que contem os dados de pixel. Os pixels aparecem no array data [ ] da esquerda para a 
direita e de cima para baixo. Cada pixel consiste em quatro valores de byte representando os compo¬ 
nentes R, G, B e A, nessa ordem. Assim, os componentes de cor de um pixel em (x,y) dentro de um 
objeto ImageData image podem ser acessados como segue: 

var offset = (x + y*image.width) * 4; 
var red = image.data[offset]; 
var green = image.data[offset+i]; 
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var blue = image.data[offset+ 2 ]; 
var alpha = image.data[offset+3]; 

O array data[] nao e um array verdadeiro de JavaScript, mas um objeto semelhante a um array 
otimizado, cujos elementos sao inteiros entre 0 e 255. Os elementos sao de leitura/grava^ao, mas o 
comprimento do array e fixo. Para qualquer objeto ImageData i, i.data.length sera sempre igual a 
i.width * i.height * 4. 

Propriedades 

readonly byte[] data 

Uma referenda somente de leitura para um objeto semelhante a um array de leitura/grava<;ao 
cujos elementos sao bytes, 
readonly unsigned long height 

O numero de linhas dos dados de imagem. 
readonly unsigned long width 

O numero de pixels por linha de dados. 


Input 

um elemento HTML <input> Node, Element, FormControl 

Um objeto Input representa um elemento <input> de formulario HTML Sua aparencia e compor- 
tamento dependem de seu atributo type: um elemento Input poderia representar um campo de 
entrada de texto simples, uma caixa de sele^ao, uma caixa de op^ao, um botao ou um elemento de 
sele^ao de arquivos, por exemplo. Como um elemento <input> pode representar tantos tipos de con- 
troles de formulario, o elemento Input e um dos mais complicados. Consulte a Se^ao 15.9 para uma 
visao geral dos formularios HTML e elementos de formulario. Note que algumas das propriedades 
importantes do elemento Input (como type, value, name e form) estao documentadas em FormControl. 

Propriedades 

Alem das propriedades listadas aqui, os elementos Input tambem implementam todas as proprie¬ 
dades definidas por Element e FormControl. As propriedades marcadas com um asterisco nesta lista 
foram definidas recentemente por HTML5 e, quando este livro estava sendo escrito, ainda nao eram 
amplamente implementadas. 
string accept 

Quando type e “file”, essa propriedade e uma lista de tipos MIME separados por vfrgulas es- 
pecificando os tipos de arquivos que podem ser selecionados. As strings “audio/*”, “video/*” e 
“image/*” tambem sao validas. Espelha o atributo accept. 

string autocomplete 

E true se o navegador pode preencher previamente esse elemento Input com um valor de uma 
sessao anterior. Espelha o atributo autocomplete. Consulte tambem a propriedade autocomplete 
de Form. 

boolean checked 

Para elementos de entrada que podem ser marcados, essa propriedade especifica se o elemento esta 
“marcado” ou nao. Configurar essa propriedade muda a aparencia visual do elemento de entrada. 
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boolean defaultChecked 

Para elementos de entrada que podem ser marcados, essa propriedade especifica o estado da 
marca^ao inicial do elemento. Quando o formulario e redefinido, a propriedade checked e 
restaurada ao valor dessa propriedade. Espelha o atributo checked. 

string defaultValue 

Para elementos com um valor textual, essa propriedade contem o valor inicial exibido pelo 
elemento. Quando o formulario e redefinido, o elemento e restaurado a esse valor. Espelha o 
atributo value, 
readonly File[] files 

Para elementos cujo valor de type e “file”, essa propriedade e um objeto semelhante a um array 
do objeto (ou objetos) File selecionado pelo usuario. 
string formAction* 

Para elementos botao de envio, essa propriedade especifica um valor que anula a propriedade 
action do formulario conteiner. Espelha o atributo formaction. 

string formEnctype* 

Para elementos botao de envio, essa propriedade especifica um valor que anula a propriedade 
enctype do formulario conteiner. Espelha o atributo formenctype. 

string formMethod* 

Para elementos botao de envio, essa propriedade especifica um valor que anula a propriedade 
method do formulario conteiner. Espelha o atributo formmethod. 

boolean formNoValidate* 

Para elementos botao de envio, essa propriedade especifica um valor que anula a propriedade 
noValidate do formulario conteiner. Espelha o atributo formnovalidate. 
string formTarget* 

Para elementos botao de envio, essa propriedade especifica um valor que anula a propriedade 
target do formulario conteiner. Espelha o atributo formtarget. 
boolean indeterminate 

Para caixas de seleQo, essa propriedade especifica se o elemento esta em um estado indetermi- 
nado (nem marcado, nem nao marcado). Essa propriedade nao espelha um atributo HTML: 
voce so pode configura-la com JavaScript, 
readonly Element list* 

Um elemento <datalist> contendo elementos <option> que um navegador pode usar como 
sugestoes ou valores de preenchimento automatico. 
string max* 

Um valor maximo valido para esse elemento Input, 
long maxLength 

Se type e “text” ou “password”, essa propriedade especifica o numero maximo de caracteres 
que o usuario pode inserir. Note que isso nao e igual a propriedade size. Espelha o atributo 
maxlength. 
string min* 

Um valor maximo valido para esse elemento Input. 
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boolean multiple* 

true se o elemento de entrada deve aceitar mais de um valor do type especificado. Espelha o 
atributo multiple, 
string pattern* 

O texto de uma expressao regular a que a entrada deve corresponder para ser considerada va- 
lida. Essa propriedade usa sintaxe de expressao regular de JavaScript (sem as barras a esquerda 
e a direita), mas note que a propriedade e uma string e nao um objeto RegExp. Note tambem 
que, para ser considerada valida, a string de entrada inteira deve corresponder ao padrao e nao 
apenas uma substring. (E como se o padrao comeqasse com A e terminasse com $.) Essa pro¬ 
priedade espelha o atributo pattern, 
string placeholder 

Uma string de texto curta que vai aparecer dentro do elemento Input como um prompt para o 
usuario. Quando o usuario focalizar o elemento, o texto de espa^o reservado vai desaparecer e 
um cursor para insenjao aparecera. Essa propriedade espelha o atributo placeholder. 

boolean readonly 

Se for true, esse elemento Input nao pode ser editado. Espelha o atributo readonly. 

boolean required* 

Se for true, o formulario container nao sera considerado vaiido se o usuario nao inserir um 
valor nesse elemento Input. Espelha o atributo required, 
readonly Option selectedOption* 

Se a propriedade list estiver definida e multiple for false, essa propriedade retorna o filho do 
elemento Option selecionado de list, caso haja um. 

unsigned long selectionEnd 

Retorna ou configura o indice do primeiro caractere de entrada apos o texto selecionado. Con- 
suite tambem setSelectionRangeQ. 
unsigned long selectionStart 

Retorna ou configura o indice do primeiro caractere selecionado no elemento <textarea>. 
Consulte tambem setSelectionRangeQ. 
unsigned long size 

Para elementos Input que permitem entrada de texto, essa propriedade especifica a largura do 
elemento em caracteres. Espelha o atributo size. Compare com maxLength. 
string step* 

Para tipos de entrada numericos (incluindo entrada de data e hora), essa propriedade especifi¬ 
ca a granularidade ou tamanho do passo dos valores de entrada permitidos. Essa propriedade 
pode ser a string “any” ou um numero em ponto flutuante. Espelha o atributo step. 

Date valueAsDate* 

Retorna o value do elemento (consulte FormControl) como um objeto Date. 

double valueAsNumber* 

Retorna o value do elemento (consulte FormControl) como um numero. 
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Metodos 

Alem dos metodos listados aqui, os elementos Input tambem implementam todos os metodos defi- 
nidos por Element e FormControl. Os metodos marcados com um asterisco nessa lista foram deflnidos 
recentemente por HTML5 e, quando este livro estava sendo escrito, ainda nao eram amplamente 
implementados. 

void selectQ 

Esse metodo seleciona todo o texto exibido por esse elemento Input. Na maioria dos navegadores, 
isso signiflca que o texto e real^ado e que o novo texto digitado pelo usuario substitui o texto real^a- 
do, em vez de ser anexado nele. 

void setSelectionRange(unsigned long inicio, unsigned long fim) 

Esse metodo seleciona o texto exibido nesse elemento Input, comefando no caractere na posiQo 
inicio e continuando ate (mas nao incluindo) o caractere em fim. 
void stepDown([long n])* 

Para elementos que suportam a propriedade step, diminui o valor atual por n passos. 
void stepUp([long n])* 

Para elementos que suportam a propriedade step, aumenta o valor atual por n passos. 

jQuery jQueryl.4 

a biblioteca jQuery 

Descri^ao 

Esta e uma referenda rapida da biblioteca jQuery. Consulte o Capitulo 19 para ver detalhes comple¬ 
tes sobre a biblioteca e exemplos de seu uso. Esta pagina de referenda esta organizada e formatada de 
forma diferente das outras desta sei;ao de referenda. Ela usa as seguintes convenes nas assinaturas 
de metodo: os argumentos denominados sel sao seletores da jQuery. Os argumentos denominados 
ind sao indices inteiros. Os argumentos denominados elt ou elts sao elementos do documento ou 
objetos semelhantes a um array de elementos do documento. Os argumentos denominados / sao 
fim foes callback e parenteses aninhados sao usados para indicar os argumentos que a jQuery vai 
passar para a funijao fornecida. Colchetes indicam argumentos opcionais. Se um argumento optio¬ 
nal for seguido de um sinal de igualdade e um valor, esse valor sera usado quando o argumento for 
omitido. O valor de retorno de uma funijao ou de um metodo vem apos o parenteses de fechamento 
e dois-pontos. Metodos sem nenhum valor de retorno especificado retornam o objeto jQuery no 
qual sao chamados. 

Fun<;aofabrica da jQuery 

A funfao jQuery e um espafo de nomes para uma variedade de funfoes utilitarias, mas tambem e a 
funfao fabrica para criar objetos jQuery. jQuery () pode ser chamada de todas as maneiras mostradas 
a seguir, mas sempre retorna um objeto jQuery representando um conjunto de elementos do docu¬ 
mento (ou o proprio objeto Document). O simbolo $ e um pseudonimo para jQuery e voce pode 
usar $(), em vez de jOuery(), em cada uma das formas a seguir: 
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jOuery(sel [, contexto=docment]) 

Retorna um novo objeto jQuery representando os elementos do documento que sao descen- 
dentes de contexto e correspondem a string seletora sel. 
jOuery (elts) 

Retorna um novo objeto jQuery representando os elementos especificados. elts pode ser um 
unico elemento do documento ou um array ou objeto semelhante a um array (como um No- 
deList ou outro objeto jQuery) de elementos do documento. 
jOuery(/it/nl J [props]) 

Analisa html como uma string de texto formatado em HTML e retorna um novo objeto 
jQuery contendo um ou mais elementos de nivel superior da string. Se html descreve uma 
unica tag HTML, props pode ser um objeto especificando atributos HTML e rotinas de trata- 
mento de even to para o elemento recentemente criado. 
jQuery(/) 

Registra / como uma fun^ao a ser chamada quando o documento estiver carregado e pronto 
para ser manipulado. Se o documento ja esta pronto, / e chamada imediatamente como um 
metodo do objeto documento. Retorna um objeto jQuery contendo apenas o objeto docu- 

Gramatica de seletor jQuery 

A gramatica de seletor jQuery e muito parecida com a gramatica de seletor CSS3 e esta explicada em 
detalhes na Se^ao 19.8.1. A seguir esta um resumo: 

Seletores de tag, classe e identificagao simples 
* tagname .classname #id 


Combinagdes de seletor 



A B 

Bcomo 

< descendente de A 


A > B 

Bcomo 

ifilho de A 


A + B 

Bcomo 

< um irmao apds A 


A - B 

Bcomo 

> irmao de A 


Filtros de atributo 




[attr] 


tern atributo 


[attr=val] 


tern atributo com valor val 

[attr!=val] 


nao tern atributo com 

valor val 

[attr A =val] 


o atributo comega con 

n val 

[attr$=val] 


o atributo termina co 

m val 

[attr*=val] 


o atributo inclui val 


[attr-=val] 


o atributo inclui val t 

•omo palavra 

[attr|=val] 


o atributo comega con 

n val e um hlfei 

Filtros de tipo de elemento 



:button 

:header 

:password :submit 


:checkbox 

:image 

: radio Text 


Tile 

:input 

:reset 
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Filtros de estado de elemento 


:animated disabled 
:checked :enabled 

:hidden :visible 

Filtros de posigao de selegao 
:eq(n) :first 

:even :gt(n) 

:last :nth(n) 

:lt(n) :odd 

Filtros de posigao de documento 
:first-child 
:last-child 
:only-child 

: nth-child(n) 
:nth-child(even) 

:nth-child(odd) 
:nth-child(xn+y) 

Filtros diversos 


:contains(text) 

:has(selector) 

:not(selector) 


Metodos e propriedades basicos da jQuery 

Estes sao os metodos e propriedades basicos de objetos jQuery. Eles nao alteram a sele^ao ou os 
elementos selecionados de nenhuma maneira, mas permitem consultar e iterar pelo conjunto de 
elementos selecionados. Consulte a Sefao 19.1.2 para ver os detalhes. 
context 

O contexto (ou elemento raiz) sob o qual a sele^ao foi feita. Esse e o segundo argumento de 
$() ou o objeto Document, 
each (f(ind,elt)) 

Chama / uma vez, como metodo de cada elemento selecionado. Para de iterar se a funQo 
retorna false. Retorna o objeto jQuery no qual foi chamada. 
get(ind ):elt 
get():array 

Retorna o elemento selecionado do fndice especificado no objeto jQuery. Voce tambem 
pode usar indexaQo de array com colchetes normal. Sem argumentos, get() e sinonimo de 
toArray(). 
indexQ: int 
index(sel):int 
index(elt):int 

Sem argumentos, retorna o l'ndice do primeiro elemento selecionado dentre seus irmaos. Com 
um argumento seletor, retorna o fndice do primeiro elemento selecionado dentro do conjun¬ 
to de elementos que correspondem ao seletor sel ou -1, caso nao seja encontrado. Com um 
argumento de elemento, retorna o fndice de elt nos elementos selecionados ou -1, caso nao 
seja encontrado. 
is(sel):boolean 

Retorna true se pelo menos um dos elementos selecionados tambem corresponde a sel. 
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length 

O numero de elementos selecionados. 
map(f(ind,elt )): jOuery 

Chama / uma vez como metodo de cada elemento selecionado e retorna um novo objeto 
jQuery contendo os valores retornados, com valores null e undefined omitidos e valores de 
array achatados. 
selector 

A string seletora passada originalmente para $(). 
size():int 

Retorna o valor da propriedade length. 
toArray():array 

Retorna um array verdadeiro dos elementos selecionados. 

Metodos de sele^ao da jQuery 

Os metodos descritos nesta seqao alteram o conjunto de elementos selecionados, filtrando-os, adi- 

cionando novos elementos ou usando os elementos selecionados como pontos de partida para novas 

sele^oes. Na jQuery 1.4 e posteriores, as sele^oes sao sempre classificadas na ordem do documento e 

nao contem duplicatas. Consulte a SeQo 19.8.2. 

add(sel, [ contexto ]) 

add(elts) 

add(html) 

Os argumentos de add () sao passados para $() e a sele^ao resultante e mesclada na sele^ao 
andSelfQ 

Adiciona na seleQo o conjunto de elementos selecionados anteriormente (da pilha). 
children([sel]) 

Seleciona filhos dos elementos selecionados. Sem argumentos, seleciona todos os filhos. Com 
um seletor, seleciona apenas os filhos coincidentes. 
closest(sel, [contexto]) 

Seleciona o ascendente mais proximo de cada elemento selecionado correspondente a sel e 
descendente de contexto. Se contexto e omitido, a propriedade context do objeto jQuery e 
usada. 
contentsQ 

Seleciona todos os filhos de cada elemento selecionado, incluindo nos de texto e comentarios. 

end() 

Retira da pilha interna, restaurando a seleQo ao estado em que estava antes do ultimo metodo 
de alteraQo de seleQo. 
eq (ind) 

Seleciona apenas o elemento selecionado com o l'ndice especificado. Na jQuery 1.4, indices 
negativos contam a partir do fim. 
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filter(sel) 
filter(elts) 
filter (f(ind) :boolean) 

Filtra a selecjao de modo a incluir somente os elementos que correspondam ao seletor sel, que 
estejam inclufdos no objeto semelhante a um array elts ou para os quais a fun^ao predicado f 
retorna true quando chamada como metodo do elemento. 
find(sel) 

Seleciona todos os descendentes de qualquer elemento selecionado que corresponda a sel. 

first () 

Seleciona apenas o primeiro elemento selecionado. 
has(sel) 
has(elt) 

Filtra a sele^ao para incluir apenas os elementos selecionados com um descendente correspon- 
dente a sel ou que sejam ascendentes de elt. 
lastQ 

Seleciona apenas o ultimo elemento selecionado. 
next([sel]) 

Seleciona o proximo irmao de cada elemento selecionado. Se sel e especificado, exclui os que 
nao correspondem. 
nextAll([sel]) 

Seleciona todos os irmaos apos cada elemento selecionado. Se sel e especificado, exclui os que 
nao correspondem. 
nextUntil(sel) 

Seleciona os irmaos apos cada elemento selecionado, ate (mas nao incluindo) o primeiro irmao 
que corresponda a sel. 
not(sel) 
not(elts) 

not (f(ind): boolean) 

E o oposto de filterQ. Filtra a selefao para excluir os elementos que correspondem a sel, que 
estao inclufdos em elts ou para o quais / retorna true, elts pode ser apenas um elemento ou 
um objeto semelhante a um array de elementos. / e chamada como metodo de cada elemento 
selecionado. 
offsetParentQ 

Seleciona o ascendente posicionado mais proximo de cada elemento selecionado. 
parent([sel]) 

Seleciona o pai de cada elemento selecionado. Se sel e especificado, exclui qualquer um que 
nao corresponda. 
parents([sel]) 

Seleciona os ascendentes de cada elemento selecionado. Se sel e especificado, exclui qualquer 
um que nao corresponda. 
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parentsUntil(sel) 

Seleciona os ascendentes de cada elemento selecionado, ate (mas nao incluindo) o primeiro 
que corresponda a sel. 
prev([sel]) 

Seleciona o irmao anterior de cada elemento selecionado. Se sel e especificado, exclui qual- 
quer um que nao corresponda. 
prevAll([sel]) 

Seleciona todos os irmaos antes de cada elemento selecionado. Se sel e especificado, exclui os 
que nao correspondem. 
prevUntil(sel) 

Seleciona os irmaos anteriores a cada elemento selecionado, ate (mas nao incluindo) o primei¬ 
ro irmao que corresponda a sel. 
pushStack (elts) 

Insere o estado atual da sele^ao para que possa ser restaurado com end() e, entao, seleciona os 
elementos do array elts (ou do objeto semelhante a um array), 
siblings([sel]) 

Seleciona os irmaos de cada elemento selecionado, excluindo o proprio elemento. Se sel e 
especificado, exclui os irmaos que nao correspondem. 
slice(indinicial, [indfinal]) 

Filtra a selecjao para incluir somente os elementos com fndice maior ou igual a indinicial e 
menor (mas nao igual) do que indfinal. Indices negativos contam para tras, a partir do fim da 
sele<jao. Se indfinal e omitido, a propriedade length e usada. 

Metodos de elemento da jQuery 

Os metodos descritos aqui consultam e configuram atributos HTML e propriedades de estilo CSS 
dos elementos. As fun^oes callback setter com um argumento chamado atual recebem o valor atual 
daquilo para o que estiverem calculando um novo valor. Consulte a Se^ao 19.2. 
addClass(nomes) 
addClass (f(ind,atual ): names) 

Adiciona o nome (ou nomes) de classe CSS no atributo class de cada elemento selecionado. 
Ou chama / como metodo de cada elemento para calcular o nome (ou nomes) de classe a 
adicionar. 
attr (nome): value 
attr(nome, valor ) 
attr(nome, f (ind,atual):v alue) 
attr (obj) 

Com um argumento de string, retorna o valor do atributo nomeado para o primeiro elemento sele¬ 
cionado. Com dois argumentos, configura o atributo nomeado de todos os elementos selecionados 
com o valor especificado ou chama / como metodo de cada elemento para calcular um valor. Com 
apenas um argumento objeto, usa os nomes de propriedade como nomes de atributo e os valores de 
propriedade como valores de atributo ou como fun (joes de calculo de atributo. 
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css(nome) :value 

css(nome, valor) 

css(nome, f (ind,atual):v alue) 

css(obj) 

E como attr(), mas consulta ou configura atributos de estilo CSS, em vez de atributos HTML. 
data():obj 
data(chave): value 
data (drove, valor) 
data(obj) 

Sem argumentos, retorna o objeto data do primeiro elemento selecionado. Com um argumen- 
to de string, retorna o valor da propriedade nomeada desse objeto data. Com dois argumentos, 
configura a propriedade nomeada do objeto data de todos os elementos selecionados com o 
valor especificado. Com um argumento objeto, substitui o objeto data de todos os elementos 
selecionados. 

hasClass(norae):boolean 

Retorna true se qualquer um dos elementos selecionados inclui nome em seu atributo class, 
height():int 
height (/r) 

height(/(ind, atual) :int) 

Retorna a altura (nao incluindo preenchimento, borda ou margem) do primeiro elemento 
selecionado ou configura a altura de todos os elementos selecionados como h ou com o valor 
calculado pela chamada de / como metodo de cada elemento. 
innerHeightQ :int 

Retorna a altura mais o preenchimento do primeiro elemento selecionado. 
innerWidthQ :int 

Retorna a largura mais o preenchimento do primeiro elemento selecionado. 
offset():coords 
offset (coords) 
offset ( f(ind,atual) :coords) 

Retorna a posi^ao X e Y (em coordenadas do documento) do primeiro elemento selecionado 
ou configura a posi^ao de todos os elementos selecionados como coords ou com o valor cal¬ 
culado pela chamada de / como metodo de cada elemento. As coordenadas sao especificadas 
como objetos com propriedades top e left. 
offsetParentQ: jOuery 

Seleciona o ascendente posicionado mais proximo de cada elemento selecionado e o retorna 
em um novo objeto jQuery. 
outerHeight( [margens=ialse] ) :int 

Retorna a altura mais o preenchimento e a borda. E se margens e true, as margens do primeiro 
elemento selecionado. 
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outerWidth( [margens=-false] ): int 

Retorna a largura mais o preenchimento e a borda. E se margens e true, as margens do primeiro 
elemento selecionado. 
positionQ :coords 

Retorna a posi?ao do primeiro elemento selecionado em rela?ao ao ascendente posicionado 
mais proximo. O valor de retorno e um objeto com propriedades top e left. 
removeAttr(nome) 

Remove o atributo nomeado de todos os elementos selecionados. 
removeClass (nomes) 
removeClass (f(ind,atual ) :names) 

Remove o nome (ou nomes) especificado do atributo class de todos os elementos seleciona¬ 
dos. Se e passada uma fun^ao, em vez de uma string, a chama como metodo de cada elemento 
para calcular o nome (ou nomes) a ser removido. 
removeData([c/jave]) 

Remove a propriedade nomeada do objeto data de cada elemento selecionado. Se nao for espe¬ 
cificado nenhum nome de propriedade, remove o proprio objeto data inteiro. 
scrollLeft():int 
scrollLeft(int) 

Retorna a posRao da barra de rolagem horizontal do primeiro elemento selecionado ou a con- 
figura para todos os elementos selecionados. 
scrollTop():int 
scrollTop(int) 

Retorna a posRao da barra de rolagem vertical do primeiro elemento selecionado ou a confi- 
gura para todos os elementos selecionados. 
toggleClass(nomes, [ adicionar ]) 
toggleClass (f(ind,atual ): names , [adicionar]) 

Alterna o nome (ou nomes) de classe especificado na propriedade class de cada elemento 
selecionado. Se / for especificada, a chama como metodo de cada elemento selecionado para 
calcular o nome (ou nomes) a ser alternado. Se adicionar for true ou false, adiciona ou remo¬ 
ve os nomes de classe, em vez de alterna-los. 
val():value 
val(voior) 

\/al(f(ind,atual)): value 

Retorna o valor do formulario ou o estado da funqao ou sele^ao do primeiro elemento selecio¬ 
nado ou configura o valor ou estado da sele^ao de todos os elementos selecionados como valor 
ou com o valor calculado pela chamada de / como metodo de cada elemento. 
widthQ :int 
width(w) 

vtidth(f(ind ,atual) : int) 

Retorna a largura (nao incluindo preenchimento, borda ou margem) do primeiro elemento 
selecionado ou configura a largura de todos os elementos selecionados como w ou com o valor 
calculado pela chamada de / como metodo de cada elemento. 
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Metodos de inser^ao e exdusao da jQuery 

Os metodos descritos aqui inserem, excluem e substituem conteudo de documento. Nas assinaturas 
de metodo a seguir, o argumento conteudo pode ser um objeto jQuery, uma string de HTML ou um 
elemento individual do documento, e o argumento alvo pode ser um objeto jQuery, um elemento 
individual do documento ou uma string seletora. Consulte a Se$ao 19.2.5 e a Se$ao 19.3 para ver 
mais detalhes. 
after (conteudo) 
after(/(ind):content) 

Insere conteudo apos cada elemento selecionado ou chama / como metodo de (e insere seu 
valor de retorno apos) cada elemento selecionado. 
append(conteudo) 
append (f(ind,html ):content) 

Anexa conteudo em cada elemento selecionado ou chama/como metodo de (e anexa seu valor 
de retorno em) cada elemento selecionado. 
appendTo(oivo):jQuery 

Anexa os elementos selecionados no fim de cada elemento alvo especificado, clonando-os 
conforme for necessario, se houver mais de um alvo. 
befor e(conteudo) 
before(/(ind):content) 

E como after( ), mas faz as inser^oes antes dos elementos selecionados, em vez de depois deles. 
clone( [dados=false ]):jOuery 

Faz uma copia profunda de cada um dos elementos selecionados e retorna um novo objeto 
jQuery representando os elementos clonados. Se dados e true, clona tambem os dados (in- 
cluindo as rotinas de tratamento de evento) associados aos elementos selecionados. 
detach([sel]) 

E como remove(), mas nao exclui quaisquer dados associados aos elementos desanexados. 
empty() 

Exclui o conteudo de todos os elementos selecionados. 
html():string 
html (textoHtml) 
html(f(ind,atual) :htmlText) 

Sem argumentos, retorna o conteudo do primeiro elemento selecionado como uma string 
formatada em HTML. Com um argumento, configura o conteudo de todos os elementos 
selecionados com o textoHtml especificado ou com o valor retornado pela chamada de / como 
metodo desses elementos. 
insertAfter(olvo):jQuery 

Insere os elementos selecionados apos cada elemento alvo, clonando-os conforme for neces¬ 
sario, caso haja mais de um alvo. 
insertBefore(alvo):jOuery 

Insere os elementos selecionados antes de cada elemento alvo, clonando-os conforme for ne¬ 
cessario, caso haja mais de um alvo. 
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prepend(conteudo) 
piepend(f(ind,html): content) 

E como append (), mas insere o conteudo no im'cio de cada elemento selecionado, em vez de 
no fim. 

prependTo(olvo):jOuery 

E como appendToQ, exceto que os elementos selecionados sao inseridos no infcio dos elemen- 
tos do alvo, em vez de no fim. 
remove([sel]) 

Remove do documento todos os elementos selecionados ou todos os elementos selecionados 
que tambem correspondem a sel, removendo quaisquer dados (incluindo rotinas de trata- 
mento de evento) associados a eles. Note que os elementos removidos nao fazem mais parte do 
documento, mas ainda sao membros do objeto jQuery retornado. 
replaceAll(olvo) 

Insere os elementos selecionados no documento de modo que substituam cada elemento alvo, 
clonando os elementos selecionados conforme for necessario, caso haja mais de um alvo. 
replaceWith (conteudo) 
replaceWith(/(ind,/itml): content) 

Substitui cada elemento selecionado por conteudo ou chama/como metodo de cada elemento 
selecionado, passando o fndice do elemento e o conteudo HTML atual, substituindo entao 
esse elemento pelo valor de retorno. 
text():string 
text (textoPuro) 
text(f(ind,atual) :plainText) 

Sem argumentos, retorna o conteudo do primeiro elemento selecionado como uma string de 
texto puro. Com um argumento, configura o conteudo de todos os elementos selecionados 
com o textoPuro especificado ou com o valor retornado pela chamada de / como metodo 
desses elementos. 
unwrap() 

Remove o pai de cada elemento selecionado, substituindo-o pelo elemento selecionado e seus 
irmaos. 

vizap(wrapper) 
wrap(/(ind):wrapper) 

Empacota wrapper em torno de cada elemento selecionado, clonando conforme for necessario, 
caso haja mais de um elemento selecionado. Se for passada uma fun^ao, a chama como meto¬ 
do de cada elemento selecionado para calcular o wrapper. O wrapper pode ser um elemento, 
um objeto jQuery, um seletor ou uma string de HTML, mas deve ter um unico elemento mais 
interno. 

wrapAll (wrapper) 

Encerra wrapper em torno dos elementos selecionados como um grupo, inserindo wrapper no 
local do primeiro elemento selecionado e depois copiando todos os elementos selecionados no 
elemento mais interno de wrapper. 
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wraplnner(wrapper) 
wraplnner(/(ind):wrapper) 

E como wrap(), mas insere wrapper (ou o valor de retorno de/) em torno do conteudo de cada 
elemento selecionado, em vez de em torno dos proprios elementos. 

Metodos de evento da jQuery 

Os metodos desta se^ao servem para registrar retinas de tratamento de evento e disparar eventos. 
Consulte a Se^ao 19.4. 

tipo-evento{) 
tipo-evento(f (evento)) 

Registra / como retina de tratamento para tipo-evento ou dispara um evento de tipo-evento. A 
jQuery define os seguintes metodos de conveniencia que seguem esse padrao: 


ajaxCompleteQ 

blur() 

focusinQ 

mousedownQ 

mouseupQ 

ajaxError() 

change() 

focusoutQ 

mouseenter() 

resizeQ 

ajaxSendQ 

clickQ 

keydownQ 

mouseleaveQ 

scrollQ 

ajaxStartQ 

dblclickQ 

keypressQ 

mousemoveQ 

selectQ 

ajaxStop() 

error() 

keyup() 

mouseoutQ 

submitQ 

ajaxSuccessQ 

focusQ 

load() 

mouseoverQ 

unloadQ 


bind(tipOj [dados], f(evento)) 
bind (eventos) 

Registra / como retina de tratamento de eventos do tipo especificado em cada um dos elemen¬ 
tos selecionados. Se dados forem especificados, adiciona-os no objeto evento antes de chamar 
/. tipo pode especificar varios tipos de evento e pode incluir namespaces. 

Se um unico objeto e passado, trata dele como um mapeamento de tipos de evento em fun^oes 
de tratamento e registra retinas de tratamento para redos os eventos especificados em cada 
elemento selecionado. 

delegate(sel, tipo, [dados], f(evento)) 

Registra / como uma retina dinamica de tratamento de eventos. / sera disparada quando 
eventos de tipo tipo ocorrerem em um elemento correspondente a sel e borbulharem para 
qualquer um dos elementos selecionados. Se dados forem especificados, serao adicionados no 
objeto evento antes que / seja chamada. 
di e(tipo, [f(evento)]) 

Anula o registro de retinas dinamicas de tratamento de eventos registradas com live() para 
eventos de tipo tipo em elementos que correspondem a string seletora da sele^ao atual. Se for 
especificada uma furnjao de tratamento de evento / em especial, anula apenas o registro dela. 
hover (f (evento)) 

hover (entra(evento), sai(evento)) 

Registra retinas de tratamento para eventos “mouseenter” e “mouseleave” em redos os ele¬ 
mentos selecionados. Se for especificada apenas uma funfao, ela sera usada como retina de 
tratamento para os dois eventos. 
li ve(tipo, [dados], f(evento)) 

Registra / como retina dinamica de tratamento de eventos do tipo tipo. Se dados forem espe¬ 
cificados, adiciona-os no objeto evento antes de chamar /. Esse metodo nao usa o conjunto de 
elementos selecionados, mas sim a string seletora e o objeto contexto do objeto jQuery. / sera 
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disparada quando eventos tipo borbulharem para o objeto contexto (normalmente o docu- 
mento) e o elemento alvo do evento corresponder ao seletor. Consulte delegate(). 
on e(tipo, [dados], f[evento)) 
on e(eventos) 

E como bind(), exceto que as rotinas de tratamento de evento registradas perdem seu registro 
automaticamente apos serem chamadas uma vez. 
ready(/Q) 

Registra / para ser chamada quando o documento estiver pronto ou a chama imediatamente, 
caso o documento ja esteja pronto. Esse metodo nao usa os elementos selecionados e e sino- 
nimo de $ (/). 

toggl e(fl(evento), f2(evento),...) 

Registra uma rotina de tratamento de evento “click” em todos os elementos selecionados que 
alternam entre as fun^oes de tratamento de evento especificadas. 
trigger(tipo, [ paiams ]) 
trigger (evento) 

Dispara um evento tipo em todos os elementos selecionados, passando paiams como para- 
metros extras para as rotinas de tratamento de evento. paiams pode ser omitido, pode ser um 
unico valor ou um array de valores. Se voce passa um objeto evento, sua propriedade type espe- 
cifica o tipo de evento e quaisquer outras propriedades sao copiadas no objeto evento passado 
para as rotinas de tratamento. 
triggerHandler(tipo, [paiams]) 

E como trigger(), mas nao permite que o evento disparado borbulhe ou dispare a a$ao padrao 
do navegador. 

unbind ([tipo],[f (evento)]) 

Sem argumentos, anula o registro de todas as rotinas de tratamento de evento da j Query em 
todos os elementos selecionados. Com um argumento, anula o registro de todas as rotinas de 
tratamento para os eventos tipo em todos os elementos selecionados. Com dois argumentos, 
anula o registro de / como rotina de tratamento para eventos tipo em todos os elementos sele¬ 
cionados. tipo pode nomear varios tipos de evento e incluir namespaces. 
undelegate() 

undelegate(sei, tipo, [f(evento)]) 

Sem argumentos, anula o registro de todas as rotinas dinamicas de tratamento de eventos 
delegadas dos elementos selecionados. Com dois argumentos, anula o registro de rotinas de 
tratamento de evento dinamicas para eventos tipo nos elementos correspondentes a sel que 
sao delegados dos elementos selecionados. Com tres argumentos, anula o registro apenas da 
rotina de tratamento /. 

Metodos de efeitos e anima^ao da jQuery 

Os metodos descritos aqui produzem efeitos visuais e an imagoes personalizadas. A maioria retorna o 
objeto jQuery no qual sao chamados. Consulte a Secjao 19.5. 

Opgoes de animagao 

complete duration easing queue specialEasing step 
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jOuery.fx.off 

Configura essa propriedade como true para desabilitar todos os efeitos e animates. 
animate(props, opcdes) 

Anima as propriedades CSS especificadas pelo objeto props em cada elemento selecionado, 
usando as op?6es especificadas por opcdes. Consulte a Seqao 19.5.2 para ver os detalhes sobre 
os dois objetos. 

animate(props, [duracao], [abrandamento], [/()]) 

Anima as propriedades CSS especificadas por props em cada elemento selecionado, usando a 
funfao duracao e abrandamento (fade) especificada. Ao terminar, chama/ como metodo de cada 
elemento selecionado. 
clearOueue([nome/="fx"]) 

Limpa a fila de efeitos ou a fila nomeada para cada elemento selecionado. 
delay (duracao, [nomef=" fx"]) 

Adiciona um atraso de duracao especificada na fila de efeitos ou na fila nomeada. 
dequeue([nome/="fx"]) 

Remove e chama a proxima funfao da fila de efeitos ou da fila nomeada. Normalmente nao e 
necessario desmontar a fila de efeitos. 
fadeln([durocdo=400],[/()]) 
fade0ut([durocdo=400],[/()]) 

Faz os elementos selecionados aparecerem ou desaparecerem gradualmente, animando sua 
opacidade por duracao ms. Ao terminar, chama /, se especificada, como um metodo de cada 
elemento selecionado. 
fadeTo (duracao, opacidade, [/()]) 

Anima a opacidade CSS dos elementos selecionados com opacidade no decorrer da duracao espe¬ 
cificada. Ao terminar, chama/, se especificada, como um metodo de cada elemento selecionado. 
hideQ 

hide (duracao, [/()]) 

Sem argumentos, oculta imediatamente cada elemento selecionado. Caso contrario, anima o 
tamanho e a opacidade de cada elemento selecionado de modo que fique oculto apos duracao 
ms. Ao terminar, chama /, se especificada, como um metodo de cada elemento selecionado. 
slideDown([durocdo=400],[/()]) 
slideUp([durocoo=400], [/()]) 
slideToggle( [duracao=400 ],[/()]) 

Exibe, oculta ou alterna a visibilidade de cada elemento selecionado, animando sua altura 
pela duracao especificada. Ao terminar, chama /, se especificada, como um metodo de cada 
elemento selecionado. 
show() 

show(duracoo, [/()]) 

Sem argumentos, mostra imediatamente cada elemento selecionado. Caso contrario, anima o 
tamanho e a opacidade de cada elemento selecionado de modo que fiquem totalmente visfveis 
apos duracao ms. Ao terminar, chama /, se especificada, como um metodo de cada elemento 
selecionado. 
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stop( [limpar=-false], [pular=false]) 

Interrompe a animacjao atual (se houver uma em execu^ao) em todos os elementos seleciona- 
dos. Se limpar for true, limpa tambem a fila de efeitos de cada elemento. Se pulai for true, 
pula a anima^ao para seu valor final antes de interrompe-la. 
toggle([exibir]) 
toggl e(duracao, [/()]) 

Se exibii for true, exibe (com show( )) os elementos selecionados imediatamente. Se exibii for 
false, oculta (com hideQ) os elementos selecionados imediatamente. Se exibii for omitido, 
alterna a visibilidade dos elementos. 

Se duiacao for especificada, alterna a visibilidade dos elementos selecionados com uma anima- 
<jao de tamanho e opacidade do comprimento especificado. Ao terminar, chama /, se especifi¬ 
cada, como um metodo de cada elemento selecionado. 
queue([nome/="fx"]):array 
queue([nome/="fx"], /(next)) 
queue([nome/="fx"], novaf) 

Sem argumentos ou apenas com um nome de fila, retorna a fila nomeada do primeiro ele¬ 
mento selecionado. Com um argumento de firnfao, adiciona / na fila nomeada de todos os 
elementos selecionados. Com um argumento de array, substitui a fila nomeada de todos os 
elementos selecionados pelo array de fun^oes novaf. 

Fun^oes Ajax da jQuery 

A maior parte da funcionalidade da jQuery relacionada a Ajax assume a forma de funijoes utilitarias, 
em vez de metodos. Essas sao algumas das fun (joes mais complicadas da biblioteca jQuery. Consul te 
a Seijao 19.6 para ver detalhes completos. 

Codigos de status Ajax 

success error notmodified timeout parsererror 
Tipos de dados Ajax 

text html xml script json jsonp 

EventosAjax 


ajaxStart 
Oppoes Ajax 

ajaxSend 

ajaxSuccess 

ajaxError 

ajaxComplete 

ajaxStop 

async 

context 

global 

processData 

type 


beforeSend 

data 

ifModified 

scriptCharset 

url 


cache 

dataFilter 

jsonp 

success 

username 


complete 

contentType 

dataType 

jsonpCallback 

password 

timeout 

traditional 

xhr 



jOuery.ajax(opcoes):XMLHttpRequest 

Essa e a funtjao Ajax complicada, mas totalmente geral, na qual todos os utilitarios Ajax da 
jQuery sao baseados. Ela espera um unico argumento objeto, cujas propriedades especificam 
todos os detalhes do pedido Ajax e do tratamento da resposta do servidor. As op<joes mais 
comuns estao descritas na Setjao 19.6.3.1 e as op<joes de retorno de chamada estao abordadas 
naSe ? ao 19.6.3.2. 
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jOuery.ajaxSetup (opcdes) 

Essa fiuujao configura valores padrao para op^oes Ajax da jQuery. Passe o mesmo tipo de objeto 
op^oes que voce passaria para jQuery. a jax( ). Os valores especificados serao usados por qualquer 
pedido Ajax subsequente que nao especifique o valor. Essa funcjao nao tem valor de retorno. 
jOuery.getJSON(url, [dados], [f(objeto,status)] ) :XMLHttpRequest 

Solicita o uil especificado de forma assfncrona, adicionando quaisquer dados estipulados. 
Quando a resposta e recebida, a analisa como JSON e passa o objeto resultante para a funqao 
callback /. Retorna o objeto XMLHttpRequest, se houver, usado para o pedido. 
jOuery.getScript (url, [f (texto,status)] ):XMLHttpRequest 

Solicita o url especificado de forma assfncrona. Quando a resposta chega, a executa como um 
script e entao passa o texto da resposta para /. Retorna o objeto XMLHttpRequest, se houver, 
usado para o pedido. Sao permitidos varios domfnios, mas nao passa o texto do script para f e 
nao retorna um objeto XMLHttpRequest. 
jOuery. get(url, [dados], [f (dados,status,xhr)], [tipo]):XMLHttpRequest 

Faz um pedido HTTP GET assfncrono por url, adicionando dados, se houver, na parte do 
parametro de consulta desse URL. Quando a resposta chega, a interpreta como dados do tipo 
especificado ou de acordo com o cabe^alho Content-Type da resposta e a executa ou analisa, se 
necessario. Por fim, passa os dados da resposta (possivelmente analisados) para a funtjao callba¬ 
ck/, junto com o codigo de status jQuery e o objeto XMLHttpRequest usado no pedido. Esse 
objeto XMLHttpRequest, se houver, tambem e o valor de retorno de jOuery.getQ. 
jOuery.post(url, [dados], [f(dados,status,xhr)], [tipo]) :XMLHttpRequest 

E como jQuery.get (), mas faz uma requisiQo HTTP POST, em vez de um pedido GET. 
jOuery. param(o, [antigo=-false] ) : string 

Serializa os nomes e valores das propriedades de o na forma www-form-urlencoded, convenien- 
te para adiijao em um URL ou para passar como corpo de uma requisRao HTTP POST. A 
maioria das fun (joes Ajax da jQuery vai fazer isso automaticamente, se voce passar um objeto 
como o parametro dados. Passe true como segundo argumento se quiser serializaijao rasa no 
estilo da jQuery 1.3. 
jOuery.parselSON(texto):object 

Analisa texto formatado em JSON e retorna o objeto resultante. As fiunjoes Ajax da jQuery 
utilizam essa furujao internamente quando voce solicita dados codificados em JSON. 
load(url, [dados], [f(texto,status,xhr)]) 

Solicita o url de forma assfncrona, adicionando os dados especificados. Quando a resposta 
chega, a interpreta como uma string de HTML e a insere em cada elemento selecionado, subs- 
tituindo qualquer conteudo ja existente. Por fim, chama / como metodo de cada elemento 
selecionado, passando o texto da resposta, o codigo de status jQuery e o objeto XMLHttpRe¬ 
quest usado para o pedido. 

Se url inclui um espaijo, qualquer texto apos o espaijo e usado como seletor e somente as partes do 
documento de resposta que correspondem a esse seletor sao inseridas nos elementos selecionados. 

Ao contrario da maioria dos utilitarios Ajax da jQuery, load() e um metodo e nao uma fun- 
<jao. Assim como a maioria dos metodos da jQuery, ele retorna o objeto jQuery no qual foi 
chamado. 
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serializeQ: string 

Serializa os nomes e valores dos formularios e elementos de formulario selecionados, retornan- 
do uma string no formato www-form-urlencoded. 

Fun^oes utilitarias da jQuery 

Estas sao fun (joes e propriedades (nao metodos) diversas da jQuery. Consulte a Seijao 19.7 para 
obter mais detalhes. 
jOuery.boxModel 

Um sinonimo desaprovado para jQuery. support. boxModel. 
jOuery.browser 

Essa propriedade se refere a um objeto que identifica o fornecedor e a versao do navegador. O 
objeto tem a propriedade msie para Internet Explorer, mozilla para Firefox, webkit para Safari 
e Chrome e opera para Opera. A propriedade version e o numero de versao do navegador. 
jOuery.contains(a,b):boolean 

Retorna true se o elemento do documento a contem o elemento b. 
jOuery.data(elt):data 
jOuery.data(elt, chave): value 
jOuery.data(elt, dados) 
jOuery.data(elt, chave, valor ) 

Uma versao de baixo nivel do metodo data(). Com um argumento de elemento, retorna o 
objeto data desse elemento. Com um elemento e uma string, retorna o valor nomeado do 
objeto data desse elemento. Com um elemento e um objeto, configura o objeto data do ele¬ 
mento. Com um elemento, uma string e um valor, configura o valor nomeado no objeto data 
do elemento. 

jOuery.dequeue (elt, [nomef=" fx"]) 

Remove e chama a primeira funijao na fila nomeada do elemento especificado. O mesmo que 
$(elt).dequeue(qname). 
jOuery.each(o, f (nome,valor)):o 
jOuery.each(o, f(indice,valor)): a 

Chama / uma vez para cada propriedade de o, passando o nome e o valor da propriedade e 
chamando / como metodo do valor. Se o primeiro argumento e um array ou um objeto seme- 
lhante a um array, chama / como um metodo de cada elemento do array, passando o indice do 
array e o valor do elemento como argumentos. A iteracjao para se f retorna false. Essa funcjao 
retorna seu primeiro argumento. 
jOuery.error (msg) 

Lantja uma excecjao contendo msg. Voce pode chamar essa funcjao a partir de plug-ins ou anula- 
-la (por exemplo, jQuery.error = alert) ao depurar. 
jOuery.extend(obj):object 

jOuery.extend([pro/undidode=false], alvo, obj... ):object 

Com um argumento, copia as propriedades de obj no namespace global jQuery. Com dois 
ou mais argumentos, copia as propriedades do segundo e dos objetos subsequentes, em 
ordem, no objeto alvo. Se o argumento opcional profundidade for true, e feita uma copia 
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profunda e as propriedades sao copiadas recursivamente. O valor de retorno e o objeto que 
foi estendido. 

jOuery.globalEval(codigo):void 

Executa o codigo JavaScript especificado como se fosse um <script> de m'vel superior. Nao tem 
valor de retorno. 

jOuery.grep(a, f(elt,ind) :boolean, [invert=false]):array 

Retorna um novo array contendo apenas os elementos de a para os quais / retorna true. Ou 
entao, se invert for true, retorna somente os elementos para os quais / retorna false. 
jOuery.inArray(v, o):integer 

Pesquisa o array ou objeto semelhante a um array a em busca de um elemento v e retorna o 
fndice no qual ele foi encontrado ou -1. 
jOuery.isArray(x):boolean 

Retorna true somente sere um array verdadeiro de JavaScript. 
jOuery.isEmptyObject(x):boolean 

Retorna true somente se x nao tem propriedades enumeraveis. 
jOuery.isFunction(x):boolean 

Retorna true somente se x e uma fun9k) de JavaScript. 
jOuery.isPlainObject(x):boolean 

Retorna true somente se x e um objeto JavaScript puro, como um criado por um objeto literal. 
jOuery. isXMLDoc(x) :true 

Retorna true somente se x e um documento XML ou um elemento de um documento XML. 
jOuery.makeArray(a):array 

Retorna um novo array de JavaScript contendo os mesmos elementos do objeto semelhante a 
um array a. 

jOuery.map(a, f(elt, ind)): array 

Retorna um novo array contendo os valores retornados por f quando chamada para cada ele¬ 
mento do array (ou objeto semelhante a um array) 0. Valores de retorno null sao ignorados e 
os arrays retornados sao achatados. 
jOuery.merge^b): array 

Anexa os elementos do array bemae retorna 0. Os argumentos podem ser objetos semelhantes 
a um array ou arrays verdadeiros. 
jOuery. noConflict ( [radicals alse ]) 

Restaura o simbolo $ ao seu valor antes que a biblioteca j Query fosse carregada e retorna 
jOuery. Se radical for true, restaura tambem o valor do simbolo jOuery. 
jOuery.proxy(/, 0 ) function 
jOuery.proxy (0, nome): function 

Retorna uma funQo que chama/como metodo de o ou uma funijao que chama o[nome] como 
metodo de 0. 

jOuery.queue(elt, [nomef=" fx"], [/]) 

Consulta ou configura a fila nomeada de elt ou adiciona uma nova fun^ao f nessa fila. O 
mesmo que $(elt) .queue(qname, f). 
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jOuery.removeData(elt, [nome ]): void 

Remove a propriedade nomeada do objeto dados de elt ou remove o proprio objeto dados. 
jOuery.support 

Um objeto contendo varias propriedades descrevendo os recursos e erros do navegador atual. 
Amaior parte so interesa aos escritores de plug-ins. jOuery.support.boxModel e false nos nave- 
gadores IE executando no modo Quirks. 
jOuery.trim(s): string 

Retorna uma copia da string s, com espa^o em branco a esquerda e a direita eliminados. 

KeyEvent 

consulte Event 

Label 

um <label> para um controle de formulario Node, Element 

Um objeto Label representa um elemento <label> em um formulario HTML. 

Propriedades 

readonly Element control 

O FormControl a que esse Label esta associado. Se htmlFor for especificado, essa propriedade e o 
controle especificado por essa propriedade. Caso contrario, essa propriedade e o primeiro filho 
LormControl do <label>. 
readonly Form form 

Essa propriedade e uma referenda ao elemento Lorm que contem esse rotulo. Ou entao, se o 
atributo HTML form estiver configurado, o elemento Lorm identificado por essa identificaQo. 

string htmlFor 

Essa propriedade espelha o atributo HTML for. Como for e uma palavra reservada em Java¬ 
Script, o nome dessa propriedade e prefixado com “html” para criar um identificador valido. 
Se for configurada, essa propriedade deve especificar a identifica^ao do FormControl a que esse 
rotulo esta associado. (Contudo, normalmente e mais simples apenas fazer esse LormControl 
ser descendente desse Label.) 


Link 

um hiperlink HTML Node, Element 

Os links HTML sao criados com elementos <a>, <area> e <link>. Tags <a> sao usadas no corpo de 
um documento para criar hiperlinks. Tags <area> raramente sao usadas para criar “mapas de ima- 
gem”. Tags <link> sao usadas no elemento <head> de um documento para fazer referenda a recursos 
externos, como folhas de estilo e icones. Os elementos <a> e <area> tern a mesma representaQo em 
JavaScript. Os elementos <link> tern uma represen ta^ao JavaScript um tanto diferente, mas por 
conveniencia esses dois tipos de links sao documentados juntos nesta pagina. 
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Quando um objeto Link que representa um elemento <a> e usado como string, ele retorna o valor 
de sua propriedade href. 

Propriedades 

Alem das propriedades listadas aqui, um objeto Link tambem tem propriedades que refletem os 
atributos HTML subjacentes: hreflang, media, ping, rel, sizes, target e type. Note que as proprie¬ 
dades de decomposi^ao de URL (como host e pathname) que retornam partes do href do link sao 
definidas apenas para elementos <a> e <area> e nao para elementos <link>, e que as propriedades she¬ 
et, disabled e relList sao definidas apenas para elementos <link> que se referem a folhas de estilo. 
boolean disabled 

Para elementos <link> que se referem a folhas de estilo, essa propriedade controla se a folha de 
estilo e aplicada no documento ou nao. 

string hash 

Especifica o identificador de fragmento de href, incluindo o sinal numerico (#) a esquerda - 
por exemplo, “#results”. 

string host 

Especifica as partes do nome de host e porta de href - por exemplo, “ http://www.oreilly. 
com:1234”. 

string hostname 

Especifica a parte do nome de host de href - por exemplo, “ http://www.oreilly.com”. 

string href 

Especifica o atributo href do link. Quando um elemento <a> ou <area> e usado como string, e 
o valor dessa propriedade que e retornado. 

string pathname 

Especifica a parte do caminho de href - por exemplo, “/catalog/search.html”. 

string port 

Especifica a parte da porta de href - por exemplo, “1234”. 

string protocol 

Especifica a parte do protocolo de href, incluindo os dois-pontos a direita - por exemplo, 
“http:”. 

readonly DOMTokenList relList 

Assim como a propriedade classList de Element, essa propriedade torna facil consultar, con- 
figurar e excluir simbolos do atributo HTML rel de elementos <link>. 

string search 

Especifica a parte da consulta de href, incluindo o ponto de interroga?ao a esquerda - por 
exemplo, “?q=JavaScript&m=10”. 
readonly CSSStyleSheet sheet 

Para elementos <link> que referenciam folhas de estilo, essa propriedade representa a folha de 
estilo vinculada. 

string text 

O conteudo de texto puro de um elemento <a> ou <area>. Sinonimo de Node.textContent. 
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string title 

Todos os elementos HTML permitem um atributo title e ele normalmente especifica texto 
de dica de ferramenta para esse elemento. Configurar esse atributo ou propriedade em um 
elemento <link> que tem rel configurado como “alternate stylesheet” fornece um nome por 
meio do qual o usuario pode habilitar ou desabiliar a folha de estilo e, se o navegador suportar 
folhas de estilo alternativas, o titulo especificado pode aparecer dentro da interface do usuario 
do navegador de algum modo. 

Location 

representa e controla o local do navegador 

A propriedade location dos objetos Window e Document se refere a um objeto Location que re¬ 
presenta os endere^os Web (o “local”) do documento atual. A propriedade href content o URL 
completo desse documento e cada uma das outras propriedades do objeto Location descreve uma 
parte desse URL. Essas propriedades sao muito parecidas com as propriedades URL do objeto Link. 
Quando um objeto Location e usado como string, e retornado o valor da propriedade href. Isso 
significa que voce pode usar a expressao location no lugar de location. href. 

Alem de representar o local do navegador atual, o objeto Location tambem controla esse local. Se 
voce atribui uma string contendo um URL ao objeto Location ou a sua propriedade href, o na¬ 
vegador Web carrega e exibe esse URL. Tambem e possivel fazer o navegador carregar um novo 
documento, configurando outras propriedades de Location para alterar partes do URL atual. Por 
exemplo, se voce configura a propriedade search, o navegador recarrega o URL atual com uma nova 
string de consulta anexada. Se voce configura a propriedade hash, o navegador nao carrega um novo 
documento, mas cria uma nova entrada no historico. E se a propriedade hash identifica um elemento 
do documento, o navegador rola o documento para tornar esse elemento visivel. 

Propriedades 

As propriedades de um objeto Location se referam a varias partes do URL do documento atual. Em 
cada uma das describes de propriedade a seguir, o exemplo dado e uma parte deste URL (ficticio): 

http://www.oreilly.com:1234/catalog/search.html?q=JavaScript&m=10#results 
string hash 

A parte da ancora do URL, incluindo o sinal numerico (#) a esquerda - por exemplo, ‘^re¬ 
sults”. Essa parte do documento URL especifica o nome de uma ancora dentro do docu¬ 
mento. 
string host 

As partes do nome de host e porta do URL - por exemplo, “http://www.oreilly.com: 1234”. 

string hostname 

A parte do nome de host de um URL - por exemplo, “http://www.oreilly.com”. 

string href 

O texto completo do URL do documento, ao contrario de outras propriedades de Location 
que especificam apenas partes do URL. Configurar essa propriedade com um novo URL faz 
o navegador ler e exibir o conteudo do novo URL. Atribui um valor diretamente a um objeto 
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Location configura essa propriedade e usar um objeto Location como string usa o valor dessa 
propriedade. 

string pathname 

A parte do nome de caminho de um URL - por exemplo, “/catalog/search.html”. 

string port 

A parte da porta de um URL - por exemplo, “1234”. Note que essa propriedade e uma string 
e nao um numero. 

string protocol 

A parte do protocolo de um URL, incluindo os dois-pontos a direita - por exemplo, “http:”. 

string search 

A parte da consulta de um URL, incluindo o ponto de interroga^ao a esquerda - por exemplo, 
“?q=JavaScript&m= 10”. 


Metodos 

void assign(string url) 

Carrega e exibe o conteudo do url especificado, como se a propriedade href fosse configurada com 
url. 

void reloadQ 

Recarrega o documento atualmente exibido. 
void replace(string url) 

Carrega e exibe o conteudo do url especificado, substituindo o documento atual no historico de 
navega^ao para que o botao Back do navegador nao o leve de volta ao documento exibido anterior- 
mente. 



MediaElement 

um elemento reprodutor de midia Node, Element 

MediaElement e a superclasse comum dos elementos <audio> e <video>. Esses dois elementos de- 
finem quase exatamente a mesma API que esta descrita aqui, mas consulte Audio e Video para ver 
detalhes especificos para audio e video. E consulte a Se^ao 21.2 para ver uma introdu^ao a esses 
elementos de midia. 

Constantes 

As constantes NETWORK sao os valores possiveis de networkState e as constantes HAVE sao os valores 
possiveis da propriedade readyState. 
unsigned short NETWORK_EMPTY = 0 

O elemento nao come$ou a usar a rede. Esse seria o estado antes de o atributo src ser confi- 
gurado. 

unsigned short NETWORK_IDLE = 1 

O elemento nao esta carregando dados da rede no momento. Ele pode ter carregado o recurso 
completo ou ter colocado no buffer todos os dados de que precisa no momento. Ou entao, 
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pode ter preload configurado como “none” e ainda nao foi solicitado a carregar ou reproduzir 

unsigned short NETWORK LOADING = 2 

O elemento esta usando a rede para carregar dados de mi'dia. 

unsigned short NETW0RK_N0_S0URCE = 3 

O elemento nao esta usando a rede porque nao conseguiu encontrar uma fonte de mfdia que 
pudesse reproduzir. 
unsigned short HAVE_N0THING = 0 

Nao foram carregados dados ou metadados de mfdia. 

unsigned short HAVEJIETADATA = 1 

Os metadados da mfdia foram carregados, mas nao foram carregados dados para a posi^ao de 
reprodu^ao atual. Isso significa que voce pode consultar o elemento duration da mfdia ou as 
dimensoes de um video e pode fazer uma busca configurando currentTime, mas no momento 
o navegador nao pode reproduzir a mfdia que esta em currentTime. 
unsigned short HAVE_CURRENT_DATA = 2 

Os dados da mfdia para currentTime foram carregados, mas nao o suficiente para permitir a 
reprodu?ao da mfdia. Para video, isso normalmente significa que o quadro atual foi carregado, 
mas o seguinte, nao. Esse estado ocorre no fim de uma musica ou filme. 
unsigned short HAVE_FUTURE_DATA = 3 

Foram carregados dados de mfdia suficientes para come^ar a reproduzir, mas provavelmente 
nao o suficiente para reproduzir ate o fim sem pausa para baixar mais dados, 
unsigned short HAVE_ENOUGH_DATA = 4 

Foram carregados dados de mfdia suficientes para que o navegador provavelmente possa repro¬ 
duzir ate o fim, sem pausa. 

Propriedades 

boolean autoplay 

Se for true, o elemento de mfdia vai come^ar a reprodu^ao automaticamente quando tiver 
carregado dados suficientes. Espelha o atributo HTME autoplay, 
readonly TimeRanges buffered 

Os intervalos de tempo dos dados da mfdia que estao no buffer. 

boolean controls 

Se for true, o elemento de mfdia deve exibir um conjunto de controles de reprodu^ao. Espelha 
o atributo HTML controls, 
readonly string currentSrc 

O URL dos dados da mfdia, do atributo src ou de um dos filhos <source> desse elemento, ou 
a string vazia, caso nao sejam especificados dados de mfdia. 

double currentTime 

O tempo de reprodufao atual, em segundos. Configure essa propriedade para fazer o elemento 
de mfdia pular para uma nova posiqao de reprodu^ao. 
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double defaultPlaybackRate 

A velocidade usada para reprodufao normal. O padrao e 1.0. 
readonly double duration 

O comprimento, em segundos, da mfdia. Se a dura^ao for desconhecida (os metadados nao 
foram carregados, por exemplo), essa propriedade sera NaN. Se a mfdia for um fluxo de dura^ao 
indefinida, essa propriedade sera Infinity, 
readonly boolean ended 

Sera true se o fim da mfdia foi atingido. 
readonly MediaError error 

Essa propriedade e configurada quando ocorre um erro; caso contrario, e null. Ela se refere a 
um objeto cuja propriedade code descreve o tipo de erro. 
readonly double initialTime 

A posi?ao de reprodu?ao inicial, em segundos. Normalmente e 0, mas alguns tipos de mfdia 
(como streaming de mfdia) podem ter um ponto de partida diferente. 
boolean loop 

Se for true, o elemento de mfdia deve reiniciar a mfdia automaticamente, sempre que chegar 
ao fim. Essa propriedade espelha o atributo HTML loop, 
boolean muted 

Especifica se o audio esta mudo ou nao. Voce pode configurar essa propriedade para ligar e 
desligar o audio. Para elementos <video>, voce pode usar um atributo audio="muted" para emu- 
dear a mfdia por padrao. 
readonly unsigned short networkState 

Se os dados de mfdia estao sendo carregados ou nao. Os valores validos estao listados na secjao 
Constantes anterior, 
readonly boolean paused 

true se a reprodu^ao esta em pausa no momento. 

double playbackRate 

A velocidade de reproduqao atual. 1,0 e a reproduqao normal. Valores maiores do que 1.0 sao 
avan^o rapido. Valores entre 0 e 1,0 sao movimento lento. Valores menores do que 0 reprodu- 
zem a mfdia para tras. (A mfdia fica sempre muda quando reproduzida para tras e tambem vai 
ficara quando reproduzida de forma especialmente rapida ou lenta.) 
readonly TimeRanges played 

Os intervalos de tempo que foram reproduzidos. 
string preload 

Essa propriedade espelha o atributo HTML de mesmo nome e voce pode usa-la para especi- 
ficar o volume de dados de mfdia que o navegador deve buscar antes que o usuario solicite a 
reprodu^ao dessa mfdia. O valor “none” significa que nenhum dado deve ser carregado pre- 
viamente. O valor “metadados” significa que o navegador deve buscar os metadados da mfdia 
(como a dura?ao), mas nao os dados reais em si. O valor “auto” (ou apenas a string vazia, caso 
o atributo preload seja especificado sem nenhum valor) significa que o navegador pode baixar 
o recurso de mfdia inteiro, na hipotese de o usuario decidir reproduzi-la. 
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readonly unsigned short readyState 

A disponibilidade para reproduzir a mfdia, com base no volume de dados que estao no buffer. 
Os valores validos sao as constantes HAVE_ deflnidas anteriormente. 
readonly TimeRanges seekable 

O intervalo (ou intervalos) de tempos com que currentTime pode ser configurado. Ao se repro¬ 
duzir arquivos de mfdia simples, normalmente esse e qualquer tempo entre 0 e duration. Mas 
para streaming de mfdia, os tempos no passado nao podem mais ser colocados no buffer e os 
tempos no futuro podem ainda nao estar disponfveis. 
readonly boolean seeking 

Essa propriedade e true enquanto o elemento de mfdia esta trocando para uma nova posi^ao 
de reprodu?ao currentTime. Se uma nova posi^ao de reprodu?ao ja estiver no buffer, essa pro¬ 
priedade so vai ser true por um tempo breve. Mas se o elemento de mfdia precisar baixar novos 
dados de mfdia, seeking vai permanecer true por um tempo mais longo. 
string src 

Essa propriedade espelha o atributo HTML src do elemento de mfdia. Voce pode configurar 
essa propriedade para fazer o elemento de mfdia carregar novos dados de mfdia. Note que essa 
propriedade nao e o mesmo que currentSrc. 
readonly Date startOffsetTime 

A data e hora do mundo real da posi^ao de reprodu^ao 0, caso os metadados da mfdia incluam 
essa informa^ao. (Um arquivo de video poderia incluir a hora em que foi gravado, por exem- 
plo.) 

double volume 

Essa propriedade consulta e configura o volume da reprodu?ao de audio. Deve ser um valor 
entre 0 e 1. Consulte tambem a propriedade muted. 

Rotinas de tratamento de evento 

As tags <audio> e <video> definem as seguintes rotinas de tratamento de evento, as quais podem ser 
configuradas como atributos HTML ou como propriedades de JavaScript. Quando este livro estava 
sendo escrito, alguns navegadores nao suportavam essas propriedades e exigiam que voce registrasse 
suas rotinas de tratamento de evento usando addEventListenerQ (consulte EventTarget). Os eventos 
de mfdia nao borbulham e nao tern qualquer aQo padrao para cancelar. O objeto evento associado 
e um Event normal. 


Rotina de tratamento de evento 


onabort 


oncanplay 

oncanplaythrough 

ondurationchange 

onemptied 


Chamada quando... 

0 elemento parou de carregar dados, normalmente a pedido do usuario. error.code e 
error.MEDIA_ERR_ABORTED. 

Dados de mfdia suficientes foram carregados para que a reprodugao possa come^ar, mas e 
provavel que seja necessario colocar mais dados no buffer. 

Dados de mfdia suficientes foram carregados para que mfdia provavelmente possa ser 
reproduzida ate o fim, sem pausa para colocar mais dados no buffer. 

A propriedade duration mudou. 

Um erroou cancelamentofez networkState retornara NETW0RK_EMPTY. 
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Rotina de tratamento de evento 

Chamada quando... 

onended 

A reprodu^ao parou porque o fim da midia foi atingido. 

onerror 

Um erro de rede ou outro impediu o carregamento dos dados da midia. error. code e um 
valor diferentedeMEDIA_ERR_ABORTED(consulteMediaError). 

onloadeddata 

Os dados da posi$ao de reproduqio atual foram carregados pela primeira vez. 

onloadedmetadata 

Os metadados de midia foram carregados e a dura^ao e as dimensoes da midia estao prontos. 

onloadstart 

0 elemento corner a solicitar dados de midia. 

onpause 

0 metodo pause () foi chamado e a reproduqio esta em pausa. 

onplay 

0 metodo play () foi chamado ou o atributo autoplay causou o equivalente. 

onplaying 

A midia comegou a ser reproduzida. 

onprogress 

A atividade da rede continua a carregar dados de midia. Normalmente disparado entre 2 e 

8 vezes por segundo. Note que o objeto associado a esse evento e um objeto Event simples 
e nao o objeto Progress Event usado por outras APIs que disparam eventos chamados 
"progress". 

onratechange 

playbackRateoudefaultPlaybackRatefoialterado. 

onseeked 

A propriedade seeking voltou a ser false. 

onseeking 

0 script ou o usuario pediu para que a reprodugao pulasse para uma parte da midia que 
nao esta no buffer e a reprodujao foi interrompida enquanto dados sao carregados. A 
propriedade seeking e true. 

onstalled 

0 elemento esta tentando carregar dados, mas nenhum dado esta chegando. 

onsuspend 

0 elemento colocou dados suficientes no buffer e interrompeu o download temporariamente. 

ontimeupdate 

A propriedade currentTime mudou. Durante a reproduqio normal, esse evento e 
disparado entre 4 e 60 vezes por segundo. 

onvolumechange 

A propriedade volume ou muted mudou. 

onwaiting 

A reprodu^ao nao pode cornepr ou parou porque nao ha dados suficientes no buffer. Um 
evento playing vai se seguir quando dados suficientes estiverem prontos. 



Metodos 

string canPlayType(string tipo) 

Esse metodo pergunta ao elemento de mfdia se pode reproduzir mi'dia do tipo MIME especiflcado. 
Se o reprodutor tiver certeza de que nao pode reproduzir o tipo, ele retorna a string vazia. Se achar 
(mas nao tiver certeza) que pode reproduzir o tipo, ele retorna a string “probably”. Os elementos de 
mfdia geralmente nao vao retornar “probably”, a nao ser que tipo inclua um parametro codecs= que 
liste os codecs de mfdia especfficos. Se o elemento de mfdia nao tiver certeza de que podera reprodu¬ 
zir mfdia do tipo especiflcado, esse metodo vai retornar “maybe”, 
void load() 

Esse metodo redefine o elemento de mfdia e o faz selecionar uma fonte de mfdia e come^ar a car- 
regar seus dados. Isso acontece automaticamente quando o elemento e inserido pela primeira vez 
no documento ou quando voce configura o atributo src. Contudo, se voce adicionar, remover ou 
modificar os descendentes <source> do elemento de mfdia, deve chamar load() explicitamente. 
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void pauseQ 

Faz uma pausa na reprodu^ao da mi'dia. 
void play() 

Inicia a reprodu^o da mfdia. 


MediaError 

um erro de <audio> ou <video> 

Quando ocorre um erro em uma tag <audio> ou <video>, um evento error e disparado e a proprie- 
dade error e configurada com um objeto MediaError. A propriedade code especifica o tipo de erro 
ocorrido. As constantes a seguir definem os valores dessa propriedade. 

Constantes 

unsigned short MEDIA_ERR_ABORTED = 1 

O usuario pediu para o navegador parar de carregar a mfdia. 
unsigned short MEDIA_ERR_NETWORK = 2 

A mfdia e do tipo correto, mas um erro de rede impediu seu carregamento. 
unsigned short MEDIA_ERR_DECODE = 3 

A mfdia e do tipo correto, mas um erro de codifica^ao impediu que ela fosse decodificada e 
reproduzida. 

unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4 

A mfdia especificada pelo atributo src nao e um tipo que o navegador pode reproduzir. 

Propriedades 

readonly unsigned short code 

Essa propriedade descreve o tipo de erro de mfdia ocorrido. Seu valor sera uma das constantes 
anteriores. 

MessageChannel 

um par de MessagePorts conectados 

MessageChannel e simplesmente um par de objetos MessagePort conectados. Chamar postMessageQ 
em um deles dispara um evento message no outro. Se quiser estabelecer um canal de comunica^ao 
privativo com um Window ou thread Worker, crie um MessageChannel e entao passe um membro do 
par MessagePort para o Window ou Worker (usando o argumento poitas de postMessageQ). 

Os tipos MessageChannel e MessagePort sao um recurso avanfado de HTML5 e, quando este 
livro estava sendo escrito, alguns navegadores suportavam troca de mensagens entre origens 
(Se?ao 22.3) e threads worker (Se?ao 22.4) sem suportar canais de comunica?ao privativos com 
MessagePort. 
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Construtora 

new MessageChannelQ 

Essa construtora sem argumentos retorna um novo objeto MessageChannel. 

Propriedades 

readonly MessagePort portl 
readonly MessagePort port2 

Essas sao as duas portas conectadas que definem o canal de comunica^ao. As duas sao simetri- 
cas: mantenha uma para seu codigo e passe a outra para o Window ou Worker com que deseja 
se comunicar. 


MessageEvent 


uma mensagem de outro contexto de execugao Event 

Varias APIs usam eventos message para comunica^ao assfncrona entre contextos de exeonjao nao 
relacionados. Os objetos Window, Worker, WebSocket, EventSource e MessagePort definem todos pro¬ 
priedades onmessage para tratar de eventos message. A mensagem associada a um evento message e 
qualquer valor de JavaScript que possa ser clonado, conforme descrito em “Clones estruturados”, 
na pagina 672. A mensagem e empacotada em um objeto MessageEvent e esta disponivel na pro- 
priedade data. As varias APIs que contam com eventos message tambem definem mais algumas 
propriedades no objeto MessageEvent. Os eventos message nao borbulham e nao tern qualquer a<jao 
padrao para cancelar. 



Propriedades 

readonly any data 

Essa propriedade contem a mensagem que esta sendo enviada. data pode ser de qualquer tipo 
que possa ser clonado com o algoritmo de clone estruturado (“Clones estruturados”, na pagina 
672) - isso inclui valores do nucleo de JavaScript, inclusive objetos e arrays, mas nao fun^oes. 
Valores do lado do cliente, como nos Document e Element, nao sao permitidos, embora Blobs 
e ArrayBuffers sejam. 
readonly string lastEventld 

Para eventos message em um EventSource (Secjao 18.3), esse campo contem a string 
lastEventld, se houver, enviada pelo servidor. 
readonly string origin 

Para eventos message em um EventSource (Se^ao 18.3) ou em um Window (Se^ao 22.3), essa 
propriedade contem o URL de origem do remetente da mensagem. 
readonly MessagePort[] ports 

Para eventos message em um Window (Se^ao 22.3), Worker (Se^ao 22.4) ou MessagePort, 
essa propriedade contem um array de objetos MessagePort, se algum foi passado na chamada 
correspondente de postMessageQ. 
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readonly Window source 

Para eventos message em um Window (Se^ao 22.3), essa propriedade se refere ao objeto Win¬ 
dow a partir do qual a mensagem foi enviada. 

MessagePort 

passa mensagens assincronas EventTarget 

MessagePort e usado para passagem de mensagem assincrona, baseada em eventos, normalmente 
entre contextos de execu^ao JavaScript, como janelas ou threads worker. Os MessagePorts devem ser 
usados em pares conectados - consulte MessageChannel. Chamar postMessageQ em um MessagePort 
dispara um evento message no MessagePort com o qual esta conectado. A API de troca de men¬ 
sagens entre origens (Se^ao 22.3) e os Web Workers (Se^ao 22.4) tambem se comunicam usando 
um metodo postMessageQ e eventos message. Na verdade, essas APIs usam um objeto MessagePort 
impb'cito. O uso explicito de MessageChannel e MessagePort permite a cria^ao de canais de comu- 
nica^ao privativos adicionais e pode ser usado, por exemplo, para permitir comunica?ao direta entre 
dois threads Worker irmaos. 

MessageChannel e MessagePort types sao um recurso avan^ado de HTML5 e, quando este livro 
estava sendo escrito, alguns navegadores suportavam troca de mensagens entre origens (Se<jao 22.3) 
e threads worker (Se^ao 22.4) sem suportar canais de comunica^ao privativos com MessagePort. 

Metodos 

void closeQ 

Esse metodo desconecta esse MessagePort da porta em que estava conectado (se houver). As chama- 
das subsequentes para postMessageQ nao terao efeito algum e nenhum evento message sera enviado 
no future. 

void postMessage(any mensagem, [MessagePort[] portas ]) 

Envia um clone da mensagem especificada por meio da porta e o entrega na forma de um evento 
message na porta em que ele esta conectado. Se portas for especificado, as entrega tambem como 
parte do evento message, mensagem pode ser qualquer valor compativel com o algoritmo de clone 
estruturado (“Clones estruturados”, na pagina 672). 

void startQ 

Esse metodo faz MessagePort come^ar a disparar eventos message. Antes que esse metodo seja cha- 
mado, quaisquer dados enviados pela porta sao colocados em um buffer. Atrasar mensagens dessa 
maneira permite que um script registre todas as suas retinas de tratamento de evento antes que 
quaisquer mensagens sejam enviadas. Note, entretanto, que voce so precisa chamar esse metodo se 
usar o metodo addEventListenerQ de EventTarget. Se voce simplesmente configurar a propriedade 
onmessage, startQ sera chamado implicitamente. 

Rotinas de tratamento de evento 

onmessage 

Essa propriedade define uma retina de tratamento para eventos message. Os eventos mes¬ 
sage sao disparados no objeto MessagePort. Eles nao borbulham e nao tem qualquer a?ao 
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padrao. Note que configurar essa propriedade chama o metodo start() para comeqar o 
envio de eventos message. 


Meter 

um contador ou medidor grafico Node, Element 

Um objeto Meter representa um elemento HTML <meter> que exibe uma representaqao grafica de 
um valor dentro de um intervalo de valores possiveis, onde o intervalo pode, opcionalmente, ser 
anotado para indicar regioes consideradas baixas, otimas e altas. 

Amaioria das propriedades desse objeto simplesmente espelha os atributos HTML de mesmo nome. 
Entretanto, as propriedades de JavaScript sao numeros, enquanto os atributos HTML sao strings. 

<meter> e um elemento de HTML5 que, quando este livro estava sendo escrito, ainda nao era am- 
plamente suportado. 

Propriedades 

readonly Form form 

O elemento Form, se houver um, que e o ascendente desse elemento ou que foi identificado 
com o atributo HTML form, 
double high 

Se for especificada, essa propriedade indica que valores entre high e max devem ser mostrados 
graficamente como “altos”. 

readonly NodeList labels 

Um objeto semelhante a um array de elementos Label associados a esse elemento. 
double low 

Se for especificada, essa propriedade indica que valores entre min e low devem ser mostrados 
graficamente como “baixos”. 
double max 

O valor maximo que pode ser exibido por <meter>. O padrao e 1. 
double min 

O valor minimo que pode ser exibido por <meter>. O padrao e 0. 

double optimum 

Se for especificado, o valor que deve ser considerado como otimo. 

double value 

O valor representado por esse <meter>. 


MouseEvent 


consulte Event 
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Navigator 

informagoes sobre o navegador Web 

O objeto Navigator contem propriedades que descrevem o navegador Web em que seu codigo esta 
sendo executado. Essas propriedades podem ser usadas para se fazer personabza?ao especifica para a 
plataforma. O nome desse objeto e uma referenda ao navegador Netscape Navigator, mas todos os 
navegadores o suportam. Ha uma unica instancia do objeto Navigator, a qual pode ser referenciada 
por meio da propriedade navigator de qualquer objeto Window. 

Historicamente, o objeto Navigator tern sido usado para “farejar clientes”, para executar codigo 
diferente, dependendo do navegador que esteja sendo usado. O Exemplo 14-3 mostra uma maneira 
simples de fazer isso e o texto que acompanha na Seqao 14.4 descreve as armadilhas de contar com 
o objeto Navigator. Uma estrategia melhor para compatibilidade entre navegadores esta descrita na 
Se^ao 13.4.3. 

Propriedades 

readonly string appName 

O nome do navegador. Para navegadores baseados no Netscape, o valor dessa propriedade e 
“Netscape”. No IE, o valor dessa propriedade e “Microsoft Internet Explorer”. Por compatibi¬ 
lidade com codigo ja existente, muitos navegadores retornam informates antigas falsificadas. 

readonly string appVersion 

In formates sobre versao e plataforma do navegador. Por compatibilidade com codigo ja exis¬ 
tente, a maioria dos navegadores retorna valores obsoletos para essa propriedade. 
readonly Geolocation geolocation 

Uma referenda ao objeto Geolocation para esse navegador. Os metodos desse objeto permitem 
a um script solicitar a localiza^ao geografica atual do usuario. 
readonly boolean onLine 

Essa propriedade e false se o navegador nao vai tentar baixar nada da rede. Isso pode acontecer 
porque o navegador tern certeza de que o computador nao esta conectado na rede ou porque o 
usuario configurou o navegador para nao fazer liga^ao em rede. Se o navegador vai tentar fazer 
downloads (porque o computador pode estar online), essa propriedade e true. O navegador 
dispara eventos online e off-line no objeto Window quando o estado dessa propriedade muda. 
readonly string platform 

O sistema operacional e/ou plataforma de hardware na qual o navegador esta sendo executado. 
Embora nao exista um conjunto de valores padrao para essa propriedade, alguns valores tipicos 
sao “Win32”, “MacPPC” e “Linux i586”. 

readonly string userAgent 

O valor utilizado pelo navegador para o cabe^alho user-agent em requisites HTTP. Por 
exemplo: 

Mozilla/5.0 (Xll; U; Linux i686j en-US) 

AppleWebKit/534.16 (KHTML, like Gecko) 

Chrome/10.0.648.45 
Safari/534.16 




Referenda de JavaScript do lado do cliente 959 


Metodos 

void registerContentHandler(string tipoMime, string uil, string titulo) 

Esse metodo solicita o registro no uil especificado como uma rotina de tratamento para exibir 
conteudo do tipoMime especificado. titulo e um titulo de site legivel para seres humanos que o na- 
vegador pode exibir para o usuario. O argumento uil deve conter a string “%s”. Quando essa rotina 
de tratamento de conteudo for usada para manipular uma pagina Web do tipoMime especificado, o 
URL dessa pagina sera codificado e inserido no uil, no lugar de “%s”. Entao, o navegador visitara 
o URL resultante. Esse e um recurso novo de HTML5 e pode nao estar implementado em todos os 
navegadores. 

void registerProtocolHandler(string esquema, string url, string titulo) 

Esse metodo e como registerContentHandlerQ, mas registra um site para usar como rotina de tra¬ 
tamento do protocolo de URL esquema. esquema deve ser uma string como “mailto” ou “sms”, sem 
dois-pontos. Esse e um recurso novo de EITML5 e pode nao estar implementado em todos os na- 

void yieldForStorageUpdatesQ 

Os scripts que usam Document.cookie, Window.localStorage ou Window.sessionStorage (consulte 
Storage e o Capitulo 20) provavelmente nao sao capazes de observar altera^oes de armazenamento 
feitas por scripts em execu^ao concomitante (de mesma origem) em outras janelas. Os navegadores 
podem (embora, quando este livro estava sendo escrito, nem todos pudessem) impedir atualizapoes 
concomitantes com um mecanismo de bloqueio como aquele usado para bancos de dados. Nos 
navegadores que suportam isso, esse metodo libera o bloqueio explicitamente, possivelmente des- 
bloqueando scripts concomitantes em outras janelas. Os valores armazenados, recuperados apos a 
chamada desse metodo, podem ser diferentes dos recuperados antes da chamada. 

Node 

Todos os objetos em uma arvore de documentos (incluindo o proprio objeto Document) imple- 
mentam a interface Node, a qual fornece propriedades e metodos fundamentals para percorrer e 
manipular a arvore. A propriedade parentNode e o array childNodes[] permitem mover para cima 
e para baixo na arvore de documentos. Voce pode enumerar os filhos de determinado no ite- 
rando pelos elementos de childNodes[] ou usando as propriedades firstChild e nextSibling (ou 
as propriedades lastChild e previousSibling, para iterar para tras). Os metodos appendChild(), 
insertBefore(), removeChildQ e replaceChildQ permitem modificar a arvore de documentos alte- 
rando os filhos de um no. 

Todo objeto em uma arvore de documentos implementa a interface Node e uma subinterface mais 
especializada, como Element ou Text. A propriedade nodeType especifica qual subinterface um no 
implementa. Voce pode usar essa propriedade para testar o tipo de um no antes de usar propriedades 
ou metodos da interface mais especializada. Por exemplo: 

var n; // Contem o no com que estamos trabalhando 

if (n.nodeType == l) { // Ou usa a constante Node.ELEMENT_NODE 

var tagname = n.tagNamej // Se o no e um Element, este e o nome da tag 

} 
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Constantes 

unsigned short ELEMENT_NODE = 1 

unsigned short TEXT_N0DE = 3 

unsigned short PROCESSING_INSTRUCTION_NODE = 7 

unsigned short COMMENTNODE = 8 

unsigned short DOCUMENTNODE = 9 

unsigned short DOCUMENT_TYPE_NODE = 10 

unsigned short DOCUMENT_FRAGMENT_NODE = 11 

Essas constantes sao os valores possfveis da propriedade nodeType. Note que essas sao proprie- 
dades estaticas da fun<;ao construtora NodeQ - nao sao propriedades de objetos Node indivi¬ 
duals. Note tambem que elas nao sao definidas no IE8 e anteriores. Por compatibilidade, voce 
pode codificar os valores ou definir suas proprias constantes. 
unsigned short DOCUMENT J>0SITI0N_DISC0NNECTED = 0x01 
unsigned short D0CUMENT_P0SITI0N_PRECEDING = 0x02 
unsigned short D0CUMENTP0SITI0NF0LL0WING = 0x04 
unsigned short D0CUMENTP0SITI0NC0NTAINS = 0x08 
unsigned short D0CUMENTP0SITI0NC0NTAINEDBY = 0x10 

Essas constantes especificam bits que podem ser ativados ou desativados no valor de retorno 
de compareDocumentPosition(). 

Propriedades 

readonly string baseURI 

Essa propriedade especifica o URL de base desse Node em relaqao ao qual os URLs relativos 
sao solucionados. Para todos os nos em documentos HTML, esse e o URL especificado pelo 
elemento <base> do documento ou apenas o Document.URL com o identificador de fragmento 
removido. 

readonly NodeList childNodes 

Essa propriedade e um objeto semelhante a um array que contem os nos filhos do no atual. 
Essa propriedade nunca deve ser null: para nos sem filhos, childNodes e um array com length 
igual a zero. Note que o objeto NodeList e dinamico: quaisquer altera^oes feitas na lista de 
filhos desse elemento sao imediatamente visiveis por meio de NodeList. 

readonly Node firstChild 

O primeiro filho desse no ou null, caso o no nao tenha filhos. 
readonly Node lastChild 

O ultimo filho desse no ou null, caso o no nao tenha filhos. 

readonly Node nextSibling 

O no irmao imediatamente apos esse no array childNodes [] do parentNode ou null, caso esse 
no nao exista. 

readonly string nodeName 

O nome do no. Para nos Element, especifica o nome de tag do elemento, o qual tambem pode 
ser recuperado com a propriedade tagName da interface Element. Para a maioria dos outros 
tipos de nos, o valor e uma string constante que depende do tipo de no. 
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readonly unsigned short nodeType 

O tipo do no - isto e, qual subinterface o no implementa. Os valores validos sao definidos 
pelas constantes listadas anteriormente. Contudo, como essas constantes nao sao suportadas 
pelo Internet Explorer, talvez voce prefira usar valores codificados, em vez das constantes. Em 
documentos HTML, os valores comuns para essa propriedade sao: 1 para nos Element, 3 para 
nos Text, 8 para nos Comment e 9 para o no de nivel superior Document, 
string nodeValue 

O valor de um no. Para nos Text, content o conteudo do texto. 

readonly Document ownerDocument 

O objeto Document ao qual esse no esta associado. Para nos Document, essa propriedade e 
null. Note que os nos tem proprietaries mesmo que nao tenham sido inseridos em um docu- 
mento. 


readonly Node parentNode 

O no pai (ou conteiner) desse no ou null, caso nao haja nenhum pai. Note que os nos Docu¬ 
ment e DocumentFragment nunca tem nos pais. Alem disso, os nos removidos do documento 
ou criados recentemente e ainda nao inseridos na arvore de documentos, tem parentNode igual 
a null. 

readonly Node previousSibling 

O no irmao que precede imediatamente esse no array childNodesf] do parentNode ou null, 
caso esse no nao exista. 



string textContent 

Para nos Text e Comment, essa propriedade e apenas um sinonimo da propriedade data. Para 
nos Element e DocumentFragment, consultar essa propriedade retorna o conteudo de texto con- 
catenado de todos os descendentes do no Text. Configurar essa propriedade em um Element 
ou DocumentFragment substitui todos os descendentes desse elemento ou fragmento por um 
unico no Text novo contendo o valor especificado. 


Metodos 

Node appendChild(Node novoFilho) 

Esse metodo adiciona o no novoFilho no documento, inserindo-o como ultimo filho desse no. Se 
novoFilho ja esta na arvore de documentos, e removido dela e entao reinserido em sua nova posi^ao. 
Se novoFilho e um no DocumentFragment, ele mesmo nao e inserido; em vez disso, todos os seus fi- 
lhos sao anexados, em ordem, no fim do array childNodes [ ] desse no. Note que um no de (ou criado 
por) um documento nao pode ser inserido em outro documento. Isto e, a propriedade ownerDocument 
de novoFilho deve ser igual a propriedade ownerDocument desse no. (Consulte Document.adoptNodeQ.) 
Esse metodo retorna o Node passado a ele. 

Node cloneNode(boolean profundidade) 

O metodo cloneNodeQ faz e retorna uma copia do no em que e chamado. Se for passado o argumen- 
to true, ele tambem clona recursivamente todos os descendentes do no. Caso contrario, clona apenas 
o no e nenhum de seus filhos. O no retornado nao faz parte da arvore de documentos e sua proprie¬ 
dade parentNode e null. Quando um no Element e clonado, todos os seus atributos tambem sao clo- 
nados. Note, entretanto, que as fun (joes ouvintes de evento registradas em um no nao sao clonadas. 
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unsigned short compareDocumentPosition(Node outro) 

Esse metodo compara a posirjao no documento desse no com a posiqao no documento do no outro 
e retorna um numero cujos bits configurados descrevem a relarjao entre os nos. Se os do is nos sao 
iguais, nenhum bit e configurado e esse metodo retorna 0. Caso contrario, um ou mais bits serao 
configurados no valor de retorno. As constantes D0CUMENT_P0SITI0N_ listadas anteriormente fornecem 
nomes simbolicos para cada um dos bits, os quais tern os seguintes significados: 


DOCUMENT POSITION 

Valor 

Significado 

DISCONNECTED 

0x01 

0s dois nos nao estao no mesmo documento; portanto, suas posi$oes nao podem ser 
comparadas. 

PRECEDING 

0x02 

0 no outro aparece antes desse no. 

FOLLOWING 

0x04 

0 no outro vem apos esse no. 

CONTAINS 

0x08 

0 no outro content esse no. Quando esse bit e configurado, o bit PRECEDING sempre e 
configurado tambem. 

C0NTAINED_BY 

0x10 

0 no outro e contido por esse no. Quando esse bit e configurado, o bit FOLLOWING 
sempre e configurado tambem. 


boolean hasChildNodesQ 

Retorna true se esse no tern um ou mais filhos ou false, caso nao tenha nenhum. 

Node insertBefore(Node novoFilho, Node filhoRef) 

Esse metodo insere o no novoFilho na arvore de documentos como filho desse no e entao retorna 
o no inserido. O novo no e posicionado dentro do array childNodes[] desse no, de modo que ele 
venha imediatamente antes do no filhoRef. Se filhoRef e null, novoFilho e inserido no fim de 
childNodes[], exatamente como no metodo appendChildQ. Note que e invalido chamar esse metodo 
com um filhoRef que nao e filho desse no. 

Se novoFilho ja esta na arvore de documentos, e removido dela e entao reinserido em sua nova posi- 
9ao. Se novoFilho e um no DocumentFragment, ele proprio nao e inserido; em vez disso, cada um de 
seus filhos e inserido, em ordem, no local especificado. 

boolean isDefaultNamespace(string namespace) 

Retorna true se o URL do namespace especificado e o mesmo URL do namespace padrao retornado 
por lookupNamespaceURI(null) e false, caso contrario. 

boolean isEqualNode(Node outro ) 

Retorna true se esse no e outro sao identicos, com tipo, nome de tag, atributos e (recursivamente) 
filhos iguais. Retorna false se os dois nos nao sao iguais. 

boolean isSameNode(Node outro) 

Retorna true se esse no e outro sao o mesmo no e false, caso contrario. Voce tambem pode usar 
simplesmente o operador ==. 

string lookupNamespaceURI(string prefixo) 

Esse metodo retorna o URL do espa^o de nomes associado ao prefixo de namespace especificado ou 
null, caso nao exista um. Se prefixo e null, ele retorna o URL do namespace padrao. 
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string lookupPrefix(string namespace) 

Esse metodo retorna o prefixo do namespace associado ao URL de namespace especificado ou null, 
se nao houver nenhum. 

void normalize() 

Esse metodo normaliza os descendentes do no de texto desse no, mesclando os nos adjacentes e 
removendo os nos vazios. Os documentos normalmente nao tern nos de texto vazios ou adjacentes, 
mas isso pode ocorrer quando um script adiciona ou remove nos. 

Node removeChild(Node filhoAntigo) 

Esse metodo remove filhoAntigo do array childNodes [ ] desse no. E um erro chamar esse metodo 
com um no que nao e filho. removeChild() retorna o no filhoAntigo apos remove-lo. filhoAntigo 
continua a ser um no valido e pode ser reinserido no documento posteriormente. 

Node replaceChild(Node novoFilho, Node filhoAntigo) 

Esse metodo substitui filhoAntigo por novoFilho e retorna filhoAntigo. filhoAntigo deve ser filho 
desse no. Se novoFilho ja faz parte do documento, ele primeiramente e removido do documento, 
antes de ser reinserido em sua nova posRao. Se novoFilho e um DocumentFragment, ele mesmo 
nao e inserido; em vez disso, cada um de seus filhos e inserido, em ordem, na posRao anteriormente 
ocupada por filhoAntigo. 


NodeList 

um objeto semelhante a um array somente de leitura de Nodes 

NodeList e um objeto semelhante a um array somente de leitura cujos elementos sao objetos Node 
(normalmente Elements). A propriedade length especifica quantos nos estao na lista e voce pode 
recuperar esses nos dos indices 0 ate length-1. Voce tambem pode passar o indice desejado para o 
metodo item(), em vez de indexar NodeList diretamente. Os elementos de um NodeList sao sempre 
objetos Node validos: os NodeLists nunca contem elementos null. 

Os NodeLists sao usados normalmente - a propriedade childNodes de Node e os valores de retorno 
de Document.getElementsByTagName(), Element.getElementsByTagName() e HTMLDocument.getElements- 
ByNameQ sao todos NodeLists, por exemplo. Entretanto, como NodeList e um objeto semelhante a 
um array, frequentemente nos referimos a esses valores informalmente como arrays, usando palavras 
como “o array childNodes[]”. 

Note que os objetos NodeList normalmente sao dinamicos - nao sao instantaneos estaticos, mas 
refletem imediatamente as mudan^as feitas na arvore de documentos. Por exemplo, se voce tem 
um NodeList representando os filhos de um no especifico e entao exclui um desses filhos, o filho e 
removido de seu NodeList. Cuidado quando iterar pelos elementos de um NodeList: o corpo de seu 
laps pode fazer altera^oes na arvore de documentos (como excluir nos) que podem afetar o conteudo 
do NodeList! 

Propriedades 

readonly unsigned long length 
O numero de nos no NodeList. 
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Metodos 

Node item(unsigned long indice) 

Retorna o Node no indice especificado ou null, caso o fndice esteja fora do limite. 

Option 

um <option> em um elemento Select Node, Element 

O objeto Option descreve uma unica op^ao exibida dentro de um objeto Select. As propriedades 
desse objeto especificam se ele e selecionado por padrao, se esta selecionado no momento, sua po- 
siqao no array options[] de seu objeto Select conteiner, o texto que exibe e o valor que passa para o 
servidor, se estiver selecionado quando o formulario conteiner for enviado. 

Por motivos historicos, o elemento Option define uma construtora que pode ser usada para criar e 
inicializar novos elementos Option. (O metodo Document.createElement() normal tambem pode ser 
usado, evidentemente.) Uma vez criado um novo objeto Option, ele pode ser anexado no conjunto 
options de um objeto Select. Consulte HTMLOptionsCollection para ver os detalhes. 

Construtora 

new Option([string texto, string valor, boolean padraoSelecionado, boolean selecionado ]) 

A construtora Option () cria um elemento <option>. O quarto argumento opcional especifica o 
textContent (consulte Node) do elemento e os valores iniciais das propriedades value, defaultSelected 

Propriedades 

boolean defaultSelected 

Essa propriedade espelha o atributo HTML selected. Ela define o estado inicial da sele^ao da 
op^ao e tambem o valor usado quando o formulario e redefinido. 

boolean disabled 

true se essa op^ao estiver desabilitada. As op^oes sao desabilitadas se elas ou um <optgroup> 
conteiner tem o atributo HTML disabled, 
readonly Form form 

O elemento <form>, se houver, do qual esse elemento Option faz parte, 
readonly long index 

O indice desse elemento Option dentro de seu elemento Select conteiner. (Consulte tambem 
HTMLOptions Collection.) 
string label 

O valor do atributo HTML label, se houver um; caso contrario, o textContent (consulte Node) 
desse elemento Option. 

boolean selected 

true se essa op^ao estiver selecionada no momento ou false, caso contrario. 
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string text 

O textContent (consulte Node) desse elemento Option, com espa^o em branco a esquerda e a 
direita removido e sequencias de dois ou mais espa^os substitufdas por um unico caractere de 
espacjo. 

string value 

O valor do atributo HTML value, se esse elemento Option tiver um; caso contrario, o textContent 
do elemento. 


Output 

um elemento <output> de formulario HTML Node, Element, FormControl 


O objeto Output representa um elemento <output> de formulario HTML. Nos navegadores que os 
suportam, os objetos Output implementam a maioria das propriedades de FormControl. 

Propriedades 

string defaultValue 

Essa propriedade e o valor inicial do textContent (consulte Node) do elemento Output. Quan- 
do o formulario e redefinido, seu value e restaurado nesse valor. Se essa propriedade e configu- 
rada e o elemento Output esta sendo exibido com seu defaultValue anterior, e exibido o novo 
valor padrao. Caso contrario, o valor atualmente exibido nao sera alterado. 
readonly DOMSettableTokenList htmlFor 

O atributo HTML for de um elemento <output> e uma lista das identificanoes dos elementos 
cujos valores contribuiram para o conteudo calculado exibido pelo elemento <output> sepa- 
radas por espa^os. for e uma palavra reservada em JavaScript; portanto, essa propriedade cor- 
respondente de JavaScript e chamada htmlFor. Voce pode obter e configurar essa propriedade 
como se fosse um valor de string normal ou pode usar os metodos de DOMTokenList para con- 
sultar e configurar identificafoes de elemento individuals a partir da lista. 



PageTransitionEvent 

objeto evento para eventos pageshow e pagehide Event 

Os navegadores disparam um evento pageshow apos o evento load, quando um documento e carre- 
gado pela primeira vez; entao, disparam outro evento pageshow sempre que a pagina e restaurada a 
partir da cache de historico na memoria. Um objeto PageTransitionEvent e associado a cada evento 
pageshow e sua propriedade persisted e true se a pagina esta sendo restaurada, em vez de carregada 
ou recarregada. 

Os eventos pagehide tambem tern um objeto PageTransitionEvent associado, mas a propriedade 
persisted e sempre true para eventos pagehide. 

Os eventos pageshow e pagehide sao disparados no objeto Window. Eles nao borbulham e nao tern 
qualquer a^ao padrao para cancelar. 
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Propriedades 

readonly boolean persisted 

Para eventos pageshow, essa propriedade e false se a pagina foi carregada (ou recarregada) a 
partir da rede ou da cache de disco. E true se a pagina que esta sendo mostrada foi restaurada 
da cache na memoria, sem ser recarregada. 

Para eventos pagehide, essa propriedade e sempre true. 

PopStateEvent 

evento de transigao de historico Event 

Os aplicativos Web que gerenciam seu proprio historico (consulte a Se$ao 22.2) utilizam o metodo 
pushStateQ de History para criar uma nova entrada no historico de navega^ao e para associar um 
valor de estado ou objeto a ela. Quando o usuario utiliza os botoes Back ou Forward do navegador 
para navegar entre esses estados salvos, o navegador dispara um evento popstate no objeto Window 
e passa uma copia do estado do aplicativo salvo no objeto PopStateEvent associado. 

Propriedades 

readonly any state 

Essa propriedade contem uma copia do valor de estado ou objeto passado para o metodo His¬ 
tory. pushStateQ ou History.replaceStateQ. state pode ser qualquer valor que possa ser clo- 
nado com o algoritmo de clone estruturado (consulte “Clones estruturados”, na pagina 672). 

Processinglnstruction 

uma instruct) de processamento em um documento XML Node 

Essa interface raramente usada representa uma instru^ao de processamento (ou PI) em um docu¬ 
mento XML. Programadores que trabalham com documentos HTML nunca vao encontrar um no 
Processinglnstruction. 

Propriedades 

string data 

O conteudo da instru^ao de processamento (isto e, o primeiro caractere que nao seja um espa- 
50 apos o alvo, ate, mas nao incluindo, o ?> de fechamento). 
readonly string target 

O alvo da instru^ao de processamento. Esse e o primeiro identificador que vem apos o <? de 
abertura - ele especifica o “processador” ao qual a instru^ao de processamento se destina. 


Progress 

uma barra de progresso Node, Element 

Um objeto Progress representa um elemento HTML <progress> e exibe uma representa^ao grafica 
do progresso em dire^ao a conclusao de algum tipo de tarefa. 
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Quando o volume de trabalho ou tempo exigido para concluir a tarefa nao e conhecido, diz-se que 
o elemento Progress esta em um estado indeterminado. Nesse estado, ele simplesmente exibe algum 
tipo de animaQo “processando” para indicar que algo esta acontecendo. Quando o volume total 
de trabalho (ou tempo ou bytes) e o volume concluido sao conhecidos, o elemento Progress e um 
estado determinado e pode exibir o progresso com algum tipo de elemento grafico de porcentagem 
de conclusao. 

<progress> e um elemento de HTML5 que, quando este livro estava sendo escrito, ainda nao era 
amplamente suportado. 

Propriedades 

readonly Form form 

O elemento Form, se houver um, que e o ascendente desse elemento ou que foi identificado 
com o atributo HTML form, 
readonly NodeList labels 

Um objeto semelhante a um array de elementos Label associado a esse elemento. 
double max 

O volume total de trabalho a ser feito. Ao usar um elemento Progress para exibir progresso 
de upload ou download de um XMLHttpRequest, por exemplo, voce poderia configurar essa 
propriedade com o numero total de bytes a serem transferidos. Essa propriedade espelha o 
atributo max. O valor padrao e 1.0. 
readonly double position 

Se esse e um elemento Progress determinado, essa propriedade e o valor calculado value/max. 
Caso contrario, essa propriedade sera -1. 

double value 

Um valor entre 0 e max indicando o progresso feito. Essa propriedade espelha o atributo value. 
Se o atributo existe, o elemento Progress e determinado. Se nao existe, o elemento Progress 
e indeterminado. Para trocar do modo determinado para indeterminado (por causa de um 
evento em impasse de um MediaElement, por exemplo), voce pode usar o metodo removeAt- 
tribute() de Element. 

ProgressEvent 

progresso de download, upload ou leitura de arquivo Event 

ApplicationCache, FileReader e o objeto (nivel 2) XMLHttpRequest disparam eventos Progress para 
informar aos aplicativos interessados do progresso do processo de transferencia de dados, como um 
download ou upload da rede ou uma leitura de arquivo. Eventos desse tipo sao conhecidos generi- 
camente como eventos Progress, mas apenas um deles realmente se chama “progress”. Outros eventos 
Progress disparados por FileReader e XMLHttpRequest sao loadstart, load, loadend, error e abort. 
XMLHttpRequest tambem dispara um evento Progress timeout. ApplicationCache dispara varios 
eventos, mas somente o que se chama “progress” e um evento Progress do tipo descrito aqui. 

Os eventos Progress sao disparados em uma sequencia que comeqa com um evento loadstart e sem- 
pre termina com um evento loadend. O evento imediatamente antes de loadend sera load, error ou 
abort, dependendo de a opera?ao de transferencia de dados ser bem-sucedida e, se nao for, como 
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falhou. Zero ou mais eventos progress (com o nome de evento “progress”) sao disparados entre o 
evento loadstart initial e os dois eventos finais. (O objeto ApplicationCache dispara uma sequencia 
de eventos diferente, mas o evento progress que dispara como parte de seu processo de atualiza^ao 
da cache e um evento Progress.) 

As rotinas de tratamento de eventos Progress recebem um objeto ProgressEvent especificando quan- 
tos bytes de dados foram transferidos. Esse objeto ProgressEvent nao tern rela^ao com o elemento 
HTML <progress> descrito em Progress, mas o objeto ProgressEvent passado para a rotina de trata¬ 
mento de evento onprogress de um XMLHttpRequest (por exemplo) poderia ser usado para atuali- 
zar o estado de um elemento <progress> a fim de exibir um valor de porcentagem de conclusao do 
download visual para o usuario. 

Propriedades 

readonly boolean lengthComputable 

true se o numero total de bytes a transferir e conhecido e false, caso contrario. Se essa pro- 
priedade e true, a porcentagem da conclusao da transferencia de dados para um ProgressEvent 
e pode ser calculada como: 

var percentComplete = Math.floor(l00*e.loaded/e.total); 
readonly unsigned long loaded 

Quantos bytes foram transferidos ate o momento. 
readonly unsigned long total 

O numero total de bytes a serem transferidos, caso esse valor seja conhecido; caso contrario, 
0. Essa informa^ao pode vir da propriedade size de um Blob ou do cabe^alho Content-Length 
retornado por um servidor Web, por exemplo. 

Screen 

informa$6es sobre a tela 

A propriedade screen de um Window se refere a um objeto Screen. As propriedades desse objeto 
global contem informa^oes sobre o monitor do computador no qual o navegador e exibido. Os 
programas JavaScript podem usar essa informa^ao para otimizar sua saida para os recursos de tela do 
usuario. Por exemplo, um programa pode escolher entre imagens grandes e pequenas com base no 
tamanho da tela. 

Propriedades 

readonly unsigned long availHeight 

Especifica a altura disponivel, em pixels, da tela na qual o navegador Web e exibido. Essa 
altura disponivel nao inclui o espa?o vertical alocado para recursos permanentes da area de 
trabalho, como uma barra ou area na parte inferior da tela, 
readonly unsigned long availWidth 

Especifica a largura disponivel, em pixels, da tela na qual o navegador Web e exibido. Essa 
largura disponivel nao inclui o espa^o horizontal alocado para recursos permanentes da area 
de trabalho. 
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readonly unsigned long colorDepth 
readonly unsigned long pixelDepth 

Essas propriedades sinonimas especificam ambas o niimero de cores da tela, em bits por pixel, 
readonly unsigned long height 

Especifica a altura total, em pixels, da tela na qual o navegador Web e exibido. Consulte tam- 
bem availHeight. 
readonly unsigned long width 

Especifica a largura total, em pixels, da tela na qual o navegador Web e exibido. Consulte 
tambem availWidth. 

Script 

um elemento <script> HTML Node, Element 

Um objeto Script representa um elemento HTML <script>. A maioria de suas propriedades sim- 
plesmente espelha os atributos HTML de mesmo nome, mas text funciona como a propriedade 
textContent herdada de Node. 

Note que um <script> nunca sera executado mais de uma vez. Nao e possfvel alterar a propriedade 
src ou text de um elemento <script> existente para faze-lo executar um novo script. Contudo, voce 
pode configurar essas propriedades em um elemento <script> recentemente criado para executar um 
script. Note, contudo, que uma tag <script> deve ser inserida em um Document para ser executada. 
O script sera executado quando src ou type for configurado ou quando for inserido no documento, 
o que vier por ultimo. 

Propriedades 

boolean async 

true se o elemento <script> tern um atributo async e false, caso contrario. Consulte a Secjao 

13.3.1. 

string charset 

A codifica^ao de caractere do script, especificada pelo URL src. Essa propriedade normal- 
mente nao e especificada e o padrao e interpretar o script usando a mesma codifica?ao do 
documento conteiner. 

boolean defer 

true se o elemento <script> tem um atributo defer e false, caso contrario. Consulte a Seq:ao 

13.3.1. 
string src 

O URL do script a ser carregado. 

string text 

O texto que aparece entre a tag <script> e a tag de fechamento </script>. 
string type 

O tipo MIME da linguagem de script. O padrao e “text/javascript” e nao e preciso configurar 
essa propriedade (ou o atributo HTML) para scripts normais em JavaScript. Se voce confi- 
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gurar essa propriedade com um tipo MIME personalizado, pode incorporar dados de textual 
arbitrarios no elemento <script> para usar em outros scripts. 

Select 

urna lista grafica de sele$ao Node, Element, FormControl 

O elemento Select representa uma tag HTML <select>, a qual exibe uma lista grafica de escolhas 
para o usuario. Se o atributo HTML multiple esta presente, o usuario pode selecionar qualquer nu- 
mero de op^oes na lista. Se esse atributo nao esta presente, o usuario so pode selecionar uma opqao e 
as op^oes tern um comportamento de botao de op?ao - selecionar uma anula a sele^ao da que estava 
selecionada anteriormente. 

Em um elemento Select, as opqties podem ser exibidas de duas maneiras distintas. Se o atributo size 
tem um valor maior do que 1 ou se o atributo multiple esta presente, elas sao exibidas em uma caixa 
de listagem com size linhas de altura na janela do navegador. Se size e menor do que o mimero 
de op^oes, a caixa de listagem inclui uma barra de rolagem. Por outro lado, se size e 1 e multiple 
nao e especificado, a op?ao atualmente selecionada e exibida em uma unica linha e a lista das outras 
opqioes se torna disponivel por meio de um menu suspenso. O primeiro estilo de apresenta^ao exibe 
as op?6es claramente, mas exige mais espa?o na janela do navegador. O segundo estilo exige espa?o 
minirno, mas nao exibe as opqioes alternativas tao explicitamente. size tem como padrao 4 quando 
o atributo multiple e configurado; caso contrario e 1. 

A propriedade options [ ] do elemento Select e a mais interessante. Esse e um objeto semelhante a um 
array de elementos <option> (consulte Option) que descrevem as escolhas apresentadas pelo elemento 
Select. Por motivos historicos, esse objeto semelhante a um array tem alguns comportamentos in- 
comuns para adicionar e remover novos elementos <option>. Consulte HTMLOptionsCollection para 
ver os detalhes. 

Para um elemento Select sem o atributo multiple especificado, voce pode determinar qual opfao esta 
selecionada com a propriedade selectedlndex. Contudo, quando sao permitidas varias sele^oes, essa 
propriedade informa o indice apenas da primeira op^ao selecionada. Para determinar o conjunto 
completo de op^oes selecionadas, voce deve iterar pelo array options [] e verificar a propriedade 
selected de cada objeto Option. 

Propriedades 

Alem das propriedades listadas aqui, os elementos Select tambem definem as propriedades de 
Element e FormControl e espelham atributos HTML com as seguintes propriedades de JavaScript: 
multiple, required e size, 
unsigned long length 

O numero de elementos no conjunto options. Os objetos Select em si sao objetos semelhantes 
a um array e, para um objeto Select s e um numero n, s[n] e o mesmo que s.options[n], 
readonly HTMLOptionsCollection options 

Um objeto semelhante a um array de elementos Option contidos nesse elemento Select. Con¬ 
sulte HTMLOptionsCollection para ver uma descri^ao sobre o comportamento historico des- 
se conjunto. 
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long selectedlndex 

A posifao da op^ao selecionada no array options. Se nenhuma op^ao estiver selecionada, essa 
propriedade e -1. Se varias op^oes estao selecionadas, essa propriedade contem o rndice da 
primeira opqao selecionada. 

Configurar o valor dessa propriedade seleciona a op^ao especificada e anula a sele^ao de todas 
as outras opfoes, mesmo que o objeto Select tenha o atributo multiple especificado. Quando 
voce esta fazendo selecjao em caixa de listagem (quando size > 1), pode anular a sele^ao de 
todas as opfoes configurando selectedlndex como -1. Note que alterar a sele^ao dessa maneira 
nao dispara a rotina de tratamento de evento onchange(). 
readonly HTMLCollection selectedOptions 

Um objeto semelhante a um array somente para leitura dos elementos Option selecionados. 
Essa e uma propriedade nova, definida por HTML5 e, quando este livro estava sendo escrito, 
ainda nao era amplamente suportada. 


Todos os metodos listados aqui delegam para os metodos de nome igual da propriedade options; 
consulte HTMLOptionsCollection para ver os detalhes. Alem desses metodos, os elementos Select tam- 
bem implementam os metodos de Element e FormControl. 


void add(Element elemento, [any antes]) 

Esse metodo fiinciona exatamente como options. add() para adicionar um novo elemento Option. 


any item(unsigned long indice) 

Esse metodo funciona exatamente como options.item() para retornar um elemento Option. Tam- 
bem e chamado quando o usuario indexa o objeto Select diretamente. 


any namedltem(string nome) 

Esse metodo e exatamente como options.namedltemQ. Consulte HTMLOptionsCollection. 


void remove(long indice) 

Esse metodo funciona exatamente como options. removeQ para remover um elemento Option. Con¬ 
sulte HTMLOptionsCollection. 


Storage 

armazenamento de pares nome/valor do lado do diente 

As propriedades localStorage e sessionStorage de Window sao ambas objetos Session que representam 
arrays associativos persistentes do lado do cliente que mapeiam chaves de string em valores. Teori- 
camente, um objeto Session pode armazenar qualquer valor que possa ser clonado com o algoritmo 
de clone estruturado (consulte “Clones estruturados”, na pagina 672). Contudo, quando este livro 
estava sendo escrito, os navegadores suportavam apenas valores de string. 

Os metodos de um objeto Storage permitem adicionar novos pares chave/valor, remover pares cha- 
ve/valor e consultar o valor associado a uma chave especifica. Contudo, nao e preciso chamar esses 
metodos explicitamente: voce pode usar indexa^ao de array e o operador delete em seu lugar e tratar 
localStorage e sessionStorage como se fossem objetos JavaScript normais. 
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Se voce alterar o conteudo de um objeto Storage, quaisquer outros objetos Windows que tiverem 
acesso a mesma area de armazenamento (porque estao exibindo um documento da mesma origem) 
serao notificados da altera^ao com um StorageEvent. 

Propriedades 

readonly unsigned long length 

O numero de pares chave/valor armazenados. 

Metodos 

void clear() 

Remove todos os pares chave/valor armazenados. 

any getltem(string chave) 

Retorna o valor associado a chave. (Nas implementa^oes que existiam quando este livro estava sendo 
escrito, o valor de retorno era sempre uma string.) Esse metodo e chamado implicitamente quando 
voce indexa o objeto Storage para recuperar uma propriedade chamada chave. 
string key(unsigned long n) 

Retorna a n-esima chave desse objeto Storage ou null, caso n seja maior ou igual a length. Note que 
a ordem das chaves pode mudar, se voce adicionar ou remover pares chave/valor. 

void removeItem(string chave) 

Remove chave (e seu valor associado) desse objeto Storage. Esse metodo e chamado implicitamente 
se voce usa o operador delete para excluir a propriedade chamada chave. 
void setltem(string chave, any valor) 

Adiciona a chave e o valor especificados nesse objeto Storage, substituindo qualquer valor que ja 
esteja associado a chave. Esse metodo e chamado implicitamente se voce atribui um valor a pro¬ 
priedade chamada chave do objeto Storage. Isto e, voce pode usar sintaxe de acesso e atribui^ao de 
propriedade normal de JavaScript, em vez de chamar setltemQ explicitamente. 

StorageEvent 

Event 

As propriedades localStorage e sessionStorage de um objeto Window se referem a objetos Sto¬ 
rage que representam areas de armazenamento do lado do cliente (consulte a Se$ao 20.1). Se 
mais de uma janela, guia ou quadro esta exibindo documentos da mesma origem, varias janelas 
tern acesso as mesmas areas de armazenamento. Se um script em uma janela altera o conteudo 
de uma area de armazenamento, um evento storage e disparado em todos os outros objetos 
Window que compartilham acesso a essa area de armazenamento. (Note que o evento nao e dis¬ 
parado na janela que fez a altera?ao.) Os eventos storage sao disparados no objeto Window e nao 
borbulham. Eles nao tem qualquer a?ao padrao que possa ser cancelada. O objeto associado a 
um evento storage e um objeto StorageEvent e suas propriedades descrevem a alterafao ocorrida 
na area de armazenamento. 
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Propriedades 

readonly string key 

Essa propriedade e a chave que foi configurada ou exclm'da. Se a area de armazenamento in- 
teira foi apagada com Storage.clearQ, essa propriedade (assim como newValue e oldValue) vai 
ser null. 

readonly any newValue 

O novo valor de key especificado. Sera null se a chave foi removida. Quando este livro estava 
sendo escrito, as implementa^oes de navegador so permitiam armazenar valores de string. 

readonly any oldValue 

O antigo valor da chave que foi alterada ou null, se essa chave foi adicionada recentemente na 
area de armazenamento. Quando este livro estava sendo escrito, as implementa^oes de navega¬ 
dor so permitiam armazenar valores de string. 

readonly Storage storageArea 

Essa propriedade sera igual a propriedade localStorage ou sessionStorage do objeto Window 
que recebe esse evento e indica qual area de armazenamento foi alterada. 
readonly string url 

E o URL do documento cujo script alterou a area de armazenamento. 


Style 

um elemento <style> HTML Node, Element 

Um objeto Style representa uma tag HTML <style>. 

Propriedades 

boolean disabled 

Configure essa propriedade como true para desabilitar a folha de estilo associada a esse ele¬ 
mento <style> e configure-a como false para voltar a habilita-la. 
string media 

Essa propriedade espelha o atributo HTML media e especifica as midias as quais os estilos 
especificados se aplicam. 

boolean scoped 

Essa propriedade e true se o atributo HTML scoped esta presente no elemento <style> e false, 
caso contrario. Quando este livro estava sendo escrito, os navegadores nao suportavam folhas 
de estilo com escopo. 
readonly CSSStyleSheet sheet 

O CSSStyleSheet definido por esse elemento <style>. 
string title 

Todos os elementos HTML permitem um atributo title. Configurar esse atributos ou pro¬ 
priedade em um elemento <style> pode permitir que o usuario selecione a folha de estilo 
(como uma folha de estilo alternativa) pelo tftulo, sendo que o titulo especificado pode apare- 
cer de alguma maneira dentro da interface do usuario do navegador Web. 
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string type 

Espelha o atributo HTML type. O valor padrao e “text/css” e normalmente voce nao precisa 
configurar esse atributo. 


Table 

urn <table> HTML Node, Element 

O objeto Table representa um elemento HTML <table> e define varias propriedades e metodos de 
conveniencia para consultar e modificar diversas sefoes da tabela. Esses metodos e propriedades 
tornam mais facil trabalhar com tabelas, mas sua funcionalidade tambem pode ser duplicada com 
metodos DOM basicos. 

As tabelas HTML sao compostas de sefoes, linhas e celulas. Consulte TableCell, TableRow e 
TableSection. 

Propriedades 

Alem das propriedades listadas aqui, os elementos Table tambem tern uma propriedade summary que 
espelha o atributo HTML de mesmo nome. 

Element caption 

Uma referenda ao elemento <caption> da tabela ou null, se nao houver nenhum. 
readonly HTMLCollection rows 

Um objeto semelhante a um array de objetos TableRow representando todas as linhas da tabe¬ 
la. Isso inclui todas as linhas definidas dentro de tags <thead>, <tfoot> e <tbody>. 
readonly HTMLCollection tBodies 

Um objeto semelhante a um array de objetos TableSection representando todas as se$oes 
<tbody> dessa tabela. 

TableSection tFoot 

O elemento <tfoot> da tabela ou null, se nao houver nenhum. 

TableSection tHead 

O elemento <thead> da tabela ou null, se nao houver nenhum. 

Metodos 

Element createCaptionQ 

Esse metodo retorna um objeto Element representando o elemento <caption> dessa tabela. Se a tabe¬ 
la ja tern uma legenda, esse metodo simplesmente a retorna. Se a tabela ainda nao tern um elemento 
<caption>, esse metodo cria uma nova legenda (vazia) e a insere na tabela, antes de retorna-la. 

TableSection createTBody() 

Esse metodo cria um novo elemento <tbody>, o insere na tabela e o retorna. O novo elemento e in- 
serido apos o ultimo <tbody> na tabela ou no fim da tabela. 

TableSection createTFoot() 

Esse metodo retorna um TableSection representando o primeiro elemento <tfoot> dessa tabela. Se a 
tabela ja tern um rodape, esse metodo simplesmente o retorna. Se a tabela ainda nao tern um rodape, 
esse metodo cria um novo elemento <tfoot> (vazio) e o insere na tabela, antes de retorna-lo. 
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TableSection createTHead() 

Esse metodo retorna um TableSection representando o primeiro elemento <thead> dessa tabela. Se a 
tabela ja tem um cabe^alho, esse metodo simplesmente o retorna. Se a tabela ainda nao tern um ca- 
befalho, esse metodo cria um novo elemento <thead> (vazio) e o insere na tabela, antes de retorna-lo. 

void deleteCaptionQ 

Remove o primeiro elemento <caption> da tabela, caso tenha um. 
void deleteRow(long indice) 

Esse metodo exclui a linha na posRao especificada da tabela. As linhas sao numeradas na ordem em 
que aparecem na origem do documento. As linhas nas sefoes <thead> e <tfoot> sao numeradas junto 
com todas as outras linhas da tabela. 

void deleteTFootQ 

Remove o primeiro elemento <tfoot> da tabela, caso tenha um. 

void deleteTHeadQ 

Remove o primeiro elemento <thead>da tabela, caso tenha um. 

TableRow insertRow([long indice ]) 

Esse metodo cria um novo elemento <tr>, o insere na tabela no indice especificado e o retorna. 

A nova linha e inserida na mesma secjao e imediatamente antes da linha existente na posRao especi- 
fica por indice. Se indice e igual ao numero de linhas na tabela (ou a -1), a nova linha e anexada na 
ultima se<jao da tabela. Se a tabela e inicialmente vazia, a nova linha e inserida em uma nova se<jao 
<tbody> que e, ela propria, inserida na tabela. 

Voce pode usar o metodo de conveniencia TableRow.insertCellQ para adicionar conteudo na linha 
recentemente criada. Consulte tambem o metodo insertRow() de TableSection. 

TableCell 

uma celula em uma tabela HTML Node, Element 

Um objeto TableCell representa um elemento <td> ou <th>. 

Propriedades 

readonly long celllndex 

A posi^ao dessa celula em sua linha. 
unsigned long colSpan 

O valor do atributo HTML colspan, como um numero. 
unsigned long rowSpan 

O valor do atributo HTML rowspan, como um numero. 

TableRow 

um elemento <tr> em uma tabela HTML Node, Element 

Um objeto TableRow representa uma linha (um elemento <tr>) em uma tabela HTML e define 
propriedades e metodos para trabalhar com os elementos de TableCell da linha. 
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Propriedades 

readonly HTMLCollection cells 

Um objeto semelhante a um array de objetos TableCell representando os elementos <td> e <th> 
nessa linha. 

readonly long rowlndex 

O rndice dessa linha na tabela. 

readonly long sectionRowIndex 

A posifao dessa linha dentro de sua se^ao (isto e, dentro de <thead>, <tbody> ou <tfoot> no 
qual esta contida). 

Metodos 

void deleteCell(long lndice) 

Esse metodo exclui a celula no lndice especificado na linha. 

Element insertCell([long lndice ]) 

Esse metodo cria um novo elemento <td>, o insere na linha na posi^ao especificada e entao o retorna. 
A nova celula e inserida imediatamente antes da celula que esta atualmente na posRao especificada 
por lndice. Se lndice e omitido, e -1 ou e igual ao numero de celulas na linha, a nova celula e ane- 
xada no fim da linha. 

Note que esse metodo de conveniencia insere apenas celulas de dados <td>. Se precisar adicionar 
uma celula de cabe^alho em uma linha, voce deve criar e inserir o elemento <th> usando Document. 
createElementQ e Node. insertBefore( ) ou metodos relacionados. 


TableSection 

uma se$ao de cabe$alho, rodape ou corpo de uma tabela Node, Element 

Um objeto TableSection representa um elemento <tbody>, <thead> ou <tfoot> em uma tabela 
HTML. As propriedades tHead e tFoot de Table sao objetos TableSection e a propriedade tBodies e 
um HTMLCollection de objetos TableSection. 

TableSection contem objetos TableRow e esta contido em um objeto Table. 

Propriedades 

readonly HTMLCollection rows 

Um objeto semelhante a um array de objetos TableRow representando as linhas nessa se^ao 
da tabela. 

Metodos 

void deleteRow(long lndice ) 

Esse metodo exclui a linha na posiqao especificada dentro dessa se^ao. 

TableRow insertRow([long lndice ]) 

Esse metodo cria um novo elemento <tr>, o insere nessa se^ao da tabela na posi?ao especificada e 
o retorna. Se lndice e-loue omitido ou e igual ao numero de linhas atualmente na seqao, a nova 
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linha e anexada no fim da secjao. Caso contrario, a nova linha e inserida imediatamente antes da 
linha que esta atualmente na posi^ao especificada por indice. Note que, para esse metodo, indice 
especifica uma posi^ao de linha dentro de uma unica se^ao da tabela e nao dentro da tabela inteira. 


Text 

uma sequencia de texto em urn documento Node 

Urn no Text representa uma sequencia de texto puro em um documento e normalmente aparece na 
arvore de documentos como filho de Element. O conteudo textual de um no Text esta disponivel 
por meio da propriedade data ou de nodeValue e das propriedades textContent herdadas de Node. 
Voce pode criar um novo no Text com Document .createTextNodeQ. Os nos Text nunca tern filhos. 


Propriedades 

string data 

O texto contido por esse no. 
readonly unsigned long length 

O comprimento, em caracteres, do texto. 

readonly string wholeText 

O conteudo do texto desse no e de quaisquer nos de texto adjacentes, antes ou depois desse. 
Se voce tiver chamado o metodo normalize!) do Node pai, essa propriedade vai ser o mesmo 
que data. 



Metodos 

A nao ser que voce esteja escrevendo um aplicativo do tipo editor de texto baseado na Web, esses 
metodos normalmente nao sao usados. 

void appendData(string texto) 

Esse metodo anexa o texto especificado no fim desse no Text. 

void deleteData(unsigned long deslocamento, unsigned long contagem) 

Esse metodo exclui caracteres desse no Text, come^ando com o caractere na posi^ao deslocamento e 
continuando por contagem caracteres. Se deslocamento mais contagem e maior do que o numero de 
caracteres no no Text, todos os caracteres de deslocamento ate o fim da string sao excluidos. 
void insertData(unsigned long deslocamento, string texto) 

Esse metodo insere o texto especificado no no Text, no deslocamento especificado. 
void replaceData(unsigned long deslocamento, unsigned long contagem, string texto) 
Esse metodo substitui contagem caracteres a partir da posi?ao deslocamento pelo conteudo da string 
texto. Se a soma de deslocamento e contagem e maior do que o comprimento do no Text, todos os 
caracteres de deslocamento em diante sao substituidos. 

Text replaceWholeText(string texto ) 

Esse metodo cria um novo no Text contendo o texto especificado. Entao, substitui esse no e quais¬ 
quer nos Text adjacentes pelo novo no e retorna o novo no. Consulte a propriedade wholeText ante- 
riormente e o metodo normalize!) de Node. 
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Text splitText(unsigned long deslocamento) 

Esse metodo divide um no Text em dois, no deslocamento especificado. O no Text original e modifi- 
cado de modo a ter todo o conteudo do texto ate, mas nao incluindo, o caractere na posRao deslo¬ 
camento. Um novo no Text e criado para conter todos os caracteres a partir (e incluindo) da posi^ao 
deslocamento ate o fim da string. Esse novo no Text e o valor de retorno do metodo. Alem disso, se 
o no Text original tern um parentNode, o novo no e inserido nesse no pai, imediatamente apos o no 
original. 

string substringData(unsigned long deslocamento, unsigned long contagem) 

Esse metodo extrai e retorna a substring que comefa na posi?ao deslocamento e continua por contagem 
caracteres do texto de um no Text. Se um no Text contem um volume de texto muito grande, usar 
esse metodo pode ser mais eficiente do que usar String. substring(). 

TextArea 

uma area de entrada de texto de varias linhas Node, Element, FormControl 

Um objeto TextArea representa um elemento HTML <textarea> que cria um campo de entrada de 
texto de varias linhas, frequentemente dentro de um formulario HTML. O conteudo inicial da area 
de texto e especificado como texto puro entre as tags <textarea> e </textarea>. Voce pode consultar 
e configurar o texto exibido com a propriedade value. 

TextArea e um elemento de controle de formulario como Input e Select. Assim como esses objetos, 
ele define as propriedades form, name, type e value e as outras propriedades e metodos documentados 
em FormControl. 

Propriedades 

Alem das propriedades listadas aqui, os elementos TextArea tambem definem as propriedades de 
Element e FormControl e espelham atributos HTML com as seguintes propriedades de JavaScript: 
cols, maxLength, rows, placeholder, readonly, required e wrap, 
string defaultValue 

O conteudo de texto puro inicial do elemento <textarea>. Quando o formulario e redefinido, 
a area de texto e restaurada nesse valor. Essa propriedade e igual a propriedade textContent 
herdada de Node, 
unsigned long selectionEnd 

Retorna ou configura o indice do primeiro caractere de entrada apos o texto selecionado. Con- 
suite tambem setSelectionRangeQ. 
unsigned long selectionStart 

Retorna ou configura o indice do primeiro caractere selecionado no elemento <textarea>. 
Consulte tambem setSelectionRangeQ. 
readonly unsigned long textLength 

O comprimento, em caracteres, da propriedade value (consulte FormControl). 
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Metodos 

Alem dos metodos listados aqui, os elementos TextArea tambem implementam os metodos de 
Element e FormControl. 
void selectQ 

Esse metodo seleciona todo o texto exibido por esse elemento <textarea>. Na maioria dos navega- 
dores, isso significa que o texto e real^ado e que novo texto digitado pelo usuario substitui o texto 
real^ado, em vez de ser anexado a ele. 

void setSelectionRange(unsigned long inicio, unsigned long fim) 

Seleciona texto exibido no elemento <textarea>, come^ando com o caractere na posi^ao inicio e 
continuando ate (mas nao incluindo) o caractere em fim. 


TextMetrics 


medidas de uma string de texto 

Um objeto TextMetrics e retornado pelo metodo measureTextQ de CanvasRenderingContext2D. 
Sua propriedade width contem a largura do texto medido, em pixels CSS. Mais metricas podem ser 
adicionadas no futuro. 

Propriedades 

readonly double width 

A largura, em pixels CSS, do texto medido. 



TimeRanges 

um conjunto de intervalos de tempo de midia 

As propriedades buffered, played e seekable de um MediaElement representam as partes da linha do 
tempo de uma midia que tern dados no buffer, que foram reproduzidas e nas quais a reprodu^ao 
pode come^ar. Cada uma dessas partes da linha do tempo pode incluir varios intervalos de tempo 
separados (isso acontece com a propriedade played, quando o usuario pula para o meio de um ar- 
quivo de video, por exemplo). Um objeto TimeRanges representa zero ou mais intervalos de tempo 
separados. A propriedade length especifica o numero de intervalos e os metodos start() e end() 
retornam os limites de cada intervalo. 

Os objetos TimeRanges retornados por MediaElements sao sempre normalizados, ou seja, os intervalos 
que eles contem estao em ordem, nao sao vazios e nao se tocam nem se sobrepoem. 

Propriedades 

readonly unsigned long length 

O numero de intervalos representados por esse objeto TimeRanges. 
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Metodos 

double end(unsigned long n) 

Retorna o tempo final (em segundos) do intervalo de tempo n ou lanfa uma excefao, sene menor 
do que zero ou maior ou igual a length, 
double start(unsigned long n) 

Retorna o tempo inidal (em segundos) do intervalo de tempo n ou lanqa uma exce^ao, sen e menor 
do que zero ou maior ou igual a length. 

TypedArray 

arrays binarios de tamanho fixer ArrayBufferView 

Um TypedArray e um ArrayBufferView que interpreta os bytes de um ArrayBuffer subjacente como 
um array de niimeros e permite acesso de leitura e grava^ao aos elementos desse array. Esta pagina nao 
documenta um tipo unico chamado TypedArray. Em vez disso, abrange oito tipos diferentes de arrays 
tipados. Esses oito tipos sao todos subtipos de ArrayBufferView e diferem entre si apenas no niimero 
de bytes por elemento de array e na maneira como esses bytes sao interpretados. Os oito tipos sao: 
Int8Array 

Um byte por elemento de array, interpretado como um inteiro com sinal. 

Intl6Array 

Dois bytes por elemento de array, interpretados como um inteiro com sinal, usando ordem de 
byte da plataforma. 

Int32Array 

Quatro bytes por elemento de array, interpretados como um inteiro com sinal, usando ordem 
de byte da plataforma. 

Uint8Array 

Um byte por elemento de array, interpretado como um inteiro sem sinal. 

Uintl6Array 

Dois bytes por elemento de array, interpretados como um inteiro sem sinal, usando ordem de 
byte da plataforma. 

Uint32Array 

Quatro bytes por elemento de array, interpretados como um inteiro sem sinal, usando ordem 
de byte da plataforma. 

Float32Array 

Quatro bytes por elemento de array, interpretados como um niimero em ponto flutuante, 
usando ordem de byte da plataforma. 

Float64Array 

Oito bytes por elemento de array, interpretados como um niimero em ponto flutuante, usan¬ 
do ordem de byte da plataforma. 

Conforme seus nomes implicam, esses sao objetos semelhantes a um array e voce pode obter e con- 
figurar valores de elemento usando notaQo de array normal com colchetes. Note, entretanto, que 
objetos desses tipos sempre tern um comprimento fixo. 
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Conforme observado nas describes anteriores, as classes TypedArray usam a ordem de byte padrao 
da plataforma subjacente. Consulte DataView para um modo de exibi^ao ArrayBuffer que permite 
controle explfcito sobre a ordem de byte. 

Construtora 

new AnayTipado (unsigned long compiimento) 
new AnayTipado (AnayTipado anay) 
new AnayTipado (type[] anay) 

new AnayTipado (ArrayBuffer buffer, [unsigned long deslocamentoByte],[ unsigned long 
compiimento ]) 

Cada um dos oito tipos de TypedArray tern uma construtora que pode ser chamada das quatro ma- 
neiras mostradas anteriormente. As construtoras fimcionam como segue: 

• Se a construtora e chamada com um unico argumento numerico, ela cria um novo array tipa- 
do com o numero especificado de elementos e inicializa cada elemento com 0. 

• Se for passado um unico objeto array tipado, a construtora cria um novo array tipado com 
o mesmo numero de argumentos que o argumento array e entao copia os elementos do ar¬ 
gumento array no array recentemente criado. O tipo do argumento array nao precisa ser o 
mesmo do array que esta sendo criado. 

• Se for passado um unico array (um array verdadeiro de JavaScript), a construtora cria um novo 
array tipado com o mesmo numero de argumentos e entao copia os valores de elemento do 
argumento array no novo array. 

• Por fim, se for passado um objeto ArrayBuffer, junto com argumentos de deslocamento e 
comprimento opcionais, a construtora cria um novo array tipado que e um modo de exibi^ao 
da regiao estipulada do ArrayBuffer especificado. O comprimento do novo TypedArray de- 
pende da regiao de ArrayBuffer e do tamanho do elemento do array tipado. 

Constantes 

long BYTES_PER_ELEMENT 

O numero de bytes ocupado por cada elemento desse array no ArrayBuffer subjacente. Essa 
constante tera o valor 1, 2, 4 ou 8, dependendo do tipo de TypedArray utilizado. 

Propriedades 

readonly unsigned long length 

O numero de elementos no array. TypedArrays tern tamanho fixo e o valor dessa propriedade 
nunca muda. Note que essa propriedade em geral nao e igual a propriedade byteLength herda- 
da de ArrayBufferView. 

Metodos 

void set (ArrayTipado array, [unsigned long deslocamento]) 

Copia elementos de anay nesse array tipado, come^ando no fndice deslocamento. 
void set(number[] array, [unsigned long deslocamento ]) 

Essa versao de set() e como a anterior, mas usa um array verdadeiro de JavaScript, em vez de um 
array tipado. 




982 Parte IV Referenda de JavaScript do lado do cliente 


AriayTipado subarray(long inicio, long fim) 

Retorna um novo TypedArray que usa o mesmo ArrayBuffer subjacente que esse. O primeiro ele- 
mento do array retornado e o elemento inicio desse array. E o ultimo elemento do array retornado e 
o elemento fim -1 desse array. Valores negativos de inicio e fim sao interpretados como deslocamen- 
tos a partir do fim desse array, em vez do inicio. 

URL 

metodosde URL de Blob 

A propriedade URL do objeto Window se refere a esse objeto URL. No futuro, esse objeto pode se 
tornar uma construtora para uma classe utilitaria de analise e manipulate de URLs. No entanto, 
quando este livro estava sendo escrito, ele servia simplesmente como um espaijo de nomes para as 
duas fun (joes de URL de Blob descritas a seguir. Consulte a Seijao 22.6 e a Seijao 22.6.4 para obter 
mais informaijoes sobre Blobs e URLs de Blob. 

O objeto URL era novo quando este livro estava sendo escrito e a API ainda nao era estavel. Talvez 
voce precise usa-lo com um prefixo especifico do fornecedor: webkitURL, por exemplo. 

Fun^oes 

string createObjectURL(Blob blob ) 

Retorna um URL de Blob para o blob especificado. Requisites HTTP GET para esse URL vao 
retornar o conteudo de blob. 

void revokeObjectURL(string url) 

Revoga o url de Blob especificado, para que nao esteja mais associado a Blob algum e nao possa mais 
ser carregado. 


Video 

um elemento <video> HTML Node, Element, MediaElement 

Um objeto Video representa um elemento HTML <video>. Os elementos <video> e <audio> sao 
muito parecidos e suas propriedades e metodos comuns estao documentados em MediaElement. Esta 
pagina documenta varias propriedades adicionais, especificas de objetos Video. 

Propriedades 

DOMSettableTokenList audio 

Essa propriedade especifica optjoes de audio para o video. As optjoes sao especificadas como 
uma lista de simbolos separados por espatjos no atributo HTML audio e o conjunto e espe- 
lhado em JavaScript como DOMSettableTokenList. Contudo, quando este livro estava sendo 
escrito, o padrao HTML5 definia apenas um simbolo valido (“muted”) e voce pode tratar essa 
propriedade como uma string, 
unsigned long height 

A altura na tela do elemento <video>, em pixels CSS. Espelha o atributo HTML height. 
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string poster 

O URL de uma imagem a ser exibida como “quadro de anuncio” antes que o video comece a 
ser reproduzido. Espelha o atributo HTML poster, 
readonly unsigned long videoHeight 
readonly unsigned long videoWidth 

Essas propriedades retornam a largura e altura intrfnsecas do video (isto e, o tamanho de 
seus quadros) em pixels CSS. Essas propriedades serao zero ate que o elemento <video> tenha 
carregado os metadados do video (enquanto readyState ainda e HAVE_NOTHING e o evento loade- 
dmetadata nao foi enviado). 
unsigned long width 

A largura desejada do elemento <video> na tela, em pixels CSS. Espelha o atributo HTML width. 


WebSocket 

uma conexao de rede bidiredonal do tipo soquete EventTarget 

Um WebSocket representa uma conexao de rede tipo soquete, de longa dura^ao e bidiredonal com um 
servidor que suporta o protocolo WebSocket. Esse e um modelo de liga^ao em rede fundamentalmente 
diferente do modelo requisi^ao/resposta do HTTP. Crie uma nova conexao com a construtora WebSo- 
cket(). Use send() para enviar mensagens textuais para o servidor e registre uma rotina de tratamento 
de eventos message para receber mensagens do servidor. Consulte a Se$ao 22.9 para ver mais detalhes. 

WebSockets sao uma nova API da Web e, quando este livro estava sendo escrito, nao eram suporta- 
dos por todos os navegadores. 

Construtora 

new WebSocket(string url, [ string! ] protocolos]) 

A construtora WebSocket () cria um novo objeto WebSocket e inicia o processo (assincrono) de esta- 
belecimento de uma conexao com um servidor de WebSocket. O argumento url especifica o servi¬ 
dor a ser conectado e deve ser um URL absoluto usando o esquema ws://ouwss://.0 argumento 
protocolos e um array de nomes de subprotocolo. Se o argumento e especificado, essa e a maneira de 
o cliente informar ao servidor com quais protocolos de comunica^ao ou quais versoes de protocolo 
e capaz de “falar”. O servidor deve escolher um e informar ao cliente como parte do processo de co¬ 
nexao. protocols tambem pode ser especificado como uma unica string, em vez de um array - nesse 
caso, e tratado como um array de comprimento 1. 

Constantes 

Estas constantes sao os valores da propriedade readyState. 
unsigned short CONNECTING = 0 

Um processo de conexao esta em andamento. 
unsigned short OPEN = 1 

O WebSocket esta conectado no servidor; mensagens podem ser enviadas e recebidas. 
unsigned short CLOSING = 2 
Uma conexao esta fechando. 
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unsigned short CLOSED = 3 
Uma conexao foi fechada. 

Propriedades 

readonly unsigned long bufferedAmount 

O numero de caracteres de texto passados para send(), mas ainda nao enviados. Caso precise 
enviar grandes volumes de dados, voce pode usar essa propriedade para garantir que nao esteja 
enviando mensagens mais rapido do que elas podem ser transmitidas. 
readonly string protocol 

Se um array de subprotocolos foi passado para a construtora WebSocketQ, essa propriedade 
contem o que foi escolhido pelo servidor. Note que, quando o WebSocket e criado, a conexao 
nao esta estabelecida e a escolha do servidor nao e conhecida. Assim, essa propriedade come^a 
como a string vazia. Se voce passou protocolos para a construtora, essa propriedade vai mudar 
para refletir a escolha de subprotocolo do servidor, quando o evento open for disparado. 
readonly unsigned short readyState 

O estado atual da conexao de WebSocket. Essa propriedade contem um dos valores de cons- 
tante listados anteriormente. 
readonly string url 

Essa propriedade contem o URL que foi passado para a construtora WebSocket(). 

Metodos 

void closeQ 

Se a conexao ainda nao esta fechada ou fechando, esse metodo inicia o processo de fechamento, con- 
figurando readyState como CLOSING. Os eventos message podem continuar a ser disparados, mesmo 
depois de closeQ ser chamado, ate que readyState mude para CLOSED e o evento close seja disparado. 
void send(string dados) 

Esse metodo envia os dados especificados para o servidor na outra extremidade da conexao de Web¬ 
Socket. Esse metodo lan^a uma exceqao se chamado antes que o evento open tenha sido disparado, 
enquanto readyState ainda e CONNECTING. O protocolo WebSocket suporta dados binarios, mas quan¬ 
do este livro estava sendo escrito, a API WebSocket so permitia enviar e receber strings. 

Rotinas de tratamento de evento 

A comunica^ao de rede e inerentemente assincrona e, assim como XMLHttpRequest, a API WebSocket 
e baseada em eventos. WebSocket define quatro propriedades de registro de rotina de tratamento e 
tambem implementa EventTarget, de modo que voce tambem pode registrar rotinas de tratamento 
de evento usando os metodos de EventTarget. Os eventos descritos a seguir sao todos disparados no 
objeto WebSocket. Nenhum deles borbulha e nenhum tern uma a^ao padrao para cancelar. Note, 
entretanto, que eles tern diferentes objetos evento associados. 
onclose 

Um evento close e disparado quando a conexao de WebSocket se fecha (e readyState muda 
para CLOSED). O objeto evento associado e um CloseEvent, o qual especifica se a conexao 
fechou normalmente ou nao. 
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onerror 

Um evento error e disparado quando ocorre um erro de rede ou do protocolo WebSocket. O 
objeto evento associado e um Event simples, 
onmessage 

Quando o servidor envia dados por meio do WebSocket, este dispara um evento message com 
um objeto MessageEvent associado, cuja propriedade data se refere a mensagem recebida. 
onopen 

A construtora WebSocketQ retorna antes que a conexao com o uil especificado seja estabeleci- 
da. Quando o handshake da conexao termina e o WebSocket esta pronto para enviar e receber 
dados, um evento open e disparado. O objeto evento associado e um Event simples. 

Window 

uma janela, guia ou quadra de navegador Web EventTarget 

O objeto Window representa uma janela, guia ou quadro do navegador. Ele esta documentado em 
detalhes no Capitulo 14. Em JavaScript do lado do cliente, Window serve como “objeto global” e 
todas as expressoes sao avaliadas no contexto do objeto Window atual. Isso significa que nenhuma 
sintaxe especial e exigida para se referir a janela atual e voce pode usar as propriedades desse objeto 
janela como se fossem variaveis globais. Por exemplo, voce pode escrever document, em vez de window. 
document. Do mesmo modo, voce pode usar os metodos do objeto janela atual como se fossem fun- 
<joes: por exemplo, alert(), em vez de window. alert(). 

Algumas das propriedades e metodos desse objeto consultam ou manipulam a janela do navegador 
de alguma maneira. Outras estao definidas aqui simplesmente porque esse e o objeto global. Alem 
das propriedades e metodos listados aqui, o objeto Window tambem implementa todas as proprie¬ 
dades e fun^oes globais definidas por JavaScript basica. Consulte Global, na Parte III, para ver os de¬ 
talhes. Os navegadores Web disparam muitos tipos de eventos em janelas. Isso significa que o objeto 
Window define muitas rotinas de tratamento de evento e que os objetos Window implementam os 
metodos definidos por EventTarget. 

O objeto Window tern propriedades window e self que se referem ao proprio objeto janela. Voce 
pode usa-las para tornar a referenda da janela atual explicita, em vez de implicita. 

Um Window pode corner outros objetos Window, normalmente na forma de tags <iframe>. Cada 
Window e um objeto semelhante a um array de objetos Window aninhados. Contudo, em vez de 
indexar um objeto Window diretamente, voce normalmente usa sua propriedade autoreferencial 
frames como se fosse um objeto semelhante a um array. As propriedades parent e top de um objeto 
Window se referem diretamente a janela container e a janela ascendente de nivel superior. 

Novas janelas de nivel superior do navegador sao criadas com o metodo Window.open(). Quando 
esse metodo for chamado, salve o valor de retorno da chamada de open( ) em uma variavel e use essa 
variavel para referenciar a nova janela. A propriedade opener da nova janela e uma referenda para a 
janela que a abriu. 

Propriedades 

Alem das propriedades listadas aqui, o conteudo do documento exibido dentro da janela faz surgir 
novas propriedades. Conforme explicado na Seqao 14.7, voce pode se referir a um elemento dentro 
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do documento usando o valor do atributo id do elemento como uma propriedade da janela (e como 
a janela e o objeto global, suas propriedades sao variaveis globais). 
readonly ApplicationCache applicationCache 

Uma referenda ao objeto ApplicationCache. Os aplicativos Web colocados na cache e off-line 
podem usar esse objeto para gerenciar suas atualiza^oes de cache, 
readonly any dialogArguments 

Nos objetos Window criados por showModalDialogf), essa propriedade e o valor argumentos 
passado para showModalDialogf). Em objetos Window normais, essa propriedade nao existe. 
Consulte a Se^ao 14.5 para obter mais informa^oes. 
readonly Document document 

O objeto Document que descreve o conteudo dessa janela (consulte Document para ver os detalhes). 
readonly Event event [somentepara o IE] 

No Internet Explorer, essa propriedade se refere ao objeto Event que descreve o evento mais 
recente. No IE8 e anteriores, o objeto evento nem sempre e passado para a rotina de tratamen- 
to de evento e as vezes deve ser acessado por meio dessa propriedade. Consulte o Capitulo 17 
para ver mais detalhes. 

readonly Element frameElement 

Se esse objeto Window esta dentro de um <iframe>, essa propriedade se refere a esse elemento 
IFrame. Para janelas de m'vel superior, essa propriedade e null, 
readonly Window frames 

Essa propriedade, assim como as propriedades self e window, se refere ao proprio objeto Win¬ 
dow. Todo objeto Window e um objeto semelhante a um array dos quadros contidos nele. Em 
vez de escrever w[o] para se referir ao primeiro quadro dentro de uma janela w, essa propriedade 
permite escrever mais claramente w.framesjo], 
readonly History history 

O objeto Elistory dessa janela. Consulte History, 
readonly long innerHeight 
readonly long innerWidth 

A altura e a largura, em pixels, da area de exibi?ao de documento dessa janela. Essas proprie¬ 
dades nao sao suportadas no IE8 e anteriores. Consulte o Exemplo 15-9 para um exemplo. 
readonly unsigned long length 

O numero de quadros contidos nessa janela. Consulte frames, 
readonly Storage localStorage 

Essa propriedade se refere a um objeto Storage que fornece armazenamento do lado do cliente 
para pares nome/valor. Os dados armazenados por meio de localStorage sao visiveis e com- 
partilhados com quaisquer documentos de mesma origem e persistem ate serem excluidos pelo 
usuario ou por um script. Consulte tambem sessionStorage e a Se^ao 20.1. 
readonly Location location 

O objeto Location dessa janela. Esse objeto especifica o URL do documento atualmente car- 
regado. Configurar essa propriedade com uma nova string de URL faz o navegador carregar e 
exibir o conteudo desse URL. Consulte Location. 
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string name 

O nome da janela. Opcionalmente, o nome e especificado quando a janela e criada com o 
metodo open()ou com o atributo name de uma tag <frame>. O nome de uma janela pode ser 
usado como valor de um atributo target de uma tag <a> ou <form>. Usar o atributo target des- 
sa maneira especifica que o documento com hiperlink ou o resultado do envio do formulario 
deve ser exibido na janela ou quadro nomeado. 
readonly Navigator navigator 

Uma referenda ao objeto Navigator, a qual fornece informapoes sobre versao e configurapao 
do navegador Web. Consulte Navigator, 
readonly Window opener 

Uma referenda de leitura/gravapao ao objeto Window que continha o script que chamou open() 
para abrir essa janela de navegador ou null, para janelas que nao foram criadas dessa maneira. 
Essa propriedade e valida somente para objetos Window que representam janelas de m'vel su¬ 
perior e nao para os que representam quadros. A propriedade opener e util para que uma janela 
recentemente criada possa se referir a propriedades e funpoes definidas na janela que a criou. 
readonly long outerHeight 
readonly long outerWidth 

Essas propriedades especificam a altura e largura totais, em pixels, da janela do navegador, 
incluindo barras de ferramentas, barras de rolagem, bordas de janela, etc. Essas propriedades 
nao sao suportadas no IE8 e anteriores. 

readonly long pageXOffset 
readonly long pageYOffset 

O numero de pixels que o documento atual rolou para a direita (pageXOffset) e para baixo 
(pageYOffset). Essas propriedades nao sao suportadas no IE8 e anteriores. Consulte o Exemplo 
15-8 para ver um exemplo e codigo de compatibilidade que funciona no IE. 
readonly Window parent 

O objeto Window que contem esse. Se essa janela e de nivel superior, parent se refere a propria 
janela. Se essa janela e um quadro, a propriedade parent se refere a janela ou ao quadro que o 
contem. 

string returnValue 

Essa propriedade nao existe em janelas normais, mas e definida para janelas criadas por 
showModalDialog() e tern a string vazia como valor padrao. Quando um objeto Window de 
dialogo e fechado (consulte o metodo close ()), o valor dessa propriedade se torna o valor de 
retorno de showModalDialogQ. 
readonly Screen screen 

O objeto Screen que especifica informa^oes sobre a tela: o numero de pixels e o numero de 
cores disponiveis. Consulte Screen para ver os detalhes. 
readonly long screenX 
readonly long screenY 

As coordenadas do canto superior esquerdo da janela na tela, 
readonly Window self 

Uma referenda para essa propria janela. E um sinonimo da propriedade window. 
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readonly Storage sessionStorage 

Essa propriedade se refere a um objeto Storage que fornece armazenamento no lado do cliente 
para pares nome/valor. Os dados armazenados por meio de sessionStorage sao visiveis apenas 
para documentos de mesma origem, dentro da mesma janela ou guia de nfvel superior e per- 
sistem apenas pela dura^ao da sessao de navega^ao. Consulte tambem localStorage e a Secjao 
20 . 1 . 

readonly Window top 

A janela de rn'vel superior que content essa janela. Se essa janela e ela propria de nivel superior, 
a propriedade top simplesmente se refere a ela. Se essa janela e um quadro, a propriedade top 
se refere a janela de nivel superior que content o quadro. Compare com a propriedade parent, 
readonly object URL 

Quando este livro estava sendo escrito, essa propriedade era simplesmente uma referenda a 
um objeto de espa<jo reservado que definia as fun (joes documentadas em URL. No future, essa 
propriedade pode se rernar uma construtora URL() e definir uma API para analisar URLs e suas 
strings de consulta. 
readonly Window window 

A propriedade window e identica a propriedade self: ela content uma referenda para essa jane¬ 
la. Como o objeto Window e o objeto global de JavaScript do lado do cliente, essa propriedade 
nos permite escrever window para nos referirmos ao objeto global. 

Construtoras 

Como objeto global de JavaScript do lado do cliente, o objeto Window deve definir todas as cons¬ 
trutoras globais do ambiente do lado do cliente. Embora nao sejam listadas aqui, todas as constru- 
toras globais documentadas nesta seqao de referenda sao propriedades do objeto Window. O fare de 
JavaScript do lado do cliente definir construtoras Image() e XMLHttpRequestQ, por exemplo, significa 
que redo objeto Window tem propriedades chamadas Image e XMLHttpRequest. 

Metodos 

O objeto Window define os metodos a seguir e tambem herda todas as fun (joes globais definidas por 
JavaScript basica (consulte Global, na Parte III), 
void alert(string mensagem) 

O metodo alert() exibe a mensagem de texto pure especificada para o usuario, em uma caixa de 
dialogo. A caixa de dialogo contem um botao OK em que o usuario pode clicar para fecha-la. Nor- 
malmente, a caixa de dialogo e modal (pelo menos para a guia corrente) e a chamada de alertQ 
bloqueia ate que a caixa de dialogo seja fechada. 
string atob(string apaiab) 

Essa fun<jao utilitaria aceita uma string codificada em base64 e a decodifica em uma string binaria de 
JavaScript na qual cada caractere representa um byte. Use o metodo charCodeAtQ da string retornada 
para extrair os valores de byte. Consulte tambem btoa(). 

void blur() 

O metodo blur () retira o foco do teclado da janela de nfvel superior do navegador especificada pelo 
objeto Window. Nao e definido qual janela ganha o foco do teclado como resultado. Em alguns 
navegadores e/ou plataformas, esse metodo pode nao ter efeito algum. 
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string btoa(string bpaiaa) 

Essa fun^ao utilitaria aceita uma string binaria de JavaScript (na qual cada caractere representa um 
byte) como argumento e retorna sua codifica^ao base64. Use String.fromChar Code() para criar uma 
string binaria a partir de uma sequencia arbitraria de valores de byte. Consulte tambem atob(). 

void clearInterval(long alca) 

clearlnterval() interrompe a execu^ao repetida de codigo, iniciada por uma chamada de setlnter- 
val(). identlntervalo deve ser o valor retornado por uma chamada de setlnterval(). 

void clearTimeout(long alca ) 

clearTimeoutQ cancela a execupao de codigo adiada com o metodo setTimeout(). O argumento ident- 
Tempolimite e um valor retornado pela chamada de setTimeout() e identifica o codigo adiado a ser 
cancelado. 

void close() 

O metodo close() fecha a janela de nivel superior do navegador na qual e chamado. Geralmente, os 
scripts so podem fechar as janelas que abriram. 
boolean confirm(string mensagem) 

Esse metodo exibe a peigunta especificada como texto puro em uma caixa de dialogo modal. A cai- 
xa de dialogo contem botoes OK e Cancel que o usuario pode usar para responder a pergunta. Se 
o usuario clica no botao OK, confirm() retorna true. Se clica em Cancel, confirm() retorna false. 

void focusQ 

Esse metodo da o foco do teclado para a janela do navegador. Na maioria das plataformas, uma janela de 
nivel superior e trazida para o topo da pilha de janelas, para que se torne visivel quando receber o foco. 
CSSStyleDeclaration getComputedStyle(Element elt, [string pseudoElt ]) 

Um elemento em um documento pode obter informa^oes de estilo a partir de um atributo style em 
linha e de qualquer numero de folhas de estilo na “cascata” de folhas de estilo. Antes que o elemento 
possa realmente ser exibido em uma janela, suas informa^oes de estilo devem ser extraidas da cascata e 
os estilos especificados com unidades relativas (como porcentagens ou “ernes”) devem ser “calculados” 
para se converter em pixels. Esses valores calculados as vezes tambem sao chamados de valores “usados”. 

Esse metodo retorna um objeto CSSStyleDeclaration somente de leitura representando os valores de 
estilo CSS realmente usados para exibir o elemento. Todas as dimensoes serao em pixels. 

O segundo argumento desse metodo normalmente e omitido ou e null, mas tambem e possivel passar 
o pseudoelemento CSS “::before” ou “ “after” para determinar os estilos usados para conteudo gerado 
por CSS. 

Compare getComputedStyle() com a propriedade style de um HTMLElement, que da acesso apenas 
aos estilos em linha de um elemento, nas unidades onde foram especificados, e nao informa nada 
sobre os estilos de folha de estilo que se aplicam ao elemento. 

Esse metodo nao e implementado no IE8 e anteriores, mas funcionalidade semelhante esta disponi- 
vel por meio da propriedade nao padronizada currentStyle de cada objeto HTMLElement. 

Window open([string url], [string alvo], [string recursos], [string substituicao ]) 

O metodo open() carrega e exibe o uil especificado em uma janela ou guia nova (ou ja existente) do 
navegador. O argumento uzl especifica o URL do documento a ser carregado. Se nao for especifica¬ 
do, “about:blank” e usado. 
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O argumento alvo especiflca o nome da janela na qual o url deve ser carregado. Se nao for especifi- 
cado, “_blank” e usado. Se alvo e “_blank” ou se nao houver uma janela com o nome especiflcado, 
uma nova janela e criada para exibir o conteudo de url. Caso contrario, o uil e carregado na janela 
existente com o nome especiflcado. 

O argumento zecuisos e usado para especificar a posi^ao, o tamanho e recursos (como barra de 
menus, barra de ferramentas, etc.) da janela. Nos navegadores modernos que suportam guias, ele e 
frequentemente ignorado e nao esta documentado aqui. 

Quando se usa Window.open () para carregar um novo documento em uma janela ja existente, o 
argumento substituicao especiflca se o novo documento tern sua propria entrada no historico de 
navega?ao da janela ou se substitui a entrada de historico do documento atual. Se substituicao e 
true, o novo documento substitui o antigo. Se esse argumento e false ou nao e especiflcado, o novo 
documento tern sua propria entrada no historico de navegaqao de Window. Esse argumento fornece 
fimcionalidade muito parecida com a do metodo Location.replace(). 
void postMessage(any mensagem, string origemAlvo, [MessagePort[] portas ]) 

Envia para essa janela uma copia da mensagem especiflcada e as poitas especiflcadas opcionalmente, 
mas somente se o documento exibido nessa janela tern a origemAlvo especiflcada. 

mensagem pode ser qualquer objeto que possa ser clonado com o algoritmo de clone estruturado (con- 
suite “Clones estruturados”, na pagina 672). origemAlvo deve ser um URL absoluto especiflcando o 
esquema, host e porta da origem desejada. Ou entao, origemAlvo pode ser se qualquer origem for 
aceitavel, ou “/”, para usar a propria origem do script. 

Chamar esse metodo em uma janela causa um evento message nessa janela. Consulte MessageEvent 
e a Se ? ao 22.3. 

void printQ 

Chamar print () faz o navegador se comportar como se o usuario tivesse selecionado o botao ou item 
de menu Print. Normalmente, isso apresenta uma caixa de dialogo que permite ao usuario cancelar 
ou personalizar o pedido de impressao. 
string prompt(string mensagem, [string padrao ]) 

O metodo prompt () exibe a mensagem especiflcada em uma caixa de dialogo modal que tambem con- 
tem um campo de entrada de texto e botoes OK e Cancel, e bloqueia ate que o usuario clique em 
um dos botoes. 

Se o usuario clica no botao Cancel, prompt () retorna null. Se clica no botao OK, prompt () retorna o 
texto atualmente exibido no campo de entrada. 

O argumento padrao especiflca o valor inicial do campo de entrada de texto. 
void scroll(long x, long y) 

Esse metodo e um sinonimo de scrollTo(). 
void scrollBy(long x, long y) 

scrollBy( ) rola o documento exibido em window pelas quantidades relativas especificadas por dx e dy. 
void scrollTo(long x, long y) 

scrollTo( ) rola o documento exibido dentro de uindou de modo que o ponto no documento especi- 
ficado pelas coordenadas x e y seja exibido no canto superior esquerdo, se possrvel. 
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long setlnterval(function f, unsigned long intervalo, any args...) 
setlnterval( ) registra a fun910 / a ser chamada apos intervalo milissegundos e depois a ser chamada 
repetidamente nesse intervalo especificado. f sera chamada com o objeto Window como seu valor 
de this e vai receber quaisquer args adicionais passados para setlnterval(). 

setlnterval( ) retorna um niimero que posteriormente pode ser passado para Window. clearlnterval() 
a fim de cancelar a execu^ao de codigo. 

Por motivos historicos, / pode ser uma string de codigo JavaScript, em vez de uma funqao. Se for, a 
string sera avaliada (como se fosse um <script>) a cada intervalo milissegundos. 

Use setTimeout() quando quiser adiar a execuqao de codigo, mas nao quiser que ele seja executado 
repetidamente. 

long setTimeout(function f, unsigned long tempoLimite, any args...) 
setTimeoutQ e como setlntervalQ, exceto que chama a fun^ao especificada apenas uma vez: re¬ 
gistra / para ser chamada apos terem decorrido tempoLimite milissegundos e retorna um niimero 
que posteriormente pode ser passado para clearTimeout() a fim de cancelar a chamada pendente. 
Quando o tempo especificado tiver decorrido, / sera chamada como um metodo de Window e vai 
receber quaisquer args especificados. Se / for uma string, em vez de uma funpio, sera executada apos 
tempoLimite milissegundos, como se fosse um <script>. 
any showModalDialog(string url, [any argumentos ]) 

Esse metodo cria um novo objeto Window, configura sua propriedade dialogArguments com 
argumentos, carrega url na janela e bloqueia ate que a janela seja fechada. Uma vez fechada, ele re¬ 
torna a propriedade returnValue da janela. Consulte a SeQo 14.5 e o Exemplo 14-4 para ver uma 
discussao e um exemplo. 

Rotinas de tratamento de evento 

A maioria dos eventos que ocorrem em elementos HTML borbulha para cima na arvore de docu- 
mentos ate o objeto Document e, entao, ate o objeto Window. Por isso, voce pode usar todas as 
propriedades de tratamento de evento listadas em Element nos objetos Window. Alem disso, pode 
usar as propriedades de tratamento de evento listadas a seguir. Por motivos historicos, cada uma das 
propriedades de tratamento de evento bstadas aqui tambem pode ser definida (como um atributo 
HTML ou como uma propriedade de JavaScript) no elemento <body>. 


Rotina de tratamento de evento 

Chamada... 

onafterprint 

Depois que 0 conteudo da janela e impresso 

onbeforeprint 

Antes que 0 conteudo da janela seja impresso 

onbeforeunload 

Antes de sair da pagina atual. Se 0 valor de retorno for uma string ou se a rotina de tratamento 
configurar a propriedade returnValue de seu objeto evento como uma string, essa string 
sera exibida em um dialogo de confirma$ao. Consulte BeforellnloadEvent. 

onblur 

Quando a janela perde 0 foco do tedado 

onerror 

Quando ocorre um erro de JavaScript. Essa nao e uma rotina de tratamento de evento normal. 
Consulte a Se^ao 14.6. 

onfocus 

Quando a janela recebe 0 foco do tedado 


(continual 
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Rotina de tratamento de evento 

Chamada... 

onhashchange 

Quando o identificador defragmento (consulte Location .hash) do documento muda 
como resultado de navega$ao pelo historico (consulte HashChangeEvent) 

onload 

Quando o documento e seus recursos externos estao totalmente carregados 

onmessage 

Quando um script em outra janela envia uma mensagem chamando o metodo 
postMessage (). Consulte MessageEvent. 

onoffline 

Quando o navegador perde sua conexao com a Internet 

ononline 

Quando o navegador volta a ter uma conexao com a Internet 

onpagehide 

Quando a pagina esta para ser colocada na cache e substituida por outra 

onpageshow 

Quando uma pagina e carregada pela primeira vez, um evento pageshow e disparado 
imeaiatamente apos o evento load e o objeto evento tern uma propriedade persisted igual 
a false. No entanto, quando uma pagina carregada anteriormente e restaurada da cache na 
memoria do navegador, nenhum evento load e disparado (pois a pagina colocada na cache ja 
esta em seu estado loaded) e um evento pageshow e disparado com um objeto evento que tern 
sua propriedade persisted configurada como true. Consulte PageTransitionEvent. 

onpopstate 

Quando o navegador carrega uma nova pagina ou restaura um estado salvo com History. 
pushStateQ ou History. replaceStateQ. Consulte PopStateEvent. 

onresize 

Quando o usuario muda o tamanho da janela do navegador 

onscroll 

Quando o usuario rola a janela do navegador 

onstorage 

0 conteudo de localStorage ou sessionStorage muda. Consulte StorageEvent. 

onunload 

0 navegador sai de uma pagina. Note que, se voce registrar uma rotina de tratamento de evento 
onunload para uma pagina, essa pagina nao podera ser colocada na cache. Para permitir 
que os usuarios retornem rapidamente para sua pagina, sem recarregar, use onpagehide. 


Worker 

uma thread worker EventTarget 

Um Worker representa uma thread de segundo piano. Crie um novo Worker com a construtora 
WorkerQ, passando o URL de um arquivo de codigo JavaScript para ela executar. O codigo Java¬ 
Script desse arquivo pode usar APIs sincronas ou executar tarefas com muitos calculos sem congelar 
a thread principal da interface com o usuario. Os Workers executam seu codigo em um contexto de 
execurjao completamente separado (consulte WorkerGlobalScope) e a unica maneira de trocar dados 
com um worker e por meio de eventos assincronos. Chame postMessageQ para enviar dados ao 
Worker e trate de eventos message para receber dados do worker. 

Consulte a Se^ao 22.4 para ver uma introdu?ao as threads worker. 

Construtora 

new Worker(string sciiptURL) 

Constroi um novo objeto Worker e o faz executar o codigo JavaScript em sciiptURL. 
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Metodos 

void postMessage(any inensagein, [MessagePort[] poitas ]) 

Envia mensagem para o worker, o qual vai recebe-la como um objeto MessageEvent enviado para sua 
rotina de tratamento de evento onmessage. mensagem pode ser um valor primitivo de JavaScript ou ob¬ 
jeto ou array, mas nao uma fun<;ao. Os tipos do lado do cliente ArrayBuffer, File, Blob e ImageData 
sao permitidos, mas Nodes, como Document e Element, nao (consulte “Clones estruturados”, na 
pagina 672 para ver os detalhes). 

O argumento opcional poitas e um recurso avan^ado que permite passar um ou mais canais de co- 
munica^ao diretos para o Worker. Se voce criar dois objetos Worker, por exemplo, pode permitir que 
eles se comuniquem diretamente, passando a eles cada extremidade de um MessageChannel. 

void terminate() 

Para o worker e cancela o script que ele esta executando. 

Rotinas de tratamento de evento 

Como os workers executam codigo em um ambiente de execu^ao completamente separado daquele 
que os criou, a unica maneira de se comunicarem com suas threads pais e por meio de eventos. Voce 
pode registrar rotinas de tratamento de evento nessas propriedades ou usar os metodos EventTarget. 
onerror 

Quando uma exceQo e lan^ada no script que esta sendo executado por um Worker e esse erro 
nao e tratado pela rotina de tratamento de onerror do WorkerGlobalScope, o erro dispara um 
evento error no objeto Worker. O objeto evento associado a esse evento e um ErrorEvent. O 
evento error nao borbulha. Se esse worker pertence a outro worker, cancelar um evento error 
impede que ele seja propagado para o worker pai. Se esse objeto Worker ja esta na thread prin¬ 
cipal, cancelar o evento pode impedir que ele seja exibido na console JavaScript, 
onmessage 

Quando o script que o worker esta executando chama sua fun^ao global postMessageQ (con¬ 
sulte WorkerGlobalScope), um evento message e disparado no objeto Worker. O objeto passado 
para a rotina de tratamento de evento e um MessageEvent e sua propriedade data contem um 
clone do valor que o script do worker passou para postMessageQ. 


WorkerGlobalScope 

EventTarget, Global 

Uma thread Worker e executada em um ambiente de execuQo completamente diferente da thread 
pai que a gerou. O objeto global de um worker e um objeto WorkerGlobalScope, de modo que esta 
pagina descreve o ambiente de execuQo “dentro” de um Worker. Como WorkerGlobalScope e um 
objeto global, ele herda o objeto Global do nucleo de JavaScript. 

Propriedades 

Alem das propriedades listadas aqui, WorkerGlobalScope tambem define todas as propriedades glo- 
bais do nucleo de JavaScript, como Math e ISON. 
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readonly WorkerLocation location 

Essa propriedade e como o objeto window.location Location: ela permite que um worker 
inspecione o URL do qual foi carregado e inclui propriedades que retornam partes individuals do 
URL. 

readonly WorkerNavigator navigator 

Essa propriedade e como o objeto window.navigator Navigator: ela define propriedades que 
permitem a um worker determinar em qual navegador esta sendo executado e se esta atual- 
mente online ou nao. 
readonly WorkerGlobalScope self 

Essa propriedade autoreferencial se refere ao proprio objeto global WorkerGlobalScope. E 
como a propriedade window do objeto Window na thread principal. 

Metodos 

Alem das propriedades listadas aqui, WorkerGlobalScope tambem define todas as fun^oes globais do 
nucleo de JavaScript, como isNaNQ e eval(). 

void clearInterval(long alca ) 

Esse metodo e exatamente como o metodo Window de mesmo nome. 

void clearTimeout(long alca) 

Esse metodo e exatamente como o metodo Window de mesmo nome. 

void closeQ 

Esse metodo coloca o worker em um estado “closing” especial. Nesse estado, ele nao vai disparar 
quaisquer timers nem eventos. O script continua a executar ate que retorne para o la<jo de eventos do 
worker, no ponto em que o worker para. 

void importScripts( string urls...) 

Para cada um dos urls especificados, esse metodo soluciona o URL em rekujao a location do worker 
e, entao, carrega o conteudo do URL e executa esse conteudo como codigo JavaScript. Note que esse 
e um metodo sfncrono. Ele carrega e executa cada arquivo por sua vez e nao retorna ate que todos os 
scripts tenham executado. (Contudo, se algum script lan(jar uma exce<jao, essa exceijao vai se propa- 
gar e impedir que quaisquer URLs subsequentes sejam carregados e executados.) 
void postMessage(any mensagem, [MessagePort[] portas ]) 

Envia uma mensagem (e opcionalmente um array de portas ) para a thread que gerou esse worker. 
Chamar esse metodo faz um evento message ser disparado no objeto Worker da thread pai e o objeto 
MessageEvent associado vai incluir um clone de mensagem como sua propriedade data. Note que em 
um worker, postMessageQ e uma funcjao global. 

long setlnterval(any rotinaTratamento, [any tempoLimite], any args...) 

Esse metodo e exatamente como o metodo Window de mesmo nome. 

long setTimeout(any rotinaTratamento, [any tempoLimite], any args...) 

Esse metodo e exatamente como o metodo Window de mesmo nome. 
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Construtoras 

WorkerGlobalScope inclui todas as construtoras do nucleo de JavaScript, como ArrayQ, DateQ 
e RegExpQ. Define tambem importantes construtoras do lado do cliente para XMLHttpRequest, 
FileReaderSync e ate para o proprio objeto Worker. 

Rotinas de tratamento de evento 

Voce pode registrar rotinas de tratamento de evento para workers configurando estas propriedades 
de tratamento de evento globais ou pode usar os metodos EventTarget implementados por Worker¬ 
GlobalScope. 
onerror 

Essa nao e uma rotina de tratamento de evento normal: e como a propriedade onerror de Win¬ 
dow, em vez da propriedade onerror de Worker. Quando ocorre uma exce^ao nao tratada no 
worker, esta funQo, se estiver definida, sera chamada com tres argumentos de string especifi- 
cando uma mensagem de erro, o URL de um script e um numero de linha. Se a fun^ao retorna 
false, o erro e considerado tratado e nao se propaga. Caso contrario, se essa propriedade nao 
e configurada ou se a rotina de tratamento de erro nao retorna false, o erro se propaga e causa 
um evento error no objeto Worker da thread pai. 
onmessage 

Quando a thread pai chama o metodo postMessageQ do objeto Worker que representa esse 
worker, faz com que um evento message seja disparado nesse WorkerGlobalScope. Essa fun^ao 
de tratamento de evento vai receber um objeto MessageEvent e a propriedade data desse obje¬ 
to vai corner um clone do argumento mensagem enviado pela thread pai. 

WorkerLocation 

o URL do script principal de um worker 

O objeto WorkerLocation referenciado pela propriedade location de um WorkerGlobalScope e 
como o objeto Location referenciado pela propriedade location de um Window: ele representa o 
URL do script principal do worker e define propriedades que representam partes desse URL. 

Os Workers diferem dos Windows porque nao podem ser navegados nem recarregados, de modo 
que as propriedades de um objeto WorkerLocation sao somente de leitura e o objeto nao implemen- 
ta os metodos do objeto Location. 

O objeto WorkerLocation nao converte automaticamente para uma string, como faz um objeto 
location normal. Em um worker, voce nao pode escrever simplesmente location quando quer dizer 
location.href. 

Propriedades 

Estas propriedades tern os mesmos significados das propriedades de mesmo nome do objeto Location, 
readonly string hash 

A parte do identificador de fragmento do URL, incluindo o sinal numerico a esquerda. 
readonly string host 

As partes do host e da porta do URL. 
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readonly string hostname 
A parte do host do URL. 
readonly string href 

O texto completo do URL passado para a construtora Worker (). Esse e o unico valor que o 
worker recebe diretamente de sua thread pai: todos os outros valores sao recebidos indireta- 
mente por meio de eventos message, 
readonly string pathname 

A parte do nome de caminho do URL. 
readonly string port 

A parte da porta do URL. 
readonly string protocol 

A parte do protocolo do URL. 
readonly string search 

A parte da pesquisa ou consulta do URL, incluindo o ponto de interrogate a esquerda. 

WorkerNavigator 

informa$oes do navegador para workers 

A propriedade navigator de um WorkerGlobalScope se refere a um objeto WorkerNavigator que e 
uma versao simplificada do objeto Navigator de um Window. 

Propriedades 

O significado de cada uma destas propriedades e igual ao que elas tern no objeto Navigator, 
readonly string appName 

Consulte a propriedade appName de Navigator, 
readonly string appVersion 

Consulte a propriedade appVersions de Navigator, 
readonly boolean onLine 

true se o navegador esta online e false, se nao esta. 
readonly string platform 

Uma string identificando o sistema operacional e/ou plataforma de hardware na qual o nave¬ 
gador esta sendo executado. 
readonly string userAgent 

O valor utilizado pelo navegador para o cabe^alho user-agent em requisites HTTP. 

XMLHttpRequest 

um pedido e resposta HTTP EventTarget 

O objeto XMLHttpRequest permite que JavaScript do lado do cliente fa?a requisites HTTP e 
receba respostas (as quais nao precisam ser XML) dos servidores Web. XMLHttpRequest e o tema 
do Capitulo 18, onde sao encontrados muitos exemplos de seu uso. 
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Crie um objeto XMLHttpRequest com a construtora XMLHttpRequestQ (consulte o quadro na Secjao 
18.1 para obter informafoes sobre como criar um objeto XMLHttpRequest no IE6) e entao o utilize 
como segue: 

1. Chame openQ para especificar o URL e o metodo (normalmente “GET” ou “POST”) da 
requisi^ao. 

2. Configure a propriedade onreadystatechange com a funpio que sera notificada do andamento 
da requisRao. 

3. Chame setRequestHeader( ), se necessario, para especificar parametros adicionais da requisipio. 

4. Chame send () para enviar a requisipio para o servidor Web. Se for uma requisipio POST, voce 
tambem pode passar um corpo da requisipio para esse metodo. Sua funpio de tratamento de 
evento onreadystatechange sera chamada a medida que a requisipio prosseguir. Quando rea- 
dyState for 4, a resposta esta completa. 

5. Quando readyState for 4, verifique o codigo de status para certificar-se de que a requisiQo 
foi bem-sucedida. Se foi, use getResponseHeaderQ ou getResponseHeadersQ para recuperar os 
valores do cabe^alho da resposta e use as propriedades responseText ou responseXML para obter 
o corpo da resposta. 

XMLHttpRequest define uma interface de nivel relativamente alto para o protocolo HTTP. Ele cui- 
da de detalhes como manipular redirecionamentos, gerenciar cookies e negociar conexoes de varias 
origens com cabepilhos CORS. 

Os recursos de XMLHttpRequest descritos anteriormente sao bem suportados por todos os nave- 
gadores modernos. Quando este livro estava sendo escrito, um padrao XMLHttpRequest Level 2 
estava em desenvolvimento e os navegadores estavam comepindo a implementa-lo. As propriedades, 
metodos e rotinas de tratamento de evento listadas a seguir incluem recursos XMLHttpRequest Le¬ 
vel 2, os quais podem ainda nao estar implementados por todos os navegadores. Esses recursos mais 
recentes estao marcados com “XHR2”. 

Construtora 

new XMLHttpRequestQ 

Essa construtora sem argumentos retorna um novo objeto XMLHttpRequest. 

Constantes 

Estas constantes definem os valores da propriedade readyState. Antes da XHR2, essas constantes 
nao eram amplamente definidas e a maior parte do codigo utiliza inteiros literais, em vez desses 
valores simbolicos. 
unsigned short UNSENT = 0 

Esse e o estado inicial. O objeto XMLHttpRequest acabou de ser criado ou foi redefinido com 
o metodo abort Q. 
unsigned short OPENED = 1 

O metodo openQ foi chamado, mas sendQ nao. A requisRao ainda nao foi enviada. 

unsigned short HEADERS_RECEIVED = 2 

O metodo sendQ foi chamado e os cabe^alhos de resposta foram recebidos, mas o corpo da 
resposta ainda nao foi recebido. 
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unsigned short LOADING = 3 

O corpo da resposta foi recebido, mas nao esta completo. 
unsigned short DONE = 4 

A resposta HTTP foi totalmente recebida ou parou por causa de um erro. 

Propriedades 

readonly unsigned short readyState 

O estado da requisicjao HTTP e da resposta do servidor. O valor dessa propriedade comep em 
0 quando um XMLHttpRequest e criado e aumenta para 4 quando a resposta HTTP comple- 
ta e recebida. As constantes listadas anteriormente definem os valores possiveis. 

O valor de readyState nunca diminui, a nao ser que abort() ou open() seja chamado em uma 
requisi^ao que ja esteja em andamento. 

Teoricamente, um evento readystatechange e enviado sempre que o valor dessa propriedade 
muda. Na pratica, contudo, um evento e realmente garantido somente quando readyState 
muda para 4. (Os eventos progress da XHR2 fornecem uma maneira mais confiavel de moni- 
torar o andamento de uma requisRao.) 
readonly any response 

Na XHR2, essa propriedade contem a resposta do servidor. Seu tipo depende da propriedade 
responseType. Se responseType for a string vazia ou “text”, a propriedade vai conter o corpo da 
resposta como uma string. Se responseType for “document”, essa propriedade sera uma repre- 
senta^ao analisada do corpo da resposta como um Document XML ou HTTP. Se responseType 
for “arraybuffer”, essa propriedade sera um ArrayBuffer representando os bytes do corpo da 
resposta. E se responseType for “blob”, essa propriedade sera um Blob representando os bytes 
do corpo da resposta. 
readonly string responseText 

Se readyState e menor do que 3, essa propriedade e a string vazia. Quando readyState e 3, 
essa propriedade retorna a parte da resposta recebida ate o momento. Se readyState e 4, essa 
propriedade contem o corpo da resposta completo. 

Se a resposta inclui cabe^alhos especificando uma codificacjao de caractere para o corpo, essa 
codificatjao e usada. Caso contrario, e suposta a codifica<jao Unicode UTF-8. 

string responseType 

Na XHR2, essa propriedade especifica o tipo de resposta desejado e determina o tipo da pro¬ 
priedade response. Os valores validos sao “text”, “document”, “arraybuffer” e “blob”. O padrao 
e a string vazia, que e sinonimo de “text”. Se essa propriedade for configurada, as propriedades 
responseText e responseXML vao lan(jar exceijoes e voce devera usar a propriedade da XHR2 
response para obter a resposta do servidor. 
readonly Document responseXML 

A resposta a requisitjao, analisada como um objeto Document XML ou HTML, ou null, caso 
o corpo da resposta nao esteja pronto ou nao seja um documento XML ou HTML valido. 
readonly unsigned short status 

O codigo de status HTTP retornado pelo servidor, como 200 para sucesso, 404 para erros 
“Not Found” ou 0, caso o servidor ainda nao tenha configurado um codigo de status. 
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readonly string statusText 

Essa propriedade especifica o codigo de status HTTP da requisi^ao pelo nome, em vez do 
numero. Ou seja, e “OK” quando status e 200 e “Not Found” quando status e 404. Essa 
propriedade e a string vazia se o servidor ainda nao configurou um codigo de status, 
unsigned long timeout 

Essa propriedade da XHR2 especifica um valor de tempo-limite, em milissegundos. Se a re- 
quisi^ao HTTP demorar mais do que isso para terminar, ela sera cancelada e o evento timeout 
sera disparado. Essa propriedade so pode ser configurada apos a chamada de open() e antes da 
chamada de send(). 

readonly XMLHttpRequestUpload upload 

Essa propriedade daXHR2 se refere a um objeto XMLHttpRequestUpload que define um conjun- 
to de propriedades de registro de rotina de tratamento de evento para monitorar o progresso 
de carregamento do corpo da requisi^ao HTTP. 

boolean withCredentials 

Essa propriedade da XHR2 especifica se credenciais de autentica^ao devem ser incluidas em 
requisites CORS e se os cabe^alhos de cookie em respostas CORS devem ser processados. O 
valor padrao e false. 

Metodos 

void abort() 

Esse metodo redefine o objeto XMLHttpRequest com um readyState igual a 0 e cancela qualquer 
atividade da rede pendente. Voce poderia chamar esse metodo, por exemplo, se uma requisite esti- 
vesse demorando demais e a resposta nao fosse mais necessaria. 

string getAllResponseHeadersf) 

Esse metodo retorna os cabe^alhos de resposta HTTP (com cabe^alhos de cookie e CORS filtrados) 
enviados pelo servidor ou null, se os cabe^alhos ainda nao foram recebidos. Os cabe^alhos sao retor¬ 
nados como uma unica string, com um cabecalho por linha. 

string getResponseHeader(string cabecalho) 

Retorna o valor de um cabecalho de resposta HTTP ou null, se os cabe^alhos ainda nao foram re¬ 
cebidos ou se a resposta nao inclui o cabecalho especificado. Os cabe^alhos relacionados a cookie e 
CORS sao filtrados e nao podem ser consultados. Se a resposta contiver mais de um cabecalho com 
o nome especificado, a string retornada vai incluir o valor de todos esses cabeqalhos, concatenados e 
separados por uma virgula e um espapa. 

void open(string metodo, string url, [boolean asslnc, string usudrio, string pass]) 
Esse metodo redefine o objeto XMLHttpRequest e armazena seus argumentos para uso posterior 
por send(). 

metodo e o metodo HTTP a ser usado para a requisipio. Os valores implementados com seguran^a 
incluem GET, POST e HEAD. As implementa^oes tambem podem suportar os metodos CON¬ 
NECT, DELETE, OPTIONS, PUT, TRACE e TRACK. 

url e o URL que esta sendo solicitado. Os URLs relativos sao solucionados da maneira normal, 
usando o URL do documento que contem o script. A polftica de seguranfa da mesma origem (con- 
suite a Sepio 13.6.2) exige que esse URL tenha os mesmos nome de host e porta do documento que 
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content o script que esta fazendo a requisi^ao. A XHR2 permite requisifoes de varias origens para 
servidores que suportam CORS. 

Se o argumento async for especificado e for false, a requisiqao sera executada de forma smcrona e 
o metodo send() vai bloquear ate que a resposta esteja completa. Isso nao e recomendado, exceto 
quando XMLHttpRequest e usado em um Worker. 

Os argumentos opcionais usuaiio e pass especificam um nome de usuario e uma senha para usar 
com a requisiqao HTTP 

void overrideMimeType(string mime ) 

Esse metodo especifica se a resposta do servidor deve ser interpretada de acordo com o tipo mime 
designado (e parametro de conjunto de caracteres, se isso for incluido), em vez de usar o cabeqalho 
Content-Type da resposta. 
void send(any coipo) 

Esse metodo faz uma requisiqao HTTP ser emitida. Se nao havia uma chamada anterior para open() 
ou, de forma mais geral, se readyState nao e 1, sendQ lanqa uma exce^ao. Caso contrario, faz uma 
requisiqao HTTP consistindo em: 

• O metodo HTTP, URL e credenciais de autoriza?ao (se houver) especificados na chamada 
anterior de openQ. 

• Os cabeqalhos da requisiqao, se houver, especificados pelas chamadas anteriores de setRequest- 
HeaderQ. 

• O argumento coipo passado para esse metodo. O coipo pode ser uma string ou um objeto 
Document especificando o corpo da requisiqao, ou pode ser omitido ou null, caso a requisiqao 
nao tenha corpo (como as requisites GET, que nunca tern corpo). Na XHR2, o corpo tam- 
bem pode ser um ArrayBuffer, um Blob ou um objeto FormData. 

Se o argumento assinc da chamada anterior de openQ era false, esse metodo bloqueia e nao retorna 
ate que readyState seja 4 e a resposta do servidor tenha sido totalmente recebida. Caso contrario, 
sendQ retorna imediatamente e a resposta do servidor e processada de forma assincrona, com as 
notificaqoes fornecidas por meio de rotinas de tratamento de evento. 
void setRequestHeader(string nome, string valor) 

setRequestHeaderQ especifica nome e valoi de um cabeqalho de requisiqao HTTP que devem ser in- 
cluidos na requisiqao feita por uma chamada subsequente a send (). Esse metodo so pode ser chamado 
quando readyState el- isto e, apos uma chamada de openQ, mas antes de uma chamada de sendQ. 

Se ja foi especificado um cabeqalho com o nome mencionado, o novo valor desse cabeqalho e o valor 
definido anteriormente, mais uma vfrgula, um espaqo e o valoi especificado nessa chamada. 

Se a chamada para openQ especifica credenciais de autorizaqao, XMLHttpRequest envia automatica- 
mente um cabeqalho de requisiqao Authorization apropriado. Entretanto, voce tambem pode anexar 
nesse cabefalho com setRequestHeaderQ. 

XMLHttpRequest configura “Content-Length”, “Date”, “Referer” e “User-Agent” automaticamen- 
te e nao permite que voce os falsifique. Existem varios outros cabeqalhos, incluindo cabeqalhos 
relacionados a cookies, que nao podem ser configurados com esse metodo. A lista completa esta na 
Seqao 18.1. 
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Rotinas de tratamento de evento 

O objeto XMLHttpRequest original definia apenas uma propriedade de tratamento de evento: 
onreadystatechange. A XHR2 expande a lista com um conjunto de rotinas de tratamento de evento 
progress muito mais faceis de usar. Voce pode registrar rotinas de tratamento configurando essas pro- 
priedades ou usando os metodos de EventTarget. Os eventos XMLHttpRequest sao sempre enviados 
no proprio objeto XMLHttpRequest. Eles nao borbulham e nao tern uma agao padrao para cancelar. 
Os eventos readystatechange tern um objeto Event associado e todos os outros tipos de evento tern 
um objeto ProgressEvent associado. 

Consulte a propriedade upload e XMLHttpRequestUpload para ver uma lista dos eventos que podem ser 

usados para monitorar o andamento de carregamentos HTTP. 

onabort 

Disparada quando uma requisigao e cancelada. 
onerror 

Disparada se a requisigao falha com um erro. Note que codigos de status HTTP como 404 
nao constituem um erro, pois a resposta ainda termina com sucesso. Contudo, uma falha de 
DNS ao tentar solucionar o URL ou um lago infinito de redirecionamentos fariam esse evento 
ocorrer. 
onload 

Disparada quando a requisigao termina com sucesso. 

onloadend 

Disparada quando a requisigao foi bem-sucedida ou falhou apos o evento load, abort, error 
ou timeout, 
onloadstart 

Disparada quando a requisigao comega. 

onprogress 

Disparada repetidamente (aproximadamente a cada 50ms), enquanto o corpo da resposta esta 
sendo baixado. 
onreadystatechange 

Disparada quando a propriedade readyState muda, principalmente quando a resposta esta 
completa. 
ontimeout 

Disparada se decorreu o tempo especificado pela propriedade timeout e a resposta nao esta 
completa. 

XMLHttpRequestUpload 

EventTarget 

Um objeto XMLHttpRequestUpload define um conjunto de propriedades de registro de rotinas 
de tratamento de evento para monitorar o andamento do carregamento de um corpo de requisigao 
HTTP. Nos navegadores que implementam a especificagao XMLHttpRequest Level 2, cada objeto 
XMLHttpRequest tern uma propriedade upload que se refere a um objeto desse tipo. Para monitorar 
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o andamento do carregamento da requisi^ao, basta configurar essas propriedades com as fun^oes 
de tratamento de evento apropriadas ou chamar os metodos EventTarget. Note que as rotinas de 
tratamento de evento de andamento de upload definidas aqui sao exatamente iguais as rotinas de 
tratamento de evento de andamento de download definidas no proprio XMLHttpRequest, exceto 
que nao ha uma propriedade onreadystatechange nesse objeto. 

Rotinas de tratamento de evento 

onabort 

Disparada se o carregamento e cancelado. 
onerror 

Disparada se o carregamento falha com um erro de rede, 
onload 

Disparada quando o carregamento e bem-sucedido. 
onloadend 

Disparada quando o carregamento termina, seja com sucesso ou nao. Um evento loadend 
sempre vai seguir um evento load, abort, error ou timeout, 
onloadstart 

Disparada quando o carregamento come^a. 
onprogress 

Disparada repetidamente (aproximadamente a cada 50ms), enquanto o carregamento esta 
ocorrendo. 
ontimeout 

Disparada se o carregamento e cancelado porque timeout de XMLHttpRequest expirou. 
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esparsos, 140 

expressoes de acesso a propriedade, 59 
funqoes atribuidas a elementos, 171 
inicializadores, 57 
iterando, 142-144 
com laqos for/each, 267-268 
com laqos for/in, 98 
com metodo jQuery.each(), 558 
Java, obtendo e configurando elementos com Java¬ 
Script no Rhino, 284 
lendo e gravando elementos, 138 
metodos, 144-148 
ECMAScript 5, 149-153 
metodos Array da ES5, 320, 515 
multidimensionais, 144 
objeto Array, 706-724 
metodo concat(), 146, 708 
metodo every(), 150, 709 
metodo filter!), 150, 710 
metodo forEach(), 149, 710 
metodo indexOf(), 711 
metodo isArray!), 156 
metodo join(), 145, 712 
metodo lastlndexOfJ), 713 
metodo map(), 150, 714 
metodo pop(), 715 
metodo push(), 715 
metodo reduce(), 716 
metodo reduceRight(), 717 


metodo reverse!), 145, 718 
metodo shift(), 718 
metodo slice!), 146, 719 
metodo some!), 151, 720 
metodo sort(), 145, 218, 721 
metodo splice! ), 147, 721 
metodo toLocaleString!), 722 
metodo toString!), 723 
metodo unshift(), 723 
metodos, 706 

metodos, chamando indiretamente em Node- 
Lists ou HTMLCollections, 357 
metodos push() e pop!), 147 
metodos unshift() e shift!), 148 
propriedade length, 706, 714 
reduce!) e reduceRight(), 151 
toString!) e toLocaleString!), 148 
objetos como arrays associativos, 117 
processando com funqoes, 187-188 
strings como, 38, 156 
tipados, 980 

tipados e ArrayBuffers, 672-676 
ArrayBuffers, 674 
eficiencia de arrays tipados, 673 
metodo set(), 674 
metodo subarray!), 674 
tipos de arrays tipados, 672 
arrays associativos, 117 
arrays esparsos, 137, 140 
arrays multidimensionais, 144 
aspas ( consulte sob a seqao Simbolos) 
associatividade, operador, 64 
ataques de negaqao de serviqo, 330 
atenqao, chamando para elementos de um documen- 
to, 426 
atribuiqao 

desestruturaqao, 265, 270-271 
propriedades, 119 

regras para sucesso ou falha de, 120 
propriedades de objeto, 119 
atribuiqao de desestruturaqao, 265 

usando com funqao Iterator () em laqos for/in, 
270-271 

atributo class, 10, 113, 133 
Array, 154 

elementos HTML, 358, 366 
testando objeto funqao real, 186 
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atributo configurable (propriedades), 113, 128 
atributo extensible usado com, 134 
exclusao de propriedades, 121 
atributo controls, elementos <audio> e <video>, 602 
atributo draggable, 463 
atributo dropzone, 465 

atributo e propriedade method, elementos de formu- 
lario, 389 

atributo enumerable (propriedades), 113, 128 
teste propertyIsEnumerable(), 122 
atributo extensible, 113, 134 
atributo href, elementos <a>, 307, 357 
atributo id, elementos HTML, 342 
atributo max-age, cookies, 582 
atributo name, elementos HTML, 343, 389 
configurando, criando propriedades no objeto 
Document, 356 

selecionando elementos pelo nome, 355 
atributo onchange, 307 
atributo onmousedown, elemento <div>, 458 
atributo path, cookies, 580 
configurando, 582 

atributo placeholder, campos de texto, 392 
atributo prototype, 132 
atributo sandbox, elemento <iframe>, 329 
atributo secure, cookies, 581, 582 
atributo src, elemento <script>, 305 
atributo style, 10 

atributo type, <script elements>, 306 
atributo value (propriedades), 128 
atributo value, cookies, 581, 582 
atributo writable (propriedades), 113, 128 
atributo extensible usado com, 134 
atributos, 365-368 

atributos de propriedade, 113, 128-131 
consultando e configurando, 128 
copiando, 130 

atributos HTML afetando reprodu^ao de audio e 
video, 604 

atributos HTML espelhados por propriedades de 
rotina de tratamento de evento, 307 
como nos Attr, 368 

configurando para rotinas de tratamento de even¬ 
to, 445 

conjunto de dados, 367 
elementos HTML, 894-897 
HTML, como propriedades de elemento, 365 
nomes de atributo CSS para objeto propriedades 
de anima^ao, 540 


objeto, 113, 132-135 
atributo class, 133 
atributo extensible, 134 
obtendo e configurando atributos CSS com 
j Query, 518 

obtendo e configurando atributos HTML com 
j Query, 517 

obtendo e configurando atributos que nao sao 
HTML, 366 

rotinas de tratamento de evento registradas como, 
escopo, 449 

atributos de conjunto de dados, 367 
usando para criar trocas de imagem, 600 
atributos graficos, API Canvas, 621 
atributos graficos, canvas 

utilitarios de gerenciamento de estado grafico, 622 
audio e video 

objeto Video, 982 
objetos MediaError, 954 
scripts, 601 

consultando status de midia, 604 
controlando reproduQo, 603 
eventos de midia, 606 
seleQo e carregamento de tipo, 603 
superclasse MediaElement, 949-954 
avalia^ao, modulos, 294 

B 

\b (caractere de backspace) em expressoes regulares, 
248 

background, propriedades de estilo CSS para, 416 
bancos de dados 

do lado do cliente, 690-697-698 
funcionalidade de banco de dados do lado do 
cliente em navegadores, 574 
bancos de dados de objeto, 690 
bancos de dados relacionais, 690 
bancos de dados SQL, 690 
bancos de dados Web, 574 
bate-papo 

cliente de chat baseado em WebSocket, 698-699 
cliente simples usando EventSource, 503 
servidor de chat Server-Sent Events personalizado, 
506 

servidor usando WebSockets e Node, 699-700 
beginPath(), CanvasRenderingContext2D, 618, 

857 
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bezierCurveTo( ), CanvasRenderingContext2D, 

629, 858 

biblioteca Closure, 331 

biblioteca excanvas.js, 320 

biblioteca Prototype, 330 

biblioteca Really Simple History (RSH), 337 

biblioteca RSH (Really Simple History), 337 

biblioteca Scriptaculous, estrutura Prototype, 424 

biblioteca Sizzle, 360 

bibliotecas 

compatibilidade, 320 

do lado do cliente, suportando efeitos visuais, 424 
gerenciamento de historico, 337 
bibliotecas de efeitos visuais, 424 
Binary Large Objects (consulte Blobs) 

Blobs, 676-684, 847 
arquivos como, 677—678 
baixando, 678-679 
construindo, 678-679 
lendo, 682-683 
obtendo, metodos para, 676 
URLs, 680-682 

exibindo arquivos de imagem soltos, 680 
usando, 676-677 
blocos de instrupio, 86 
bloqueando execu^ao de script, 311 
bookmarklets 

para texto atualmente selecionado, 398 
usando URLs javascript: para, 308 
booleanos, 28 
conversoes, 44 

conversoes de objeto para booleano, 48 
objetos wrapper, 42 
valores booleanos, 39 
borbulha, 313, 434 
eventos de mouse, 441 

eventos de teclado em documento e janela, 440 
eventos dinamicos, 536 
eventos disparados manualmente, 533 
local na propaga^ao de eventos apos a chamada de 
rotinas de tratamento de evento, 451 
tratamento de evento na jQuery, 527 
versao sem borbulha de eventos de mouse no IE, 
440 
bordas 

especificando cor da borda de elemento, 415 
especificando em CSS, 412 
no modelo de caixa CSS, 413 


botoes 

botoes de alternancia em formularios, 392 
botoes de pressao em formularios, 391 
elementos <button>, 387 

registrando rotinas de tratamento para evento 
click, 446 

rotina de tratamento de evento onclick, 308 
objeto Button, 848 
botoes de alternancia, 392 
botoes de pressao, 391 
buffers no interpretador de Node, 290 
byteLength, objeto ArrayBuffer, 845 
byteOffset, objeto ArrayBuffer, 845 

c 

cabe^alho de pedido Origin:, 327 
cabe^alho de resposta Access-Control-Allow-Origin, 
327 

cabefalhos, pedido e resposta HTTP, 482 
cabefalho Content-Length, 495 
cabefalho de respostas, 485 
cabe$alhos CORS (Cross-Origin Resource Sha¬ 
ring), 498 

configurando cabe^alho Content-Type de pedido 
POST, 489 

configurando cabe^alho de pedido, 483 
configurando para upload de arquivo de pedido 
POST, 493 

verificando cabe^alho de resposta Content-Type, 
488 

cabefalhos Authorization, 484 
cabefalhos Content-Type 

anulando tipo MIME incorreto na resposta, 488 
configurados automaticamente para pedido por 
XMLHttpRequest, 492 
pedidos HTTP, 483 

cabe^alhos CORS (“Cross-Origin Resource Sha¬ 
ring”), 498 
cache, 587 

(i consulte tambem cache de aplicativo) 
memoiza^ao de fun^oes, 191 
cache de aplicativo, 587-593 
atualizagoes, 589-593 

criando arquivo de manifesto de aplicativo, 587 
valores de propriedade de status, 592 
caixas de dialogo, 339-342 

caixa de dialogo HTML exibida com showModal- 
Dialog(), 340 
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repetidas, em ataques de cross-site scripting, 329 
repetidas, em ataques de negafao de servifo, 330 
caixas de dialogo modais, 340 

(i consulte tambem caixas de dialogo) 
call() e apply(), objeto Function, 165, 181-182 
restricpoes em subconjuntos seguros, 260 
caminhos 
canvas, 617 

atributos de desenho de linha, 634 
caminhos curvos, 629 
criando e renderizando, 850-851 
definiqao, 618 

determinando se o ponto esta no, 621, 861 
metodo beginPath(), 857 
metodo closePath(), 858 
testando se o evento de mouse e sobre o cami- 
nho atual, 648 
SVG, 613 

campos e metodos de classe (classes Java), 199 
campos e metodos de instancia (classes Java), 199 
cancelamento, eventos, 452 

atualizaqoes de cache de aplicativo, 592 
eventos textinput e keypress, 469 
canPlayType(), objeto MediaElement, 953 
CanvasRenderingContext2D 
metodos save() e restore!), 622 
capacidade de extensao de objetos, 802-803 
captura de evento, 435, 446, 451 
Internet Explorer, setCapture() para eventos de 
mouse, 456 

rotinas de tratamento de evento da jQuery e, 531 
capturando excegoes, 104 
caractere \s (espafo) em expressoes regulares, 248 
caracteres de controle de formato (Unicode), 22 
carregamento e execuqao asslncronos de scripts, 311 
Cascading Style Sheets - folhas de estilo em cascata 
(i consulte CSS) 

chacoalhando um elemento de um lado para outro 
(exemplo de anima$ao), 422-424 
chamadas de furujao, 94 

(i consulte tambem funqoes, chamando) 
como instru<joes de expressao, 86 
chamando funqoes, 161-165 
chamada de construtora, 165 
chamada de metodo, 162 
fun$ao j Query!), 512 
indiretamente, 165 

rotinas de tratamento de evento, 448-453 
checkValidity(), objeto FormControl, 915 


childElementCount, objeto Element, 363, 886-887 
Chrome, 459 

0 consulte tambem navegadores Web) 
evento textinput, 441 

implementa^ao da API Filesystem, 684-685 
JavaScript em URLs, 308 
versao atual, 319 
classe Element, 354 
classe Float32Array, 980 
classe Float64Array, 980 
classe Function, 29 
metodo toString(), 49 
classe Intl6Array, 980 
classe Int32Array, 980 
classe Int8Array, 673, 980 
classe Keymap para atalhos de teclado (exemplo), 
473-477 

classe Object, 74, 792-811 
fumjao create(), 115, 130, 795-796 
fun^ao defineProperties(), 129, 796-797 
funcpao defineProperty!), 99, 129, 131, 141, 
797-798 

fumjao freeze(), 134, 798-799 
fiincpao getOwnPropertyDescriptor(), 128, 131, 
799-800 

funcao getOwnPropertyNames(), 125, 800-801 
furujao getPrototypeOf(), 132, 801-802 
fumjao isExtensible(), 134, 802-803 
fumjao isFrozen(), 134, 803-804 
funcao isSealed(), 804-805 
fumjao keys(), 125, 805-806 
funcao preventExtensions(), 134, 805-806 
funcjao seal(), 134, 807-808 
metodo hasOwnProperty(), 122, 801-802 
metodo isPrototypeOf(), 132, 803-804 
metodo propertyIsEnumerable(), 122, 806-807 
metodo toLocaleString(), 135-136, 807-808 
metodo toString(), 135-136, 808-809 
mdtodo valueOf(), 136, 809-810 
metodos, 135, 791-792 
metodos estaticos, 791-792 
propriedade constructor, 791-792, 795-796 
propriedade prototype, 115 
classe RegExp, 29 
metodo toString(), 49 
classe Uintl6Array, 980 
classe Uint32Array, 980 
classe Uint8Array, 980 
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classes, 29, 193-240 

(consulte tambem modulos; objetos) 
aumentando pela adi$ao de metodos no prototi- 
po, 202 

construtoras, 195 
e identidade de classe, 197 
propriedade constructor, 197 
defini^ao, exemplo, 8 
defini^ao, varias janelas e, 350 
definindo para propriedades CSS, 406 
determinando a classe de um objeto, 204-209 
tipagem de pato, 207 
usando a propriedade constructor, 205 
usando nome da construtora como identifica- 
dor de classe, 205 
usando o operador instanceof, 204 
em ECMAScript 5, 232 
definindo classes imutaveis, 233-235 
descritores de propriedade, 238—240 
encapsulando estado de objeto, 235 
impedindo extensoes de classe, 236 
subclasses, 237 

tornando propriedades nao enumeraveis, 232 
estilo Java, em JavaScript, 199-202 
definindo classe complexa, 200 
funqao definindo classes simples, 199 
recursos nao suportados em JavaScript, 202 
hierarquia de classes parcial de nos de documento, 
353 

internas, predefinidas automaticamente em todas 
as janelas, 350 

consultando e configurando campos estaticos 
no Rhino, 283 
instanciando, 283 
obtendo a classe de um objeto, 133 
obtendo e configurando classes CSS, 518 
operador instanceof, 74 

programaqao orientada a objetos com, 209-222 
classe Set (exemplo), 209-211 
emprestando metodos, 218 
estado privado, 220 
metodos de comparaqao, 215—218 
metodos de conversao padrao, 213 
sobrecarga de construtora e metodos fabrica, 
221 

tipos enumerados (exemplo), 211-213 
prototipos e, 194 


script de classes CSS, 426-429 
subclasses, 222 

composiqao versus subclasses, 227 

construtora e encadeamento de metodos, 225— 
227 

definindo, 223 

hierarquias de classes e classes abstratas, 228- 
232 

classes de caractere em expressoes regulares, 247 
classes estilo Java em JavaScript, 199-202 
classes imutaveis, definindo, 233—235 
classificaqao sem diferencia^ao de maiusculas e mi- 
nusculas, arrays de strings, 146 
classificando objetos para comparaqao, 216 
clausulas case em instru^oes switch, terminando com 
instrugao break, 94 
clausulas catch (try/catch/finally), 104 
varias clausulas catch, 276 
clausulas else em instrufdes if aninhadas, 91 
clausulas finally (try/catch/finally), 104 
clearData(), objeto DataTransfer, 882-883 
clearRect(), CanvasRenderingContext2D, 631, 858 
clearWatch(), objeto Geolocation, 917 
click() metodo, 526 
objeto Element, 889-890 

clip(), CanvasRenderingContext2D, 634, 638, 858 
clones, estruturados, 657 
clones estruturados, 657 

closePath(), CanvasRenderingContext2D, 619, 858 
closures, 175-180 

acesso a argumentos da fun<jao externa, 180 
combinando com metodos getter e setter de pro¬ 
priedade, 178 

funqoes de atalho (closures de expressao), 275 
metodos de acesso a propriedade privada usando, 
179, 220 

regra de escopo lexico para fimqoes aninhadas, 

176 

usando na funqao uniquelnteger() (exemplo), 

177 

closures de expressao, 275 

codificando corpo de pedido HTTP, 489-494 

codigos de status, Ajax na jQuery, 546 

cole<pao document.all [ ], 360-361 

coleta de lixo, 29 

comandos 

ediqao de texto, 400 

objeto ConsoleCommandLines, 867 
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codigo JavaScript em URLs, 307 
condicionais no IE, 323 
createComment(), objeto Document, 372 
criando no Comment, 878 
estilos de, 23 
no Comment, 865 
tratamento da CSS de, 403 
Comet, 478 

mecanismos de transporte do, 480 
Server-Sent Events com, 502-508 
comparaqao de padroes, 38 

(consulte tambem expressoes regulares) 
metodos de string para, 253 
comparaqoes 
objetos, 44 
valores primitivos, 43 
comparaqoes de igualdade 

binario em ponto flutuante e erros de arredonda- 
mento, 34 

conversoes de tipo e, 46 

compareDocumentPosition(), objeto Node, 962 
compatibilidade e operaqao em conjunto, 317-324 
bibliotecas de compatibilidade, 320 
comentarios condicionais no Internet Explorer, 
323 

modo Quirks e modo Standards, 322 
suporte para navegador graduado, 321 
teste de navegador, 322 
teste de recursos, 321 

compatMode, objeto Document, 322, 876 
compondo no canvas, 643-646, 852-853 
de forma local em vez de globalmente, 645 
componentes de editor em estruturas, 400 
composifao 

subclasses versus, 227 

usando com aplicaqao parcial de fumjoes, 191 
comprimento de uma string, 35 
determinando, 37 
concatenando strings, 37 
conjuntos, classe Set (exemplo), 209—211 
conjuntos de caractere, 21 
console API, 3 
constante E (Math), 778 
constante LN10 (Math), 779 
constante LN2 (Math), 779 
constante LOG10E (Math), 780 
constante LOG2E (Math), 780 


constante PI (Math), 781 
constante SQRT1_2 (Math), 783-784 
constante SQRT2 (Math), 784-785 
constantes 

campos declarados finais em classes Java, 202 
escopo de bloco e uso da palavra-chave let, 262 
constantes EIAVE, objeto MediaElement, 949 
construtora Array(), 138 
construtora Audio(), 602 
construtora Boolean!), 42 
construtora Date(), 726 
construtora Error(), 753 
construtora Function(), 185 

remo^ao em subconjuntos seguros, 260 
construtora Number(), 42, 785-786 
construtora String(), 42 
construtora Worker(), 669 
construtora XMLElttpRequest(), 669 
construtoras, 158, 766-767 
chamando, 165 
classe, 195 

e identidade de classe, 197 
propriedade constructor, 197 
definidas, 29 

do lado do cliente, no objetos WorkerGlobalSco- 
pe, 669 

janelas interativas e, 350 
para arrays tipados, 981 

propriedade constructor de um objeto, 795-796 
propriedade prototype, 132 
prototipos de objeto e, 115 
sobrecarga, 221 

usando nome de, como identificador de classe, 
205 

contentDocument, objeto IFrame, 923 
contentWindow, objeto IFrame, 348, 923 
conteudo 

gerando conteudo de documento no momento do 
carregamento, 310 

script do lado do cliente simples para revelar, 301 
conteudo que pode ser editado em documentos, 
398-401 

contexto de chamada, 158 
contexto de execuqao, 344 
rotinas de tratamento de evento, 448 
contextos de navegaqao, 344 

contraries e possessivos em strings no idioma ingles, 
36 

controles ActiveX, scripts, 328 
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conversoes expllcitas de tipos, 46-48 
cookies, 574, 579-585 
armazenamento com, 583-585 
armazenando, 581 
atributos, dura^ao e escopo, 580 
determinando se estao habilitados, 580 
lendo, 582 

limita<joes no tamanho e numero de, 583 
cookiesEnabled(), objeto Navigator, 339 
coordenadas 
canvas, 623 
imagens, 641 

convertendo coordenadas do documento para 
porta de visualiza^ao, 386 

documento, como deslocamento de barra de rola- 
gem, 384 

documento e porta de visualiza£ao, 380-381 
objeto Geocoordinates, 917 
posRao do mouse em coordenadas da janela, 439 
coordenadas da janela, 380—381 
coordenadas da porta de visualiza^ao, 380-381 
posi^oes de elemento na, 382 
Coordinated Universal Time (UTC), 726 

degrades no canvas, 632 
especificando com CSS, 415 
especificando no canvas, 631 
especificando para caminhos no canvas, 851-852 
propriedade background-color, 410 
propriedade shadowColor, 639 
correfao ortografica em navegadores, 399 
createComment(), objeto Document, 878 
createDocument(), DOMImplementation, 884- 
885 

createDocumentFragment(), objeto Document, 
375, 878 

createDocumentType(), objeto DOMImplementa¬ 
tion, 884-885 

createElement(), objeto Document, 372, 879 
createElementNSQ, objeto Document, 372, 613, 
879 

createEvent(), objeto Document, 879 
createHTMLDocument(), objeto DOMImplemen¬ 
tation, 884-885 

createImageData(), CanvasRenderingContext2D, 
647, 858 

createLinearGradient(), CanvasRenderingContex- 
t2D, 633, 858 

createObjectURL(), objeto URL, 982 


createPattern(), CanvasRenderingContext2D, 633, 
859 

createProcessingInstruction(), objeto Document, 
879 

createRadialGradient(), CanvasRenderingContex- 
t2D, 633, 859 

createStyleSheet(), objeto Document, 431 
createTextNode(), Document, 372, 879 
Crockford, Douglas, 116, 259, 261 
“Cross-Origin Resource Sharing”, 327 
cross-site scripting (XSS), 328 
CSS (Cascading Style Sheets - folhas de estilo em 
cascata), 402-432 

classes, selecionando elementos por, 358 
consultando estilos calculados, 425-426 
cor, transparency e translucidez, 415 
especificafoes de cor, 632 
estilos, especificados para objeto Element, 300 
exibRao e visibilidade de elemento, 415 
modelo de caixa e detalhes do posicionamento, 
413 

novos recursos revolucionarios da, 407-408 
obtendo e configurando atributos CSS, 518 
obtendo e configurando classes CSS, 518 
pagina Web estilizada com CSS (exemplo), 406 
posicionando elementos, 409-412, 460-462 
propriedades de estilo importantes, 407-408 
script de classes CSS, 426-429 
script de estilos em linha, 420-424 
animafoes, 422-424 
script de folhas de estilo, 429-432 
seletores, 359 

sobreposRao de janelas translucidas (exemplo), 
418-420 

uso com JavaScript para apresenta<joes de estilo de 
HTML, 10 
visao geral, 403 

visibilidade parcial, overflow e clip, 417 
CSSOM-View Module, 380-381 
currentSrc, objeto MediaElement, 950 
currentTime, objeto MediaElement, 603, 951 
currying, 183 

cursor, abrindo em IndexedDB, 690-691 
curvas, desenhando e preenchendo no canvas, 
629-631, 858 
curvas Bezier 

desenhando no canvas, 629—631 
metodo quadraticCurveTo(), 862 
customError, objeto Form Validity, 916 
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D 

dados binarios 

Blobs e APIs que os utilizam, 676 
em respostas HTTP, 488 
datas e hora 
classe Date, 29 
metodo toString(), 49 
objeto Date, 726-750 
conversoes em strings e numeros, 50 
metodo getDate(), 730 
metodo getDay(), 731 
metodo getFullYear(), 731 
metodo getHours(), 731 
metodo getMilliseconds(), 731 
metodo getMinutes(), 732 
metodo getMonth(), 732 
metodo getSeconds(), 732 
metodo getTime(), 732 
metodo getTimezoneOffset(), 733 
metodo getUTCDate(), 733 
metodo getUTCDay(), 734 
metodo getUTCFullYear(), 734 
metodo getUTCHours(), 734 
metodo getUTCMilliseconds(), 734 
metodo getUTCMinutes(), 735 
metodo getUTCMonth(), 735 
metodo getUTCSeconds(), 735 
metodo getYear(), 735 
metodo now(), 736 
metodo parse(), 736 
metodo seMilliseconds(), 738 
metodo setDate(), 737 
metodo setFullYear(), 737 
metodo setHours(), 738 
metodo setMinutes(), 739 
metodo setMonth(), 739 
metodo setSeconds(), 740 
metodo setTime(), 740 
metodo setUTCDate(), 740-741 
metodo setUTCFullYear(), 740-741 
metodo setUTCHours(), 742 
metodo setUTCMilliseconds(), 742 
metodo setUTCMinutes(), 743 
metodo setUTCMonth(), 743 
metodo setUTCSeconds(), 744 
metodo toDateString(), 744 
metodo toGMTString(), 745 
metodo toISOString(), 745 


mdtodo toJSON(), 746 
metodo toLocaleDateString(), 746 
metodo toLocaleString(), 747 
metodo toLocaleStringTime(), 747 
metodo toString(), 747 
metodo toTimeString(), 748 
metodo toUTCString(), 748 
metodo UTC(), 749 
metodo valueOf(), 49, 750 
mdtodos, 727 
metodos estaticos, 729 
propriedade prototype, 115 
setYear() (desaprovado), 744 
serializando objetos Date em strings de data com 
formato ISO, 135 
tutorial rapido sobre, 34 

declarafoes de leitura antecipada em expressoes re- 
gulares, 252 

dedara^oes de leitura antecipada negativa em expres¬ 
soes regulares, 252 

dedara^oes de leitura antecipada positiva em expres¬ 
soes regulares, 252 
declaraqoes doctype 

modo Quirks e modo Standards, 322 
rigor das, 359 

defaultCharset, objeto Document, 876 
defaultPlaybackRate, objeto MediaElement, 604, 

951 

defaultPrevented, objeto Event, 452, 900 
defaultSelected, objeto Option, 964 
deleteRule(), objeto CSSStyleSheet, 430, 872 
depurando threads Worker, 671 
desabilitando an imagoes na jQuery, 537 
descritores de propriedade, 128, 799-800 
funcoes utilitarias para, 233 
obtendo para propriedade nomeada de um objeto, 
128 

utilitarios de propriedades de ECMAScript 5, 
238-240 

desenhando contextos de objeto, 616 
designMode, objeto Document, 399, 877 
deslocamentos de rolagem, 455 
detecQo de acertos, 648-649 
DHTML (Dynamic HTML), 302 
dialogArguments, objeto Window, 340, 986 
diferencia^ao de maiusculas e minusculas em Java¬ 
Script, 21 

nomes de propriedade, 366 
digitos hexadecimais, especificando cores RGB, 416 
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dimensoes, canvas, 623 
diretiva use strict, 108 
diretivas, 108 
disparando eventos, 533 

impedindo a (Query de disparar eventos relacio- 
nados a Ajax, 557 

disparo de evento sincrono na jQuery, 533 
dispatchEvent(), objeto EventTarget, 906 
dispatchFormChange(), objeto Form, 913 
dispatchFormlnputj), objeto Form, 913 
dispositivos moveis, eventos, 436, 444 
divisao por zero, 33 
DnD (consulte arrastar e soltar) 
documentElement, objeto Document, 357, 381— 
382, 877 

documentos, 351—401 

alterando a estrutura usando jQuery, 523—526 
associando folha de estilo CSS a, 404 
atributos de elementos, 365—368 
carregando novos, 335 
consultando texto selecionado, 397 
conteudo de elemento, 368-372 
conteudo que pode ser editado, 398-401 
criando, inserindo e excluindo nos, 372-377 
criando nos, 372 
inserindo nos, 373 
removendo e substituindo nos, 374 
usando DocumentFragments, 375 
documentos HTML aninhados, 344 
elementos como propriedades do objeto Window, 
342 

estrutura e como percorrer, 360-365 

documentos como arvores de elementos, 361— 
365 

documentos como arvores de n6s, 360-361 
eventos load, 453-454 
formularios HTML, 387-394 
geometria e rolamento de documento e elemento, 
380-386 

gerando conteudo no momento do carregamento, 
310 

gerando sumario (exemplo), 377-381 
JavaScript em documentos Web, 302 
metodo write(), 396 
origem de, 326, 576 
propriedades Document, 395 
selecionando elementos em, 354-361 
visao geral do DOM, 352 


documentos Web 
JavaScript em, 302 
Dojo, 330 

biblioteca Sizzle, 360 
dojox.secure, 261 
DOM (Document Object Model) 

cancelamento de evento na versao draft do modu¬ 
lo Events atual, 452 

especificagao DOM Level 2 Events, 317 
especificagao DOM Level 3 Events, 435, 440, 441 
metodo proposto, 904 
propriedade key, 473 
propriedades propostas, 903-904 
evento textinput, 469 
implementaqao de tipos como classes, 364 
objetos XML e padrao E4X, 277 
visao geral, 352 
dominios 

atributo dominio, cookies, 580 
configurando, 582 

problemas com politica da mesma origem e sub- 
dominios, 327 

drawlmage(), CanvasRenderingContext2D, 641, 
859 

dropEffect, objeto DataTransfer, 464, 872 
duraqao, efeitos animados, 537, 940 

passando para metodos de efeitos da jQuery, 538 
Dynamic HTML (DHTML), 302 


E/S 

assincrona, script com Node, 288-296 
cliente HTTP (exemplo), 294-296 
servidor HTTP (exemplo), 292-294 
E/S assincrona 

scripts com Node, 288-296 

modulo de utilitarios de cliente HTTP (exem¬ 
plo), 294-296 

servidor HTTP (exemplo), 292-294 
XMLHttpRequest e especificaqoes da API File, 
Version 2, 443 

E4X (ECMAScript for XML), 267-268 
introduqao a, 276-280 
ECMAScript, 2 
extensoes de JavaScript, 258 
ECMAScript 5 
classes em, 232 

definindo classes imutaveis, 233-235 
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definindo propriedades nao enumeraveis, 232 
descritores de propriedade, 238-240 
encapsulando estado de objeto, 235 
impedindo extensoes de classe, 236 
subclasses, 237 

literals RegExp e criadio de objetos, 246 
metodos de array, 149-153, 155, 515 
palavras reservadas, 24 
ECMAScript for XML (consulte E4X) 
efeitos colaterais 

expressoes case contendo, 94 
expressoes com, 85 
operador, 63 

efeitos de desaparecimento gradual 
enfileirados, metodo animate() e, 541 
fadeTo(), 538 

metodos fadeln() e fadeOut(), 537, 538 
efeitos de indistinqao 

indistinqao de movimento com ImageData, 647 
propriedade shadowBlur no canvas, 639 
efeitos visuais 

indistimjao de movimento de elementos graficos 
do canvas com ImageData, 647 
metodos da jQuery para, 537, 940 
metodos da jQuery para efeitos simples, 538 
trocas de imagem, 600 

effectAllowed, objeto DataTransfer, 463, 465, 872 
elementFromPoint(), Document, 383, 879 
elemento Select, 393, 970-971 
elementos 
array, 137 

atributos como nos Attr, 368 
atributos de, 365-368 
atributos de conjunto de dados, 367 
nao HTML, obtendo e configurando, 366 
consultando a geometria de, 382 
conteudo, 368 
conteudo como HTML, 369 
conteudo como nos Text, 371 
conteudo como texto puro, 370 
copiando com jQuery, 525 
documento, como propriedades Window, 342 
documentos como arvores de, 361-365 
elementos e atributos HTML, 894—897 
empacotando em outros elementos, usando 
jQuery, 525 
estilo calculado, 405 
excluindo usando jQuery, 526 
formulario HTML, 387 


geometria e rolamento, 380-386 
inserindo e substituindo em documentos com 
jQuery, 523 

metodos de elemento da jQuery, 934 
midia, 949-954 

obtendo e configurando conteudo, 520 
obtendo e configurando dados de elemento, 522 
obtendo e configurando geometria, 520 
os elementos selecionados na jQuery, 514 
posicionando com CSS, 409 
propriedades de exibiqao e visibilidade (CSS), 415 
selecionando elementos de documento, 354 
selecionando elementos de formulario HTML, 
388 

tamanho, posicionamento e transbordamento, 
384 

elementos <a> 
atributo href, 307, 357 

tendo atributo name em vez de atributo href, 357 
elementos <applet>, 523 
elementos <audio>, 601 
atributo controls, 602 
eventos, 442 

elementos <body>, rotinas de tratamento de evento 
em, 445 

elementos <canvas>, 616 
objeto contexto, 622 
elementos <checkbox>, 392 
elementos <embed>, 523 
elementos <form> 
atributo method, 389 

atributos action, encoding, method e target, 389 
configurando atributos form-submission de, 365 
disparando evento submit em, 534 
elementos <frame> e <frameset> (desaprovados), 

344 

elementos <html>, atributo manifest, 587 
elementos <iframe>, 326 
atributo name, 345 
atributo sandbox em HTML5, 329 
com nome e atributo id, tornando-se o valor de 
variavel global, 344 
conteudo retornando de, 567 
documentos aninhados em documentos HTML, 
344 

excluindo para quadros fechados, 347 
historico de navegaqao e, 336 
propriedade contentWindow, 348 
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propriedades de documento para, referindo-se ao 
objeto Window, 356 

tornando possivel editar documento em, 399 
transporte Ajax com, 479 
usando em gerenciamento de historico, 337 
elementos <input>, botoes definidos como, 391 
uploads de arquivo com, 492 
elementos <link>, objetos Element representando, 

429 

elementos <object>, 523 
exibindo imagens SVG, 608 
elementos <option>, 922 
elementos <radio>, 392 
elementos <script>, 301 
atributo src, 305 
atributo type, 306 
atributos async e defer, 311,316 
HTTP por, JSONP, 500-502 
incorporando JavaScript em HTML, 9, 303-304 
script de HTTP com, 488 
texto em, 371 
transporte Ajax com, 479 
elementos <source>, 601 
elementos <style> 

englobando folha de estilo CSS em, 404 
objetos Element representando, 429 
elementos <svg:path>, 613 
elementos <textarea>, 393 
elementos <video>, 601 
atributo controls, 602 
eventos, 442 

elementos de formulario text-input 

navegadores disparando evento input em, 438 
elementos FileUpload, propriedade value, 326 
elementos graficos, 599, 616 
(consulte tambem API Canvas) 
script de imagens, 599 
SVG (Scalable Vector Graphics), 608-616 
elementos graficos em 3D para elemento <canvas>, 
617, 673 

elementos Text e Textarea, formularios, 390 
elementos<img>, 599 
exibindo imagens SVG, 608 
transporte Ajax e, 479 
emprestando metodos, 218 
encadeamento de construtoras, 222 
de subclasse para superclasse, 225—227 
encadeamento de metodos, 164 

de subclasse para superclasse, 225—227 


encadeamento de prototipos, 115 
encadeando, construtora e metodo, de subclasse na 
superclasse, 225-227 
encadeando metodos, 164 
encapsulamento 

estado de objeto, em ECMAScript 5, 235 
variaveis de estado, 220 
entrada do usuario 
eventos de texto, 469 
filtrando, 469-471 
enumerando propriedades, 123—125 
ordem, em lafos for/in, 99 
equipamentos iPhone e iPad da Apple, eventos de 
gesto e toque, 444 

classe Error, 29, 104 
objeto Error, 753-755 
metodo toString(), 755 
propriedade javaException, 285 
propriedade message, 755 
propriedade name, 755 
propriedade access, 120 
rotinas de tratamento de erro, semelhanfa com 
eventos, 437 

tratando em objetos Window, 342 
erros de arredondamento, mimeros binarios em pon- 
to flutuante e, 34 
erros em navegadores, 317 
testando, 322 
erros Web, 479 
ES5 (consulte ECMAScript 5) 
escopo, variavel, 30, 52—55 
closures, 175-180 
cookies, 580 

encadeamento de escopo, 54 
escopo de armazenamento, 575, 576 
escopo e i$amento de funfao, 53, 160 
fun<joes aninhadas, 161 
fun<joes como namespaces, 173 
fun<joes de tratamento de evento, 449 
fiin^oes JavaScript e, 158 
objeto WorkerGlobalScope, 993 
sessionStorage, 578 
threads Worker, 667 
userData do IE, 586 
variaveis como propriedades, 54 
variaveis definidas com a palavra-chave let, 263 
escopo de bloco, 53 

falta de, tratando com a palavra-chave let, 262 




1018 fndice 


escopo de funQo, 30 

como namespace privado em modulos, 242-244 
e ifamento, 53 
escopo lexico, 30, 54,175 
e fumpoes compartilhadas entre quadros ou jane- 
las, 348-349 

regras para funcoes aninhadas, 176 
espaipo de cor RGB A, 416 
espaipo em branco 

correspondendo a expressoes regulares, 248 
em codigo JavaScript, 22 
especifica$ao da API File, 443 
especifica^ao de cor HSL (matiz-saturaipao-valor), 
416 

especifica^ao de cor HSLA (matiz-satura^ao-valor- 
-alfa), 416 

especifica^ao de unidade para propriedades de estilo 
CSS, 418, 421 

especifica^ao Web Workers, 665-672 
acesso a URLs de Blob, 680 
depurando workers, 671 
escopo de Worker, 667 

fazendo XMLHttp Requests sincronos na (exem- 
plo), 671 

objetos Worker, 666 
recursos de worker avamjados, 669 
usando API de sistema de arquivos sincrona com 
threads worker, 689 

worker para processamento de imagem (exemplo), 
669 

estado grafico (canvas), 621, 854 
salvando, 854, 863 

utilitarios de gerenciamento de estado, 622 
estilos, cascata de, 404 
estilos calculados, 405, 518 
consultando, 425-426, 425 
estilos em linha, script, 420-424 
animates em CSS, 422-424 
configurando ao consultar estilos calculados, 425 
estouro, 32 
estouro negativo, 32 

estrutura e navegaipao (objetos Document), 360- 
365 

documentos como arvores de elementos, 361— 
365 

documentos como arvores de nos, 360-361 

documentos como arvores de elementos, 361-365 
documentos como arvores de nos, 360-361 


modo de exibi<jao geometrica baseada na coorde- 
nada do documento versus, 380—381 
representa<pao de documentos HTML, 352 
estrutura Prototype, biblioteca Scriptaculous, 424 
estruturas, do lado do cliente, 320, 330 
estruturas de controle, 6, 85 
(consulte tambem instruq:6es) 
evento dblclick, 439, 454 
evento DOMContentLoaded, 316, 438, 453 
evento orientationchanged, 444 
eventos, 433-477 
a$oes padrao associadas aos, 435 
Ajax na jQuery, 556 
armazenamento, 578, 972-973 
arrastar e soltar, 462-469 
carregamento de documento, 453-454 
categorias de, 436 

chamada de rotinas de tratamento de evento, 
448-453 

createEvent(), objeto Document, 879 
defini<pao, 433 
destino de evento, 433 
DOM (Document Object Model), 441 
emissores de evento em Node, 289 
evento hashchange, 657 
eventos abort HTTP, 497 
eventos progress HTTP, 494-497 
eventos timeout HTTP, 497 
HTML5, 442 

implementando receptores de evento Java com 
JavaScript no Rhino, 284 
independentes de dispositivo, 324 
jQuery, 939 
media, 606, 952 
message, 662, 666, 955, 956 
mouse, 454-458 
mousewheel, 459-462 
objeto ErrorEvent, 897 
objeto HashChangeEvent, 919 
objetos evento, 434 
popstate, 966 
progress, 967 

propagaQo de eventos, 434 
registrando rotinas de tratamento de evento, 
444-448 

Server-Sent Events com Comet, 502-508 
suportados por objetos Document, 882 
teclado, 472-477 
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testando se evento de mouse e sobre o caminho 
corrente no canvas, 648 

testando se o evento de mouse e sobre pixel pinta¬ 
do no canvas, 649 
texto, 469-472 
tipo ou nome de evento, 433 
tipos de, 435 

tipos de evento legados, 437 
touchscreen e mobile, 444 
transi^ao de pagina, 965 
tratando com jQuery, 526-536 

anulando o registro rotinas de tratamento de 
evento, 532 

disparando eventos, 533 
eventos dinamicos, 535 
eventos personalizados, 535 
metodos de registros de rotina de tratamento de 
evento, 526 
objeto Event, 528 

registro de rotina de tratamento de evento avan- 
fada, 530 

tratando de eventos de cache de aplicativo, 590- 
593 

visao geral, 312 
WebSocket, 697-698 
eventos blur, 391, 437 
alternativa de borbulha para, 441 
registro de rotina de tratamento de evento com 
jQuery, 527 
eventos click, 454 
propriedade detail, 439 
registrando rotinas de tratamento no elemento 
botao para, 446 

registrando rotinas de tratamento para, 11 
eventos contextmenu, 439, 454 
eventos de entrada 

dependentes e independentes de dispositivo, 436 
disparados em elementos de entrada de texto de 
formulario, 438 

eventos de entrada de texto, 469-472 
filtrando entrada do usuario (exemplo), 469-471 
suporte para, especificaqao DOM Events, 441 
usando evento propertychange para detectar, 472 
eventos de gesto e toque, Safari em iPhone e iPad da 
Apple, 444 

eventos de mouse, 439, 454-458 
aqoes padrao que podem ser evitadas, 454 
especificafao DOM Level 3 Events, 441 


registrando rotinas de tratamento de evento com 
j Query, 526 

testando se o evento e sobre o caminho corrente 
no canvas, 648 

testando se o evento e sobre pixel pintado no can¬ 
vas, 649 

eventos de mudanfa de estado, 437 
eventos de notificafao de ciclo de vida, 442 
eventos de tecla, 440 
eventos de teclado, 472-477 
classe Keymap para atalhos de teclado (exemplo), 
473-477 

entrada de texto, 469 
keydown e keyup, 473 

registro de rotina de tratamento de evento com 
j Query, 527 

eventos dependentes e independentes de dispositivo, 
436 

eventos dinamicos, 535 
eventos especificos de API, 437 
eventos focus, 391, 437 
borbulhando eventos focusin e focusout, 441 
foco do teclado para elementos do documento, 
440 

registro de rotina de tratamento de evento com 
j Query, 527 

eventos hashchange, 657 
eventos load, 310, 438 
documento, 453-454 
propagaqao de eventos, 451 
objeto FileReader, 682-683 
registrando rotina de tratamento de evento para, 
11 

rotina de tratamento de evento onload, objeto 
Window, 301 

suporte do navegador para, 316 
eventos mousewheel, 440, 441, 459-462 
trabalhando com, capacidade de funcionamento 
em conjunto, 459 
tratando, 460-462 

eventos personalizados, usando jQuery com, 535 
eventos popstate, 657 
eventos progress, 443, 485, 494-497 
HTTP, 494 
upload, 495 

XMLHttpRequest Level 2 (XHR2), 1001 
eventos progress de carregamento, 495 
eventos readystatechange, 453, 486 
eventos resize, janelas, 439 
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eventos unload, 438 
objeto BeforeUnloadEvent, 847 
eventos wheel (consulte eventos mousewheel) 
exce^oes 

Java, tratando como excegao de JavaScript no Rhi¬ 
no, 285 

langadas por objetos Worker, 666 
langando, 104 

tratando com instrugoes try/catch/finally, 104 
varias clausulas catch, 276 
exce^oes Stoplteration, 268-269 

langadas pelo metodo next() de geradores, 271- 
272 

execCommand(), objeto Document, 400, 879 
execugao de programas JavaScript, 309-316 
dirigida por evento, 312 
linha do tempo do lado do cliente, 315 
modelo de thread do lado do cliente, 314 
scripts sincronos, assincronos e adiados, 310 
execugao de scripts adiada, 311 
execugao sincrona de scripts, 311 
expressao de incremento (para lagos), 96 
expressao de teste (para lagos), 96 
expressao inicializar (para lagos), 96 
expressoes, 56 

antes da palavra-chave for em inclusoes de array, 
274 

aritmdticas, 65-69 

operador + (adigao ou concatenagao de string), 

66 

operadores aritmeticos unarios, 67 
operadores bit a bit, 68 
atribuigao, 76 

atribuigao com operagao, 76—77 
avaliagao, 78-80 
chamada, 60, 162 
criagao de objetos, 60 
definigao, 5 

definigao de fungao, 58, 159, 160 
gerador, 274 
instrugoes versus, 6 
logicas, 74 

operador E logico (&&), 74 
operador NAO logico (!), 76 
operador OU logico (|[), 75 
objeto e inicializadores de array, 57 
operador condicional (?:), 80-81 
operador delete, 82-83 
operador typeof, 80—81 


operador virgula (,), 83-84 
operador void, 83-84 
primarias, 56 

propriedade access, 59, 163 
relacionais, 70 
operador in, 73 
operador instanceof, 74 
operadores de comparagao, 72 
operadores de igualdade e desigualdade, 70 
visao geral dos operadores, 61—65 
expressoes aritmeticas, 65-69 
operador +, 66 

operadores aritmeticos unarios, 67 
operadores bit a bit, 68 
expressoes de acesso a propriedade, 59 
chamadas de metodo, 163 
precedencia, 64 
expressoes de atribuigao, 76 

atribuigao com operagao, 76—77 
efeitos colaterais, 86 
expressoes de avaliagao, 78-80 
eval() global, 78-79 
eval() restrito, 79-80 
fungao eval(), 78-79 
expressoes de chamada, 60 
chamada de fungao, 162 
precedencia, 64 

expressoes de criagao de objeto, 60 
expressoes de definigao de fungao, 160 

instrugoes de declaragao de fungao versus, 90 
expressoes de elemento em inicializadores de array, 
57 

expressoes geradoras, 274 
expressoes inicializadoras, 5, 57 
expressoes logicas, 74 

operador E logico (&&), 74 
operador NAO logico (!), 76 
operador OU logico (||), 75 
expressoes primarias, 56 
expressoes regulares, 38, 245-257 
definigao, 245 

alternagao, agrupamento e referencias, 250 

caracteres literals, 246 

classes de caractere, 247 

especificando posigao correspondente, 251 

flags, 253 

repetigao, 248 

metodos de string usando, 253-255 
objetos RegExp, 255-257 
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expressoes relacionais, 70 
operador in, 73 
operador instanceof, 74 
operadores de comparaqao, 72 
operadores de igualdade e desigualdade, 70 
expressoes yield, 273 
extensao Firebug (Firefox), 3 
extensoes, 262-280 

atribuiqao de desestruturaqao, 265 
constantes e variaveis com escopo, 262 
E4X (ECMAScript for XML), 276-280 
funqoes de atalho (closures de expressao), 275 
impedindo, 793-794, 805-806 
impedindo extensoes de classe em ECMAScript 5, 
236 

iteraqao, 267-275 
expressoes geradoras, 274 
geradores, 270-273 
inclusoes de array, 273 
iteradores, 267-271 
laqos for/each, 267-268 

F 

Facebook, subconjunto seguro FBJS, 262 
fase de execuqao dirigida por eventos, 310 
fechando janelas, 347 
ferramentas de console, 3 
filas, anima^ao na jQuery, 538 

cancelando, atrasando e enfileirando efeitos, 543 
propriedade queue, objeto opqoes de animaqao, 541 
fill(), CanvasRenderingContext2D, 619, 859 
fillRect(), CanvasRenderingContext2D, 631, 860 
fiUText(), CanvasRenderingContext2D, 636, 860 
filtrando entrada de usuario, 469-471 
filtros de pseudoclasse, 570 
Firefox, 338 

(consulte tambem navegadores Web) 

alteraqoes na API History feitas no Firefox 4, 658 

estrategia de composiqao global, 645 

eventos DOMMouseScroll, 459 

metodos de array de ECMAScript 5, 156 

propriedade charCode, 469 

versao atual, 319 

versoes e extensoes de JavaScript, 258, 263 
firstElementChild, objeto Element, 363, 887-888 
flags em expressoes regulares, 253 
flocos de neve de Koch, desenhando (exemplo), 627 
fluxos, em Node, 290 


folhas de estilo, 429-432 
associando a documentos HTML, 404 
consultando, inserindo e excluindo regras, 430 
criando novas, 431 
definiqao, 403 

habilitando e desabilitando, 429 
objeto CSSStyleSheet, 871 

fontes Web na CSS, 407-408 
propriedades de estilo font-size e font-weight e 
color, 420 

formato de imagem PNG, conteudo do canvas re¬ 
tornado no, 642 
formularios HTML, 387-394 
botoes de alternancia, 392 
botoes de pressao, 391 
campos de texto, 392 
elementos, 387 
elementos select e option, 393 
eventos, 437 

novos recursos em HTML5, 443 
objeto FormControls, 913, 914 
objeto FormDatas, 915 
objeto FormValiditys, 916 
objeto HTMLFormControlsCollection, 922 
objetos Form, 911-913 
obtendo e configurando valores, 519 
pedidos HTTP codificados em formulario, 489— 
494 

propriedades form e element, 389 
rotinas de tratamento de evento de formulario e 
elemento, 390 

selecionando formularios e elementos de formula¬ 
rio, 388 

valor de retorno de rotina de tratamento, impe¬ 
dindo entrada invalida, 450 
fraqoes decimals, representaqao de binario em ponto 
flutuante, 34 

funqao abs(), objeto Math, 775-776 
funqao acos(), objeto Math, 775-776 
funqao ajax(), 550-555 
opqoes comuns, 551 
op^oes incomuns e ganchos, 554 
retornos de chamada, 553 
funqao ajaxSetup(), 551 
funqao asin(), objeto Math, 776 
funqao atan(), objeto Math, 776 
funqao atan2(), objeto Math, 776 
funqao Boolean(), conversoes de tipo com, 46 




1022 fndice 


funijao ceil(), objeto Math, 777 
funipao clearlnterval(), 289 
funijao clearTimeout(), 289 
fungao console.log(), 671 
funijao contains(), 557 
fungao cos(), objeto Math, 778 
fungao create(), 115, 795-796 
adicionando propriedades em objeto recentemen- 
te criado, 130 

fun^ao createObjectURL(), 680 
fun^ao decodeURI(), 750 
fumjao decodeURIComponent(), 334, 581, 751 
fumjao deftneProperties!), 796-797 
criando ou modificando varias propriedades, 129 
funijao defineProperty(), 99, 131, 797-798 

criando nova propriedade ou configurando atribu- 
tos, 129 

definindo propriedades somente para leitura con- 
figuraveis, 121 

tornando a propriedade length de array somente 
para leitura, 141 

tornando propriedades nao enumeraveis, 232 
fun^ao each(), 558 
funijao encodeURI(), 751 
funipao encodeURIComponentO, 581, 752 
fumjao escape( )> 755 
fumjao eval(), 78-80, 756 

remopio em subconjuntos seguros, 260 
fun^ao exp(), objeto Math, 778 
fun^ao extend!), 124, 558 
fungao floor!), objeto Math, 779 
fungao freeze!), 134, 798-799 
fungao get(). 549 
fungao getJSON(), 547 

fun^ao getOwnPropertyDescriptor(), 128, 131, 
799-800 

funijao getOwnPropertyNames!), 125, 800-801 

fun^ao getPrototypeOfl), 132, 801-802 

funijao getScript(), 547 

fun^ao globalEval(), 558 

fun^ao grep(), 558 

fun^ao isArray!), 559 

funijao isEmptyObject(), 559 

fungao ^Extensible!), 134, 802-803 

fungao isFinite!), 33, 768 

fungao isFrozen(), 134, 803-804 

fun^ao isFunction(), 186, 559 

fungao isNaN(), 33 

fungao isPlainObject(), 559 


funijao isSealed!), 804-805 

funijao Iterator (), 269-270 

funijao JSON.parse(), 135, 770 

funijao JSON.stringify!), 135, 657, 772-773 

funfao keys! )> 805-806 

enumerando nomes de propriedade, 125 
fun^ao load!) (Rhino), 282 
funfao log! )> objeto Math, 780 
fun^ao makeArray!), 559 
funijao map!)» 559 

fun^ao max(), objeto Math, 181-182, 781 

funijao merge!), 559 

funijao min(), objeto Math, 781 

funijao noConflict!), 513, 569 

funfao Number!), conversoes de tipo com, 46 

funijao Object! )> conversoes de tipo com, 46 

funijao onload!), definindo (exemplo), 314 

funfao param(), 548 

func^ao parse!), 135, 770 

func^ao parseFloat!), 48, 810-811 

fun^ao parselnt(), 48, 811-812 

fun^ao parseJSON(), 559 

funijao post! )> 549 

funijao pow(), objeto Math, 782 

funijao preventExtensions!), 134, 805-806 

funijao print!) (Rhino), 282 

funfao proxy!). 559 

funijao random!), objeto Math, 782 

funijao removeAttr(), 517 

funijao round!), objeto Math, 782 

funijao seal(), 134, 807-808 

funfao setlnterval(), 289, 314 

funfao setTimeout(), 289, 314 

implementando tempos-limite para XMLHttpRe¬ 
quest, 497 

fun^ao sin(), objeto Math, 783-784 
fun^ao sqrt(), objeto Math, 783-784 
funijao String!), conversoes de tipo com, 46 
funijao stringify!), 135, 772-773 
funijao tan(), objeto Math, 784-785 
funijao trigger!), 535 
funijao trim(), 560 

funijao unescape() (desaprovada), 839-840 
funfao writeFile(), 291 
funfao writeFileSync!), 291 
funcionalidade de edifao de rich-text, 400 
fun ? oes, 158-192 
aninhadas, 301 
aplica^ao parcial de, 189-191 
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argumentos e parametros, 166-171 

listas de argumento de comprimento variavel, 
167 

parametros opcionais, 166 
tipos de argumento, 169 

usando propriedades de objeto como argumen¬ 
tos, 169 

array arguments[ ], 703 
atalho para (closures de expressao), 275 
chamando, 161-165 
chamada de construtora, 165 
chamada de metodo, 162 
chamada indireta, 165 

chamando quando o documento esta pronto, 453 

closures, 175-180 

como namespaces, 173-175 

como valores, 171-173 

definindo suas proprias propriedades de funqtao, 
173 

compartilhando entre quadros ou janelas, 348— 
349 

configurando atributos de rotina de tratamento de 
evento a, 445 

construtora Function(), 185 
construtoras, 766-767 
de ordem mais alta, 188 
definitpao, 6, 29, 159-161 
funtpoes aninhadas, 161 

demonstrando instrutpoes de estrutura de controle, 
7 

expressoes de chamada, 60 

expressoes de definifao, 58 

fun^ao jQuery (termo), 514 

funtpao jQuery()($()), 513 

funtpoes utilitarias Ajax na jQuery, 546 

geradoras, 270-273 

globais, 25, 765-766 

Math, 774-775 

memoizatpao, 191 

metodo bind(), 183 

metodo toString(), 184 

metodos call() e apply(), 181-182 

nomes, 160 

objetos que podem ser chamados, 186 
processando arrays, 187-188 
propriedades, 181 

propriedade length, 181 
prototipo, 181, 197 
restriipoes em subconjuntos seguros, 260 


retornando arrays de valores, atribuitpao de deses- 
truturaaio com, 265 
variaveis declaradas com var ou let, 264 
funtpoes aninhadas, 161, 301 
funtpoes de abrandamento, 542 
adicionando na jQuery, 570 
funtpoes de ordem mais alta, 188 

combinadas com aplica£ao parcial, 191 
funtpoes fabrica 

criando e inicializando novo objeto, 194 
funtpao fabrica de classe e encadeamento de meto¬ 
dos, 225 

funtpoes globais, 25, 765-766 
definidas no Rhino, 282 
funtpoes varargs, 168 

G 

g (correspondencia global) em expressoes regulares, 
253 

gadget de busca do Twitter, controlado por postMes- 
sage(), 663-665 

geometria e rolamento, documento e elemento, 
380-386 

consultando a geometria de um elemento, 382 
coordenadas do documento e coordenadas da por¬ 
ta de visualizatpao, 380-381 
determinando o elemento posicionado em um 
ponto, 383 

obtendo e configurando geometria de elemento, 
520 

rolando, 384 

tamanho, positpao e transbordamento de elemen¬ 
to, 384 

tratando de eventos mousewheel (exemplo), 
460-462 

geradores, 270-273 
pipeline de, 272 

reiniciando com metodo send () ou throw (), 

273 

gerenciamento de historico em HTML5, 656—661 
gerenciamento de transatpao em IndexedDB, 
691-692 

getAHResponseHeaders(), objeto XMLHttpRe- 
quest, 999 

getAttributeNS(), objeto Element, 890-891 
getBoundingClientRect(), objeto Element, 382, 
386, 890-891 
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getClientRects(), objeto Element, 383, 890-891 
getComputedStyle(), objeto Window, 425, 989 
getContext(), objeto Canvas, 849 
getCurrentPosition(), objeto Geolocation, 654, 918 
getData(), objeto DataTransfer, 466, 882-883 
getElementByldj), objeto Document, 343, 354, 

880 

selecionando formularios e elementos de formula- 
rio, 388 

getElementsByTagName(), objeto Document, 155 
getImageData(), CanvasRenderingContext2D, 647, 
860 

getModifierState(), objeto Event, 904 
getResponseHeader(), objeto XMLHttpRequest, 
999 

GMT (Greenwich Mean Time), 726 

biblioteca Closure, 331 
mecanismo JavaScript V8 e Node, 288 
promovendo a capacidade de carregar scripts de 
outros sites, 305 
subconjunto seguro Caja, 261 
Google Web Toolkit (GWT), 331 
gradientes (degrades) 

objeto CanvasGradient, 850 
gradientes (degrades) em Canvas, 631-634 

especificando para tra$o ou preenchimento, 633 
gradientes lineares, 633, 858 
gradientes radiais, 633, 859 

grafico de pizza, desenhando com JavaScript e SVG, 
610-613 

guias em janelas de navegador, 344 
GUIs (interfaces graficas do usuario), criando 
GUI Java usando JavaScript no Rhino (exemplo), 
285-288 

H 

hasAttributeNS(), objeto Element, 890-891 
hasChildNodes(), objeto Node, 962 
heran^a 

classes e prototipos, 194 
construtora prototipo como prototipo de novo 
objeto, 195 

criando novo objeto que herda do prototipo, 116 
enumerafao de propriedades e, 123 
favorecendo a composicao em detrimento da, em 
design orientado a objeto, 227 
propriedades de acesso, 127 


propriedades de objeto, 119 
subclasses, 224 
hiperlinks, 308 
marcando destino de, 309 
objetos Link, 946 

rotina de tratamento de evento onclick, 391 
historico de navega^ao, 336 

mecanismo de gerenciamento de historico em 
HTML5, 442, 656-661 
objeto History, 920 
transifao, PopStateEvent, 966 
hora, 736 

(consulte tambem datas e hora) 
funcao Date.getTime(), 750 
UTC e GMT, 726 
HTML 

atributos de elementos, 365—368 
conteiido de elemento como, 369 
elemento <script>, 301 
elementos e atributos, 894-897 
fazendo o escape e desativando tags HTML em 
dados nao confiaveis, 329 
incluindo folha de estilo CSS em pagina HTML, 
40 4 

incorporando codigo JavaScript usando tags 
<script>, 9 

incorporando JavaScript em, 303-309 
mantendo conteiido HTML separado do compor- 
tamento JavaScript, 446 
metodos de classe String, 820-821 
nao diferencia maiusculas e minusculas, 21 
nomes de tag sem diferencia^ao de maiusculas e 
minusculas, 356 

obtendo e configurando atributos com jQuery, 

517 

rotinas de tratamento de evento, 307 
script de conteiido de documento, 9 
strings, com aspas simples e duplas, 36 
usando JavaScript para fazer script de conteiido, 

10 

HTML5, 652-700 
API arrastar e soltar (DnD), 463 
API Filesystem, 684-690 
API Geolocation, 653-656 
API Offline Web Applications, 574 
API WebSocket, 697-700 
APIs para aplicativos Web, 303 
arrays tipados e ArrayBuffers, 672-676 
atributo placeholder, campos de texto, 392 
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atributo sandbox para elemento <iframe>, 329 
atributos dataset e propriedade dataset, 367 
bancos de dados do lado do cliente, 690-698 
Blobs, 676-684 
cache de aplicativo, 587 
comandos de edialo, 400 
especifica^ao Web Workers, 665-672 
evento DOMContentLoaded, 453 
eventos, 442 

gerenciamento de historico, 656-661 
marcaqao SVG aparecendo diretamente em arqui¬ 
vos HTML, 610 

metodo getElementsByClassName(), 358 
metodo insertAdjacentHTML(), 369 
objeto WindowProxy, 350 
propriedade classList, 427, 519 
propriedade frames como propriedade autorefe- 
rente, 348 

propriedades innerHTML e outerHTML, 369 
rotinas de tratamento de evento direcionadas ao 
navegador como um todo, 445 
troca de mensagens entre origens, 661-665 
“web workers”, 314 
HTTP, 697-698 

atributos de elementos HTML, 365 
modulo de utilitarios clientes em Node (exemplo), 
294-296 
script, 478-508 

usando Comet com Server-Sent Events, 502— 
508 

usando elementos <script>, 500-502 
usando XMLHttpRequest, 481-500 
servidor HTTP em Node (exemplo), 292-294 

I 

i (correspondence sem diferenciafao de maiusculas e 
minusculas) em expressoes regulares, 253 
iqamento, 53, 160 
identificadores 

caracteres de controle de formato e, 22 
defini^ao, 23 

em expressoes de acesso a propriedade, 59 
em i nstrupees rotuladas, 100 
identificadores de fragmento em URLs, 657 
imagens 

desenhando no canvas, 641-643, 851-852 
exibindo arquivos de imagem soltos com URLs de 
Blob, 680 


extraindo conteudo do canvas como, 642 
objeto Image, 924 
script, 599 

trocas de imagem nao invasivas, 600 
Web Worker para processamento de imagem 
(exemplo), 669 

importNode(), objeto Document, 372, 880 
importScripts(), objeto WorkerGlobalScope, 667, 
994 

impressao 

definindo a fumpao jQuery.fn.println(), 569 
eventos beforeprint e afterprint, 443 
inclusoes de array, 273 

alterando para expressoes geradoras, 275 
sintaxe, 274 

incorporando JavaScript em HTML, 303-309 
elemento <script>, 303-304 
JavaScript em URLs, 307 
rotinas de tratamento de evento em HTML, 307 
scripts em arquivos externos, 305 
tipo de script, 306 

indexafao baseada em zero (strings e arrays), 35, 137 

metodos indexOf () e lastlndexOf (), 153 
nomes de propriedade de objeto versus, 139 
baseados em zero, string e array, 35 
indistimjao de movimento ou efeito de mancha em 
elementos graficos no canvas, 647 
infinito negativo, 32, 788-789 
infinito positivo, 32, 788-789 
initialTime, objeto MediaElement, 603, 951 
inputMethod, objeto Event, 441, 469, 904 
insertAdjacentHTML(), objeto Element, 369, 
891-892 

implementando com innerHTML e Documen- 
tFragment, 376 

insertRule(), objeto CSSStyleSheet, 430, 872 
inspect(), ConsoleCommandLine, 868 
instancias, 193 
arrays de, classificando, 218 
criando e inicializando com funqao fabrica, 194 
metodos fabrica retornando, 221 
propriedade constructor, 198 
instrufoes, 85-111 
compostas e vazias, 86 
condicionais, 90 
else if, 92 
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if, 90 
switch, 93 
declarapio, 87 

declaraejao de funejao, 89, 159 
definidas, 6 
depurador, 108 

estrutura de controle, em corpo de funfao, 7 
instru^ao with, 106 
instrufoes de expressao, 86 
lagos, 95 

la^os do/while, 96 
la^os for, 96 
la^os for/in, 98 
la^os while, 95 
resumo das, 110 
saltos, 100 

instructs break, 101 
instru^oes continue, 102 
instruqoes return, 103 
instrufoes rotuladas, 100 
instruqoes throw, 104 
instruqoes try/catch/finally, 104 
terminaejao, pontos e virgulas opcional e, 25 
instrufoes break, 101 

quebra de linha interpretada como ponto e virgu- 
la, 26 

instrubies condicionais, 85, 90 
else if 92 

em inclusoes de array, 274 
if 90 
switch, 93 

instrufoes continue, 102 

ponto e virgula interpretado como quebra de li- 

instruqoes continue nao rotuladas, 102 
instruqoes de declara9ao, 85, 87 
instru^ao var, 88 

instruqoes de declaragao de funfao, 89, 160 
instruqoes de depurador, 108 
instruqoes de expressao, 85 
instru^oes de salto, 85, 100 
break, 101 
continue, 102 
labeled, 100 
return, 103 
throw, 104 
try/catch/finally, 104 
instrubies else if 92 


instruqoes if 90 

aninhadas, com clausulas else, 91 
em inclusoes de array, 274 
em instruqoes else if 92 
instruqoes return, 60, 103, 161 

quebra de linha interpretada como ponto e virgu¬ 
la, 26 

uso por funbies geradoras, 270-271 
instruqoes rotuladas, 100 
continue, 102 
instruqoes switch, 93 
clausulas case, 94 
instruqoes throw, 104 
instruqoes try/catch/finally, 104 
varias clausulas catch em, 276 
instrubies var, 88 
instru^oes vazias, 87 
instru^oes with, 106 

remo^ao em subconjuntos seguros, 260 
inteiros, 30 

interface do usuario (consulte UI) 
interfaces (consulte IU (interface do usuario)) 
Internet Explorer (IE) 

API arrastar e soltar (DnD), 463 
API userData, 574 
comentarios condicionais no, 323 
consultando texto selecionado, 398 
elemento <canvas>, 616 
estilos calculados, 426 

evento propertychange, usando para detectar en- 
trada de texto, 472 

eventos de mouse que nao borbulham, 440 
metodos timer, 333 
modelo de caixa CSS, 414 
modelo de evento 

captura de evento e, 451 

eventos de formulario, 438 

metodos attachEvent() e addEventListener(), 

313 

mdtodos attachEvent() e detachEvent(), 447, 
907 

persistencia de userData, 585—587 
propriedade clientlnformation, objeto Window, 
337 

propriedade filter, 417 

propriedade innerText, em vez de textContent, 
370 

propriedade rules, em vez de cssRules, 430 
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removendo tags de script e outro conteudo execu- 
tavel no IE8, 329 

sem suporte para getElementsByClassName(), 
359 

uso de objetos host que podem ser chamados, em 
vez de objetos Function nativos, 186 
versao atual, 319 
XMLHttpRequest no IE 6, 481 
interpretador de Node, 281 
documentaqao online, 288 
script de E/S assincrona com, 288-296 
API de arquivo e sistema de arquivo no modulo 
fs, 291 
buffers, 290 

emissores de evento, 289 
fluxos, 290 
funqoes, 288 

funqoes timer do lado do cliente, 289 
ligaqao em rede baseada em TCP, 292 
modulo de utilitarios de cliente HTTP (exem- 
plo), 294-296 

servidor HTTP (exemplo), 292-294 
servidor de chat usando WebSockets e, 699-700 
interpretadores, 3 
suporte para E4X, 276 
suporte para extensoes de JavaScript, 258 
versoes de JavaScript, 262 
iPhone e iPad, eventos de gesto e toque, 444 
isContentEditable, objeto Element, 887-888 
isPointInPath(), CanvasRenderingContext2D, 648, 
861 

iteraqao 

arrays, 142-144 

classes e objetos Java com laco for/in, 284 
extensoes da linguagem para, 267-275 
expressoes geradoras, 274 
geradores, 270-273 
inclusoes de array, 273 
iteradores, 267-271 
laqo for/each, 267-268 
laqo for/each definido na E4X, 279 
IU (interface do usuario) 
biblioteca jQuery UI, 571 
eventos, 436 

Java, implementando com JavaScript no Rhino, 
284 

exemplo de GUI, 285-288 


J 

janela ascendente de nfvel superior, 345 
janela pai, 345 
janelas, 332-350 

caixas de dialogo, 339-342 
consultando o tamanho da porta de visualizaqao, 
381-382 

consultando posiqoes da barra de rolagem, 380— 
381 

elementos do documento como propriedades de, 
342 

eventos, 438 

historico de navegaqao, 336 
informaqoes sobre navegador e tela, 337-339 
localizaqao e navegaqao do navegador, 334—336 
analisando URLs, 334 
carregando novos documentos, 335 
navegador, JavaScript abrindo e fechando, 325 
navegador, polftica da mesma origem e, 326 
sobreposiqao de janelas translucidas (exemplo de 
CSS), 418-420 
timers, 333-334 
tratamento de erro, 342 
varias janelas e quadros, 344—350 
abrindo e fechando janelas, 345-347 
JavaScript em janelas interagentes, 348-349 
relaqao entre quadros, 347 
janelas de nfvel superior 

propriedade frameElement null, 348 
propriedade pai se referindo a si mesma, 347 
janelas filhas, 347 

historico de navegaplo e, 336 
janelas interagentes, JavaScript em, 348-349 
janelas translucidas, sobreposiqao com CSS (exem¬ 
plo), 418-420 

plug-ins de navegador, 328 
script com Rhino, 281-288 

exemplo de GUI (interface grafica do usuario), 
285-288 

javaEnabled(), objeto Navigator, 339 
JavaScript 

arquivos terminando em .js, 305 
nomes e versoes, 2 
versoes, 258, 262 

JavaScript dirigida por eventos, 312 
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JavaScript do lado do cliente, 8-12, 281-296, 299 
calculadora de emprestimos (exemplo), 12—18 
construindo aplicativos Web com, 330 
E/S assmcrona com Node, 288-296 
mantendo o conteudo HTML separado do com- 
portamento JavaScript, 446 
modelo de thread, 314 

problemas de compatibilidade e opera<jao em con- 
junto, 317 

script de conteudo de documento HTML, 9 
scripts Java com Rhino, 281-288 
seguran^a, 325 
JavaScript nao invasiva, 303 
JavaScript Object Notation (consulte JSON) 
jQuery, 11, 330, 509-572, 568-571, 929-946 
Ajax com, 545-557 
eventosAjax, 556 
fun^ao ajax(), 550-555 
funqoes utilitarias, 546 
metodo load(), 545 

passando dados para utilitarios Ajax, 548 
Ajax najQuery 1.5, 551 
alterando estrutura do documento, 523—526 
biblioteca UI, 571 

consultas baseadas em seletor CSS, 360 
consultas e resultados de consulta, 514 
efeitos animados, 537-544 
efeitos e metodos de animaqao, 940 
estendendo com plugins, 568-571 
funqao j Query () ($()), 511-514 
fundees Ajax, 942-943 
fun^oes utilitarias, 557-560, 944 
fundamentos da, 510 
gramatica de seletor, 930 
metodos de elemento, 934 
metodos de evento, 939 
metodos de inserqao e exclusao, 937 
metodos de selegao, 564—568, 932 
metodos e propriedades basicos, 931 
metodos getter e setter, 517—523 
nomes de fundees e metodos na documentaQo 
oficial, 514 
obtendo, 511 
seletores, 560-564 
combinaqoes de, 563 
grupos de, 564 
simples, 561-563 


terminologia, 513 
tratando eventos com, 526-536 
jQuery.fx.speeds, 537 
JSON, 135, 770-773-774 
analisando resposta HTTP, 487 
fazendo pedido POST HTTP com corpo codifi- 
cado com JSON, 491 
funqao jQuery.getJSON(), 547 
funqao jQuery.parseJSONQ, 559 
mdtodo toJSONJ), 135-136 
metodos, implementaqao em classes, 214 
JSON preenchido (consulte JSONP) 

JSONP, 500-502 

fazendo pedido com elemento de script, 502 
pedido especificado por URL ou string de dados 
passada para jQuery.getJSON(), 549 

L 

laqos, 85, 95 
do/while, 96 
for, 96 

for/each, 267-268 
i nstrupees continue em, 102 
palavra-chave let como declaraqao de variavel ou 
inicializador de laqo, 263 
while, 95 
laqos do/while, 96 
la^os for, 96 

chamando jQuery.each() em vez de, 515 
instruqoes continue em, 102 
iterando arrays, 142 

palavra-chave let usada como inicializador de laqo, 
263 

variaveis declaradas com a palavra-chave let, 263 
laqos for/each, 267-268 

definidos na E4X, iteraqao por meio de listas de 
tags e atributos XML, 279 
em inclusoes de array, 274 
enumerando propriedades, 123-125 
extensao para trabalhar com objetos que podem 
ser iterados, 267-271 
instruqoes continue em, 102 
iterando arrays, 143 

iterando por meio de metodos, campos e proprie¬ 
dades de classes e objetos Java, 284 
laqos for/in, 98 

ordem de enumeraqao de propriedade, 99 
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palavra-chave let em, 263 
usando com arrays associativos, 118 
la?os infinitos, 97 
la?os while, 95 

lastElementChild, objeto Element, 363, 888-889 
lastEventld, objeto MessageEvent, 955 
lastModifiedDate, objeto File, 677-678, 907 
leitores de tela, 324 

lengthComputable, objeto ProgressEvent, 968 
ligaqao em rede 

baseada em TCP, modulo net em Node, 292 
JavaScript do lado do cliente e, 325 
lineCap, CanvasRenderingContext2D, 851-852 
linejoin, CanvasRenderingContext2D, 636, 851— 
852, 856 

lineToQ, CanvasRenderingContext2D, 618, 627, 
635, 861 

lineWidth, CanvasRenderingContext2D, 851-852, 
856 

linguagens fortemente tipadas 
classes em, 193 
objetos em, 117 

linha do tempo, execuqao de programa JavaScript do 
lado do cliente, 315 

atributos de desenho de linha no canvas, 634 
desenhando na API Canvas, 618-621 

objeto Link, 946 

solicitando detalhes sobre, com HTTP HEAD e 
CORS, 499 

listas, filtrando na E4X, 278 
listas de argumento de comprimento variavel, 167 
listas de simbolos, DOM, 884—885 
literals, 57 
definidas, 23 
expressao regular, 245 

literals XML incluidas em codigo JavaScript, 277 
numericas, 30 
objeto, 114 
string, 35 

literais de objeto, 114 
literais em ponto flutuante, 31 
literais inteiras, 31 
literais numericas, 30 

lookupNamespaceURI(), objeto Node, 963 
instru^oes continue em, 102 
lvalues, 63, 98 


M 

m (modo de varias linhas) na comparaqao de padroes 
em expressao regular, 253 
mapa, exibindo com geolocalizapio, 654 
margens 

especificando para elementos com CSS, 412 
no modelo de caixa CSS, 413 
MAX_VALUE (Number), 787-788 
measureText(), CanvasRenderingContext2D, 637, 
861 

membros de classe, em linguagens orientadas a obje¬ 
to fortemente tipadas, 199 
memoizaqao, 191 
menus de contexto, 454 
metadados afetando reprodu^ao de midia, 604 

metodo_iterator_(), 269-270 

metodo abort() 

objeto FileReader, 909 
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metodo datepicker(), 572 
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metodo getSeconds(), objeto Date, 732 
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metodo getUTCMonth(), objeto Date, 735 
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com CORS, 499 
metodo height!), jQuery, 521 
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metodo html(), jQuery, 520 
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metodo insertAfter(), jQuery, 524 
metodo insertBefore(), jQuery, 524 
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metodo insertRow() 
objeto Table, 975 
objeto TableSection, 977 
metodo is(), jQuery, 516-517, 519 
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elemento Select, 971-972 
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metodo match(), objeto String, 254, 827-828 
metodo namedltem() 
elemento Select, 971-972 
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metodo offsetParent(), jQuery, 521 
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como formulario, 490 
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upload de arquivo com pedido HTTP, 492 
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objeto MessagePort, 956 
objeto Window, 328, 662, 990 
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objeto WorkerGlobalScope, 994 
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metodo prependTo(), jQuery, 524 
metodo prev(), jQuery, 567 
metodo prevAll(), jQuery, 567 
metodo preventDefault(), objeto Event, 452, 534, 
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metodo print!), objeto Window, 990 
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objeto Document, 429, 882 
objeto Element, 891-892 
selecionando elementos de formulario, 388 
metodo queue(), jQuery, 544 
metodo readAsArrayBufier() 
objeto FileReader, 682-684, 910 
objeto FileReaderSync, 911 
metodo readAsBinaryString() 
objeto FileReader, 682-683, 910 
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metodo setAttributeNS(), objeto Element, 892-893 
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metodo setlnt32(), objeto DataView, 875 
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metodo test(), objeto RegExp, 257, 818-819 
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implementaQo em classes, 214 
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metodo unbind(), jQuery, 532 
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metodo unshiftO, objeto Array, 142, 148, 723 
metodo unwrap(), jQuery, 526 
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metodo UTC(), objeto Date, 749 
metodo val(), jQuery, 519 
metodo valueOf(), 136 
classe Object, 809-810 
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conversoes de tipo com, 49 
implementaQo em classes, 214 
objeto Boolean, 725 
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objeto Number, 792-793 
objeto String, 836-837 
metodo values!), ConsoleCommandLine, 869 
metodo warn(), objeto Console, 867 
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metodo writeln(), objeto Document, 397, 882 
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ECMAScript 3, 144-148 
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chamando, 162 
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comparaQo, 215-218 
conversao de tipo, 213 
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metodo compareTo(), 216 
metodo equals!), 215 
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usando seleQo como contexto, 566 
metodos fabrica, 221 
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Element, 366 
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jQuery, 517-523 

para atributos CSS, 518 
para atributos HTML, 517 
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para conteudo de elementos, 520 
para dados de elementos, 522 
para geometria de elementos, 520 
para valores de formulario HTML, 519 
propriedade, 125-127 
API legada para, 131 
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metodos HTTP, 483 
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521 
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jQuery, 539 
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525 

Microsoft Web Sandbox, 262 
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seletjao e carregamento de tipo, 603 
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modelo de caixa (CSS), 413 
modelo border-box e propriedade box-sizing, 414 
propriedade jQuery.support.boxModel, 560 
modelo de execupio, threads Worker, 668 
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seado na coordenada, 380-381 
modo Quirks, 322, 414 
exibi^ao de documento HTML, 359 
modo restrito, 109 
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exibitjao de documento HTML, 359 
modulo fs (arquivo e sistema de arquivo), Node, 291 
modulo Transitions (CSS), 407-408, 424 
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rodas de mouse bidimensionais e evento wheel, 441 
usando o teclado em vez do, 324 
moveToQ, CanvasRenderingContext2D, 618, 861 
Mozilla 
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jQuery, 513 

lookupPrefix(), objeto Node, 963 
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metodo createElementNS(), Document, 879 
metodo getElementsByTagNameNS(), 880 
namespace process, Node, 289 
objetos como, 240 

plug-in jQuery vinculando rotinas de tratamento 
de evento, 570 

propriedade namespaceURI, objeto Element, 
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NaN (nao e numero), 33, 784-785 
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fumjao isNaN(), 769 
Number.NaN, 787-788 
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funcoes portaveis para, 363 
navegadores Web 

aplicativos Web armazenado em, 587 
bancos de dados do lado do cliente integrados em, 
574 

disparando evento de entrada em elementos de 
formulario text-input, 438 
editando conteudo de documento, 399 
escopo de localStorage, 576 
especifica^oes de opacidade, 417 
evento DOMContentLoaded, 453 
execucao assincrona de script, 316 
ferramentas de JavaScript, 3 
ferramentas de console, 3 
implementaQo de CSS Transitions, 424 
implementa^ao de eventos progress HTTP, 494 
indexafao de strings, 38 
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estruturas do lado do cliente, 330 
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seguran^a, 325—330 
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junto, 317 
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da, 361-362 

propriedade CSS box-sizing, 415 
propriedade dataset, nao implementada, 368 
propriedade jQuery.browser, 557 
propriedade keyldentifier no Chrome e no Safari, 
473 

recursos e eventos de formulario HTML5, 443 
rotinas de tratamento de evento direcionadas ao 
navegador como um todo, 445 
Safari em iPhone e iPad, 444 
script de um dialogo modal (exemplo), 9 
sites de informacoes sobre compatibilidade, 318 
suporte de cabe^alhos CORS (“Cross-Origin Re¬ 
source Sharing”), 498 
suporte para banco de dados, 690 
suporte para CSS, 405 
suporte para E4X, 267-268 
suporte para elemento <canvas>, 616 
suporte para especificacoes de cor CSS, 416 
suporte para evento mousewheel, 459 
suporte para EventSource, 504 
suporte para getElementsByClassName(), 359 
suporte para metodo insertAdjacentHTML(), 

370 


suporte para navegar no documento elemento por 
elemento, 363 

suporte para seletor CSS, 360 

suporte para sintaxe de objeto literal get e set, 131 

suporte para SVG, 608 

tempos-limite para pedidos HTTP, XHR2, 497 
tipo de evento de entrada disparado apos inserijao 
de texo no elemento, 471 
transformados em sistemas operacionais simples, 
302 

URLs javascript:, 308 
usando JavaScript, 9 

uso de objetos que podem ser chamados, 186 
valores de readyState de XMLHttpRequest, 485 
versoes atuais, 319 

networkState, objeto MediaElement, 606, 949, 951 
nextElementSibling, objeto Element, 363, 888-889 
nome de janela _blank, 345 

de fumjoes, 160 

nome de janela, importancia do, 345 
propriedades CSS em JavaScript, 420 
nomes de atributo com hifen, 367 
nomes de atributo na E4X, 278 
nomes de tag (XML), 278 
nomes de tag, obtendo elementos pelos, 356 
normalizaQo 

codifica^oes Unicode, 23 
normalizado, definido, 979 
nos, 353 

criando, inserindo e excluindo em documentos, 
372-377 
criando nos, 372 
inserindo nos, 372, 373 
removendo e substituindo nos, 374 
usando DocumentFragments, 375 
nos CDATASection, 371 
nos Text, 360-361, 977 
conteudo de elemento como, 371 
criando, 372 

notagao em ponto fixo para niimeros, 789—790 
nota^ao exponencial, 31, 47, 788-789 
numeros, 30-35 
aritmetica em JavaScript, 32 
binarios em ponto flutuante e erros de arredonda- 
mento, 33 
conversoes, 44, 46 
numero para string, 47 
objeto para numero, 48, 50 
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datas e horas, 34 

definindo uma classe de numeros complexos 
(exemplo), 200 

literals em ponto flutuante, 31 
literals inteiras, 31 
objetos wrapper, 42 

numeros binarios em ponto flutuante, 34 
numeros de Fibonacci, funqao geradora de, 271-272 
numeros finitos, 768 

0 

objeto ApplicationCache, 843 
constantes, valores da propriedade status, 843 
metodo swapCache(), 844 
metodo update(), 844 
propriedade status, 592 
rotinas de tratamento de evento, 844 
objeto Arguments, 167, 703 
propriedade callee, 704 
propriedade length, 181, 705 
propriedades callee e caller, 168 
restricao em subconjuntos seguros, 260 
objeto ArrayBuffer, 674, 845 
ordem de bytes endian, 675 
readAsArrayBuffer(), FileReader, 682-684 
objeto ArrayBufferView, 845 
objeto Attr, 368, 846 
objeto Audio, 846 
objeto BeforeUnloadEvent, 846 
objeto BlobBuilder, 678-679, 847 
objeto Boolean, 724 
metodo toString(), 725 
metodo valueOf(), 725 
objeto CanvasGradient, 631, 850 
criando, 858 

metodo addColorStop(), 850 
preenchimento ou traqo com gradiente de cores, 
633 

objeto CanvasPattern, 631, 850-851 
criando, 859 

preenchimento ou traqo usando, 633 
objeto CanvasRenderingContext2D, 616, 850-864 
atributos graficos, 621-623 
atributos graficos de sombras, 639 
compondo, 643-646 

desenhando e preenchendo curvas, 629-631 
desenhando retangulos, 631 
metodo arc(), 857 


metodo arcTo(), 857 
metodo beginPath(), 857 
metodo bezierCurveTo(), 858 
metodo clearRect(), 858 
metodo clip(), 638, 858 
metodo closePath(), 858 
metodo createImageData(), 647, 858 
metodo createLinearGradient(), 633, 858 
metodo createPattern(), 633, 859 
metodo createRadialGradient(), 633, 859 
metodo drawlmage(), 641, 859 
metodo fill(), 859 
metodo fillRect(), 860 
metodo fillText(), 636, 860 
metodo getlmageDataj), 647, 860 
metodo isPointInPath(), 648, 861 
metodo lineTo(), 861 
metodo measureText(), 637, 861 
metodo moveTo(), 861 
metodo putImageData(), 647, 862 
metodo quadraticCurveTo(), 862 
metodo rect(), 862 
metodo restore(), 862 
metodo rotate(), 862 
metodo save(), 863 
metodo scale(), 863 
metodo setTransform(), 863 
metodo stroke(), 863 
metodo strokeRect(), 863 
metodo strokeText(), 636, 863 
metodo transform(), 864 
metodo translate(), 864 
metodos save() e restore!), 854 
objeto CharacterData, 371 
objeto ClientRect, 864 
objeto CloseEvent, 865 
objeto Console, 866 
metodos, 866 

objeto ConsoleCommandLine, 867 
objeto CSSRule, 430, 869 
objeto CSSStyleDeclaration, 870 

descrevendo estilos associados ao seletor, 430 
estilos calculados, 425 

propriedades correspondentes a propriedades de 
atalho, 421 

usando em script de estilos em linha, 420 
objeto CSSStyleSheet, 429, 871 
consultando, inserindo e excluindo regras de folha 
de estilo, 430 
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criando, 431 

inserindo e excluindo regras, 430 
propriedade disabled, 429 
objeto DataTransfer, 442, 463-469, 872 
propriedade files, 492, 678-679 
objeto DataView, 874 

metodos lendo/gravando valores de ArrayBufFer, 
675 

objeto Document, 300, 351, 875-882 
eventos, 882 

metodo addEventListener(), 447 
metodo close(), 347 

metodo createDocumentFragment(), 375 
metodo createElement(), 372 
metodo createElementNS(), 372 
metodo createStyleSheet(), 431 
metodo createTextNode(), 372 
metodo elementFromPoint(), 383 
metodo getElementByldj), 343, 354 
metodo getElementsByClassName(), 358 
metodo getElementsByTagName(), 155, 356 
metodo open(), 337 
metodo queryCommandEnabled(), 400 
metodo querySelector(), 360 
metodo querySelectorAll(), 360, 429 
metodo removeEventListener(), 447 
metodo write(), 310, 316, 337, 396 
metodo writeln(), 397 
metodos, 878-882 

politica da mesma origem aplicada em proprieda- 
des, 327 

propriedade compatMode, 322 
propriedade cookie, 579 
analisando, 582 
propriedade designMode, 399 
propriedade forms, 388 
propriedade location, 334 
propriedade readyState, 315, 453 
propriedade styleSheets, 429, 430 
propriedade URL, 334 
propriedades, 395, 876 
respostas HTTP analisadas, disponiveis como, 
487 

objeto DocumentFragment, 354, 375, 882 
criando, 878 

implementando insertAdjacentHTML() usando 
innerHTML, 376 

metodos querySelector() e querySelectorAll(), 
360 


usando para inverter a ordem dos filhos de um 
Node, 376 

objeto DocumentType, 882-883 
objeto DOMException, 882-883 
objeto DOMImplementation, 883-884 
objeto DOMSettableTokenList, 884-885 
objeto DOMTokenList, 427, 885-886 
objeto Element, 300, 885-893 
definindo metodos personalizados, 364 
implementando a propriedade outerHTML, 
usando innerHTML, 374 
metodo getBoundingClientRect(), 386 
metodo hasAttribute(), 367 
metodo removeAttribute(), 367 
metodos, 889-893 

metodos getAttribute() e setAttribute(), 366, 422 

objeto Nodes, 360-361 

propriedade attributes, 368 

propriedade contentEditable, 399 

propriedade dataset, 367 

propriedade innerHTML, 369 

propriedade offsetParent, 385 

propriedade outerHTML, 369 

propriedade style, 420 

propriedades, 886-887 

propriedades, API de navegaeio pelo documento 
baseada em elemento, 361-362 
propriedades ofFsetLeft e offsetTop, 384 
representando elementos <style> e <link>, script 
de folhas de estilo, 429 
rotinas de tratamento de evento, 892-893 
objeto ErrorEvent, 897 
objeto EvalError, 758 
objeto Event, 528, 898-904 

constantes definindo valores da propriedade even- 
tPhase, 898 
jQuery, 528 

metodo preventDefault(), 452 
metodo proposto, especificaqao DOM Level 3, 
904 

metodo stopImmediatePropagation(), 453 
metodo stopPropagation(), 452 
metodos, 902-903 
propriedade defaultPrevented, 452 
propriedade return Value, 452 
propriedades, 899 

propriedades propostas, especifica^ao DOM Level 
3, 903-904 




1040 fndice 


objeto EventSource, 502-508, 905 
constantes definindo valores da propriedade rea- 
dyState, 905 

simulando com XMLHttpRequest, 504-506 
usando em cliente de chat simples, 503 
objeto EventTarget, 906 
objeto FieldSet, 907 
objeto FileError, 908 
objeto FileList, 677-678 
objeto FileReader, 908-911 

constantes definindo valores de propriedade rea- 
dyState, 909 

eventos disparados no, 443 
eventos monitorando progresso de E/S assincrona, 
443 

lendo Blobs, 682-683 
metodos, 909 
propriedades, 909 

rotinas de tratamento de evento, 910 
objeto FileReaderSync, 683-684, 911 
objeto Form, 911-913 
metodos, 913 

metodos submit() e reset(), 390 
propriedade elements, 389 
propriedades, 912 

referido como this.form por rotinas de tratamento 
de evento de elemento de formulario, 391 
rotinas de tratamento de evento, 913 
objeto FormControl, 913 
metodos, 915 
propriedades, 914 

rotinas de tratamento de evento, 915 
objeto FormData, 493, 915 
objeto Form Validity, 916 
objeto Function, 759-766 
definindo suas proprias propriedades, 173 
metodo apply(), 760 
metodo bind(), 184, 202, 762-763 
metodo call/), 133, 763-764 
metodo toString(), 764-765 
metodos, 760 

propriedade arguments, 761 
propriedade caller, 763-764 
propriedade length, 764—765 
propriedade prototype, 764—765 
propriedades, 759 
objeto Geocoordinates, 917 
objeto Geolocation, 917 
objeto GeolocationError, 918 


objeto Geoposition, 919 
objeto global, 41, 765-768 
propriedades se referindo a objetos JavaScript pre- 
definidos, 766-767 
objeto HashChangeEvent, 919 
objeto History, 336, 920 
metodo pushState(), 657 

gerenciamento de historico com (exemplo), 
658-661 

metodo replaceState(), 658 
metodos back(), forward() e go(), 336 
objeto HTMFCollection, 357, 921 
elementos de formulario, 388 
visao geral do, 357 
objeto HTMFDocument, 353 

(consulte tambem objeto Document) 
metodo getElementsByName(), 355 
propriedades images, forms e links, 357 
objeto HTMLElement, 353 

{consulte tambem objeto Element) 
propriedade text, 306 

propriedades espelhando atributos HTML de ele¬ 
mentos, 365 

representando elementos HTML em documentos, 
342 

objeto HTMLOptionsCollection, 922 
objeto IDBRange, 690-691 
objeto IFrame, 923 
objeto ImageData, 647 
objeto Input, 926 
metodos, 929 
propriedades, 926 
objeto jQuery.easing, 542 
objeto jqXHR, 551 
objeto KeyboardEvents, 441 
objeto Label, 946 
objeto Location, 334, 948 
metodo reload/), 335 
metodos assign/) e replace/), 335 
propriedade hash, 657 
propriedade href, 334 

propriedades de decomposi^ao de URL, 334 
objeto Math, 773-785 
constantes, 773-774 
funcpao abs(), 775-776 
funcpao acos(), 775—776 
fun910 asin(), 776 
funcao atan(), 776 
fundio atan2(), 776 
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fumpao ceil(), 777 
fun<pao cos(), 778 
fun^ao exp(), 778 
fumjao floor(), 779 
furupao log(), 780 
furupao max(), 181-182 
fun^ao min(), 781 
furupao pow(), 782 
furupao random(), 782 
fun<pao round(), 782 
fun^ao sin(), 783-784 
furupao sqrt( ), 783-784 
fun^ao tan(), 784-785 

fun<poes e constantes definidas como propriedades, 
32 

fun<poes estaticas, 774-775 
metodo max(), 781 
objeto MediaElement, 949-954 
constantes definindo valores para networkState e 
readyState, 949 
metodos, 953 
propriedades, 950 

rotinas de tratamento de evento, 952 
objeto MediaError, 954 
objeto MessageChannel, 669, 954 
objeto MessageEvent, 955 
objeto MessagePort, 669, 956 
objeto Meter, 957 
objeto Navigator, 322, 337, 958 
propriedade cookieEnabled, 580 
propriedade geolocation, 653 
propriedade onLine, 594 
propriedades de sniffing de navegador, 337 
propriedades e metodos diversos, 339 
objeto Node, 959-963 
atributos de propriedade, 368 
constantes, valor de retorno de compareDocu- 
mentPosition(), 960 

constantes, valores possrveis da propriedade node- 
Type, 960 

documentos como arvores de, 360-361 
metodo appendChildf), 373 
metodo cloneNodef), 372 
metodo insertBefore(), 373 
metodo removeChild(), 374 
metodo replaceChildf), 374 
metodos, 961 

propriedade textContent, 370 
propriedades, 960 


objeto NodeList, 355, 880, 963 
retornado por getElementsByTagNamef), 356 
visao geral do, 357 
objeto Number, 785-793 
constantes, 785-786 
MAXVALUE, 786-787 
metodo toExponentialf), 788-789 
metodo toFixed(), 789-790 
metodo toLocaleString(), 790-791 
metodo toPrecision(), 790-791 
metodo toString(), 47, 791—792 
metodo valueOff), 792-793 
metodos, 785-786 
MINVALUE, 787-788 
NaN, 787-788 

NEGATIVEJNFINITY, 787-788 
POSITIVE_INFINITY, 788-789 
valores somente para leitura para variaveis globais 
Infinity e NaN, 33 
objeto Option, 394, 964 
objeto Output, 965 
objeto PageTransitionEvent, 965 
objeto PopStateEvent, 966 
objeto Processlmagelnstruction, 966 
objeto Processinglnstruction, criando, 879 
objeto Progress, 966 
objeto ProgressEvent, 967 
objeto prototipo fn (jQuery), 569 
objeto Range, 398 
objeto RangeError, 812-813 
objeto ReferenceErrors, 55, 813-814 
objeto RegExp, 38, 245, 255, 813-820 
como objeto que pode ser chamado, 186 
metodo execQ, 256, 571, 815-816 
metodo test(), 257, 818-819 
metodo toString(), 818-819 
propriedade lastlndex, 817-818 
propriedade source, 817-818 
propriedades, 256 
propriedades de instancia, 814-815 
objeto Screen, 339, 968 
objeto Selection, 398 
objeto Storage, 971-972 
objeto StorageEvent, 972-973 
objeto Style, 973-974 
objeto SyntaxError, 836-837 

lan<jado no modo restrito ao se excluir proprieda¬ 
des, 122 

objeto Table, 974-975 
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objeto TableCell, 975 
objeto TableRow, 975 
objeto TableSection, 976 
objeto TextArea, 978 
objeto TextMetrics, 637, 861, 979 
objeto TextRange (IE), 398 
objeto TimeRanges, 605, 979 
objeto TypedArray, 980 
objeto TypeError, 41, 837-838 
erros de acesso a propriedade, 120 
lanqado em conversoes de dpo, 46 
lanqado por tentativas de criar ou modificar pro- 
priedades, 130 

resultante de tentativas de excluir propriedades, 
121 

objeto Uint8Arrays, 673 
objeto URIError, 839-840 
objeto Video, 982 
objeto WebSocket, 983 
objeto Window, 41, 985-992 
configurando a propriedade onload com funqao 
de tratamento de evento, 445 
construtoras, 988 
evento load, 453 
evento storage, 443 
eventos beforeprint e afterprint, 443 
eventos off-line e online, 443 
metodo closef), 347 
metodo getComputedStyle(), 425 
metodo getSelection(), 398 
metodo open(), 345 
URL javascript: como argumento, 307 
metodo postMessage(), 328, 662 

gadget de pesquisa do Twitter controlado por, 

663-665 

metodo scroll(), 384 
metodo setlnterval(), 333 
metodo setTimeout(), 333 
metodos, 988 

metodos alertf), confirm() e prompt(), 339 
metodos scrollTo() e scroll(), 384 
ponto de entrada em JavaScript do lado do clien- 
te, 299 

propriedade applicationCache, 590 
propriedade closed, 347 
propriedade dialogArguments, 340 
propriedade document, 300, 351 
propriedade event, 448 
propriedade frameElement, 348 


propriedade frames, 348 
propriedade length, 348 
propriedade location, 334 
propriedade name, 345 
propriedade navigator, 337 
propriedade onerror, 342, 438 

configurando como uma fun^ao, 313 
propriedade onhashchange, 657 
propriedade opener, 347 
propriedade orientation, 444 
propriedade parent, 347 
propriedade screen, 339, 968 
propriedade top, 347 
propriedade URL, 982 
propriedades, 985 

propriedades localStorage e sessionStorage, 575 
propriedades pageXOffset e pageYOffset, 381— 
382 

recursos disponiveis para objetos WorkerGlobalS- 
cope, 668 

rotina de tratamento de evento onbeforeunload, 
450 

rotina de tratamento de evento onload, 301 
rotinas de tratamento de evento, 991 
rotinas de tratamento de evento direcionadas ao 
navegador como um todo, 445 
objeto WindowProxy, 350 
objeto Worker, 666, 992 
objeto WorkerGlobalScope, 667, 993 
propriedades, 668 
objeto WorkerLocation, 995 
objeto WorkerNavigator, 996 
objeto XMLHttpRequest, 303, 996 
arquivos locais e, 482 

cancelando pedidos e configurando tempos-limi- 
te, 497 

codificando corpo de pedido, 489-494 
constantes definindo valores da propriedade rea- 
dyState, 997 

especificando o pedido, 482 

eventos progress E1TTP, 494-497 

fazendo pedidos sfncronos em Web Worker, 671 

instanciando, 481 

mdtodos, 999 

pedidos e respostas HTTP, 482 
pedidos HTTP de origens diferentes, 498-500 
postando (com POST) texto puro em um servi- 
dor, 484 
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postando mensagens de bate-papo do usuario no 
servidor, 503 

propriedade responseText, 487 
propriedades, 998 
recuperando a resposta, 485-489 
rotinas de tratamento de evento, 1001 
simulaqao pelo objeto jqXHR na jQuery 1.5, 551 
simulando EventSource com, 504-506 
uso por funqoes utilitarias Ajax na jQuery, 547 
Version 2 da especificaqao, 443 
objeto XMLHttpRequestUpload, 1002 
objetos, 5, 112-136 
arrays de, 137 
atributos de, 113, 132-135 
atributo class, 133 
atributo extensible, 134 
atributo prototype, 132 
atributos de propriedade, 128-131 
clones estruturados de, 657 
consultando e configurando propriedades, 117— 
121 

erros de acesso a propriedade, 120 
heranqae, 119 

objetos como arrays associativos, 117 
conversao para primitivos, 48-51 
conversao para strings, 657 
conversao para strings do Ajax, 545 
conversoes, 44 
criando, 113-116 

usando a funqao Object.create(), 115 
usando o operador new, 114 
usando objeto literals, 114 
usando prototipos, 115 
determinando a classe de, 204 

usando a propriedade constructor, 205 
usando nome de construtora como identifica- 
dor de classe, 205 
usando o operador instanceof, 204 
usando tipagem de pato, 207 
enumerando propriedades, 123-125 
excluindo propriedades, 121 
expressoes de acesso a propriedade, 59 
inicializadores, 57 

iterando por meio de propriedades com a funqao 
jQuery.each(), 558 

Java, consultando e configurando campos no Rhi¬ 
no, 283 
jQuery, 513 


metodos, 7, 158 
universal, 135 

metodos getter e setter de propriedade, 125-127 
objeto global, 41 
operador instanceof, 74 
propriedades, 112 

propriedades form-encoding para pedido HTTP, 
489 

que podem ser chamados, 186 
que podem ser iterados, 268-269 
referencias de objeto mutavel, 43 
semelhantes a um array, 154 
serializando, 135 
testando propriedades, 122 
wrapper, 42 
XML, 277 

objetos congelados, 798-799, 803-804 
objetos construtores, 199 
objetos de instancia, 199 
objetos definidos pelo usuario, 113 
objetos DirectoryEntry, 685-686 
objetos DOMMouseScroll, 459 
objetos FileEntry, 685-686 
objetos FileWriter, 685-686 
objetos host, 113 
objetos ImageData, 925 
copiando no canvas, 862 
criando, 858 

passando para worker via postMessage(), 669 
propriedade data, array de bytes, 673 
objetos imutaveis, 134, 798-799, 803-804 
objetos nativos, 113 
objetos proxy, 350 

objetos que podem ser chamados, 186 
objetos que podem ser iterados, 268-269 
objetos selados, 804-805 
objetos semelhantes a um array, 154-156, 344 
arrays tipados, 672 
jQuery, 514 
objeto Arguments, 167 
objeto DOMTokenList, 427 
objetos HTMLCollection, 357 
propriedade frames se referindo a, 348 
objetos URL, 982 

objetos Window autoreferentes, 347 
objetos wrapper, 42 
objetos XML, 277 
objetos XMLList, 277 
opqao contentType, 548 
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opqao e n ab I e H i gh Accu racy, metodos Geolocation, 
918 

opfao maximumAge, metodos Geolocation, 918 
opqao processData, 548 
opqao timeout, metodos Geolocation, 918 
Opera, 443 

(i consulte tambem navegadores Web) 
estrategia de composiyao global, 645 
versao atual, 319 
operaqoes de leitura, 909 

(i consulte tambem objeto FileReader) 
eventos disparados em XMLHttpRequest ou File- 
Reader, 443 

operador condicional (?:), 80-81 
operador de concatenate de string (+), 66, 73 
operador de desigualdade restrita (!==), 70 
operador de identidade (consulte operadores; opera¬ 
dor de igualdade restrita) 
operador de igualdade restrita (===), 70 
operador delete, 61, 82-83 
efeitos colaterais, 86 
excluindo elementos de array, 142 
excluindo propriedades, 121 
excluindo propriedades configuraveis do global 
objeto, 122 

removendo atributos e tags XML na E4X, 279 
operador descendente (..), 278 
operador in, 61, 73 

testando propriedades herdadas ou nao herdadas, 
122 

operador instanceof, 61, 74 

determinando a classe de um objeto, 204 
incapacidade de distinguir tipo de array, 154 
metodo isPrototypeOf() e, 132 
nao funcionando entre janelas, 350 
trabalhando com objetos e classes Java no Rhino, 
283 

usando com construtoras para testar a participa¬ 
te como membro de classe de objetos, 197 
operador new 

chamada de construtora com, 196 
criando objetos, 114 
operador typeof, 61, 80-81, 204 

aplicado em valores null e undefined, 40 
usando com objetos XML, 277 
operador virgula (,), 83—84 
operador void, 61, 83-84 

obrigando a expressoes de chamada ou de atribui- 
qao a serem indefinidas, 308 


operadores, 5, 56, 61-65 
aritmeticos, 65 
associatividade, 64 
atribuiqao, 76—77 
bit a bit, 68 
comparaqao, 72 
condicionais (?:), 80-81 
delete, 82-83 
E logico (&&), 74 
efeitos colaterais, 63, 86 
igualdade e desigualdade, 70 
in, 73 

instanceof, 74 

lista de operadores de JavaScript, 61 

lvalues, 63 

NAO logico (!), 76 

numero de operandos, 63 

operador + (adi<jao ou con cate nayao de string), 66 

operadores aritmeticos unarios, 67 

operando e tipo de resultado, 63 

ordem de avaliaaio, 65 

OU 16gico (||), 75 

precedencia, 64 

typeof, 80-81 

void, 83-84 

operadores aritmeticos, 32, 61 
operadores aritmeticos unarios, 67 
operadores bit a bit, 61, 68 
operadores de atribuRao, 61 
efeitos colaterais, 63 
operadores de compara^ao, 61, 72, 217 
operadores de desigualdade ( consulte ! (ponto de ex- 
clamaqao), sob Simbolos) 

operadores de igualdade (consulte = (sinal de igualda¬ 
de), sob Simbolos) 
operadores logicos, 61 

operadores relacionais, conversoes de objeto para 
primitivo com, 50 
ordem de avaliaqao, operadores, 65 
ordem de byte, endian, 675 
ordem de byte big-endian, 675, 874 
ordem de byte litde-endian, 675, 874 
ordem de chamada, rotinas de tratamento de evento, 
450 

ordem endian, 675 
origem de um documento, 326, 576 
overrideMimeType(), objeto XMLHttpRequest, 
488, 1000 
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padroes 

especificando para preenchimento ou tracpo no 
canvas, 633 

preenchimento ou tra<jo usando, 633, 850-851 
paginasWeb, 12 

script de conteudo, apresentaqao e comportamen- 
to, 9 

palavra-chave break, 94 
palavra-chave case, 93 
palavra-chave const, 262 
palavra-chave function, 58, 159 
criando uma variavel, 348-349 
palavra-chave let, 262 

atribui^ao de desestruturafao usada para iniciali- 
zar variaveis, 265 

usada como inicializador de la<jo, 263 
usando como declaraqao de variavel, 263 
palavra-chave new 

instanciando classes Java, 283 
precedendo expressoes de cria^ao de objeto, 60 
palavra-chave return, uso por fun^oes construtoras, 
165 

palavra-chave this 

como expressao principal, 57 
contexto de chamada de fun<jao, 158 
em chamada de metodo, 163 
em rotinas de tratamento de evento, 391 
fun^ao aninhada chamada como metodo ou fiin- 
qao, 164 

funfoes usadas como metodos, 163 
referindo-se ao destino de rotinas de tratamento 
de evento, 449 

referindo-se ao global objeto, 41, 767-768 
remo^ao ou restripio em subconjuntos seguros, 
260 

uso em metodos getter e setter de propriedade, 
127 

palavra-chave var, 51 
substituindo por let, 263 
palavra-chave yield, 270-271 
palavras reservadas, 24 
expressoes primarias, 57 
nomes de atributo HTML, 366 
propriedades CSS tem palavra reservada no nome, 
421 

usando como nomes de propriedade, 114 
consultando e acessando as propriedades, 117 


palavras-chave, diferenciafao de maiusculas e minus- 
culas, 21 

paradas de cor, 633 
parametros (fundio), 158, 166 
opcionais, 166 

pedidos e respostas (HTTP), 482 
cancelamento de pedidos e tempos-limite, 497 
codificando o corpo do pedido, 489-494 
componentes da resposta, 485 
decodificando a resposta, 487 
especificando o pedido, 482 
obtendo resposta onreadystatechange, 486 
ordem das partes do pedido, 484 
respostas sincronas, 486 
pedidos form-encoded HTTP, 489-494 
codificando um objeto, 489 
corpo codificado com JSON, 491 
corpo codificado com XML, 491 
fazendo pedido GET, 490 
fazendo pedido POST HTTP, 490 
pedidos multipartform=data, 493 
upload de arquivo com pedido POST, 492 
pedidos HTTP de origens diferentes, 483, 498-500 
solicitando detalhes do link com HEAD e CORS, 
499 

pedidos HTTP multipart/form-data, 493 
persisttocia da propriedade userData, 585-587 
pipeline de geradores, 272 
pixels 

compondo no canvas, 643-646, 852-853 
manipulafao no canvas, 647-648, 854 
testando se o evento de mouse e sobre pixel pinta¬ 
do no canvas, 649 

withdrawlmage() ampliado no canvas, 642 
plug-ins 

script em navegadores, implicafoes na seguranqa, 
328 

plug-ins Flash, scripts, 328 
poligonos, desenhando com metodos Canvas, 619 
politica da mesma origem, 326 
abrandando, 327 

impedindo troca de cookie entre sites, 581 
objetos Canvas, metodo toDataURL(), 643 
origem de um documento, 576 
sistemas de arquivo e, 684-685 
ponto, determinando o elemento no, 383 
ponto-final (.) ( consulte. (ponto), sob Slmbolos) 
pop ups, bloqueio pelos navegadores, 346 
por referencia, comparaqoes de objeto, 44 
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por valor 

compara^oes de primitivos, 43 
porta de visualizafao 
defini<jao, 380-381 

determinando o tamanho da, 381-382 
posifao correspondente, especificando para expres- 
soes regulares, 251 

posicionamento absoluto de elementos, 409 
posicionamento estatico de elementos, 409 
posicionamento fixo de elementos, 409 
posicionamento relativo de elementos, 409 
posicionando elementos 

exemplo de CSS, texto sombreado, 411 
geometria e rolamento de documento e elemento, 
380-386 

modelo de caixa CSS, 413 

obtendo e configurando geometria de elemento na 
jQuery, 520 

tratando de eventos mousewheel (exemplo), 
460-462 

usando CSS, 409-412 

posifoes da barra de rolagem de uma janela, 381— 
382 

posifoes de codigo (Unicode), 35, 469 
precedencia, operador, 64 
precisao para mimeros, 791-792 
preenchimento 

especificando para elementos com CSS, 412 
no modelo de caixa CSS, 413 
preenchimentos 
cortados, 638 

cores, degrades e padroes em Canvas, 631-634, 
851-852 

previousElementSibling, objeto Element, 363, 
888-889 

procedimentos, 161 
programa^ao orientada a objetos 

favorecendo a composi^ao em detrimento da he- 
ran<ja, 227 

linguagens fortemente tipadas, 193 
separando interface da implementa^ao, 228 
programas, JavaScript, 309 
projeto ExplorerCanvas, 616 
propaga^ao de eventos (consulte eventos, propaga^ao 
de eventos) 

propaga^ao de eventos, 451 
cancelando, 452 
defini<jao, 434 
interrompendo, 903-904 


propriedade_proto_, 133 

propriedade accept, objeto Input, 926 
propriedade acceptCharset, objeto Form, 912 
propriedade accuracy, Geocoordinates, 917 
propriedade action, objeto Form, 389, 912 
propriedade activeElement, Document, 876 
propriedade altitude, objeto Geocoordinates, 917 
propriedade altKey, 455, 472 
eventos de mouse, 439 
objeto Event, 899 

propriedade anchors, HTMLDocument, 357 
propriedade applicationCache, objeto Window, 590, 
986 

propriedade appName 
objeto Navigator, 338, 958 
objeto WorkerNavigator, 996 
propriedade app Version 
objeto Navigator, 338, 958 
objeto WorkerNavigator, 996 
propriedade arguments, objeto Function, 761 
propriedade async, objeto Script, 969 
propriedade attributes, objeto Element, 886-887 
propriedade audio, objeto Video, 982 
propriedade autocomplete 
objeto Form, 912 
objeto Input, 926 

propriedade autofocus, objeto FormControl, 914 
propriedade autoplay, objeto MediaElement, 604, 
950 

propriedade availHeight, objeto Screen, 968 
propriedade availWidth, objeto Screen, 968 
propriedade background-color, 410, 415 
propriedade baseURL, objeto Node, 960 
propriedade body 

objeto Document, 876 
objeto HTMLDocument, 357 
propriedade border, 405 
propriedade bottom, objeto ClientRect, 864 
propriedade box-sizing, 414 
propriedade bubbles, objeto Event, 899 
propriedade buffer, objeto ArrayBuffer, 845 
propriedade buffered, MediaElement, 605, 950 
propriedade bufferedAmount, WebSocket, 984 
propriedade button, objeto Event, 439, 455, 899 
propriedade buttons, objeto Event, 903-904 
propriedade byteLength, objeto ArrayBuffer, 845 
propriedade callee, objeto Arguments, 704 
propriedade caller, objeto Function, 763—764 
propriedade cancelable, objeto Event, 899 
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propriedade cancelBubble, objeto Event, 899 
propriedade canvas, 855 
propriedade caption, objeto Table, 974-975 
propriedade celllndex, objeto TableCell, 975 
propriedade cells, objeto TableRow, 976 
propriedade changedTouches, eventos de toque, 444 
propriedade char, objeto Event, 442, 903-904 
propriedade characterSet, Document, 876 
propriedade charCode, objeto Event, 899 
propriedade charset 
objeto Document, 876 
objeto Script, 969 
propriedade checked 

elementos de formulario, 389 
objeto Input, 926 

propriedade childNodes, objeto Node, 360-361, 960 
propriedade children, objeto Element, 361-362, 
365, 886-887 

propriedade classList, 427, 519 
aproximaqao da funcionalidade, exemplo de, 
427-429 

objeto Element, 886-887 
propriedade className, 300, 358, 366, 427-429 
objeto Element, 300, 886-887 
propriedade clip, 417 
propriedade closed, objetos Window, 347 
propriedade code 

objeto DOMException, 883-884 
objeto FileError, 908 
objeto GeolocationError, 918 
objeto MediaError, 954 

propriedade colorDepth ou pixelDepth, objeto Scre¬ 
en, 968 

propriedade colSpan, objeto TableCell, 975 
propriedade complete, objeto Image, 541, 925 
propriedade constructor, 132 

identificando a classe de um objeto, 205 
restri<joes em subconjuntos seguros, 260 
propriedade contentEditable, objeto Element, 399 
propriedade context, 931 
objetos jQuery, 515 
propriedade control, objeto Label, 946 
propriedade controls, objeto MediaElement, 950 
propriedade cookie, objeto Document, 395, 876 
propriedade coords, objeto Geoposition, 919 
propriedade cssRules, CSSStyleSheet, 430, 871 
propriedade cssText 
objeto CSSRule, 869 

objeto CSSStyleDeclaration, 422, 430, 870 


propriedade ctrlKey, 439, 455, 472 
objeto Event, 900 
propriedade currentStyle 

no Internet Explorer (IE), 426 
objeto Element, 887-888 
propriedade currentTarget, objeto Event, 529, 900 
propriedade data 
no Text, 977 

objeto CharacterData, 371 
objeto Comment, 865 
objeto Event, 441, 469, 530, 903-904 
objeto ImageData, 673, 926 
objeto MessageEvent, 662, 955 
objeto Processinglnstruction, 966 
propriedade dataset, objeto Element, 367, 887-888 
propriedade dataTransfer, objeto Event, 442, 463, 
900 

propriedade de documento, objeto Window, 300, 986 
propriedade de elementos 
objeto FieldSet, 907 
objeto Form, 389, 912 

propriedade de estilo CSS background, 407-408 
propriedade defaultChecked 
objeto Checkbox, 392 
objeto Input, 927 
propriedade defaultValue 
objeto Input, 927 
objeto Output, 965 
objeto TextArea, 978 

propriedade defaultView, objeto Document, 876 
propriedade defer, objeto Script, 969 
propriedade deltaMode, objeto Event, 904 
propriedade detail, objeto Event, 439, 459, 900 
propriedade dir, objeto Document, 877 
propriedade disabled 

objeto CSSStyleSheet, 871 
objeto FieldSet, 907 
objeto FormControl, 914 
objeto Link, 947 
objeto Option, 964 
objeto Style, 973-974 
propriedade display, 415 
propriedade doctype, objeto Document, 877 
propriedade domain, objeto Document, 395, 877 
propriedade duration, objeto MediaElement, 603, 
604, 951 

propriedade embeds 
objeto Document, 877 
objeto HTMLDocument, 357 
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propriedade encoding, objeto Form, 389 
propriedade enctype, objeto Form, 912 
propriedade ended, objeto MediaElement, 951 
propriedade error 

objeto FileReader, 909 
objeto MediaElement, 606, 951 
propriedade event, objeto Window, 448, 986 
propriedade eventPhase, objeto Event, 900 
constantes definindo valores da, 898 
propriedade expires, dados salvos com userData, 586 
propriedade filename, objeto ErrorEvent, 897 
propriedade files 

objeto DataTransfer, 466, 678-679, 882-883 
objeto Input, 927 

propriedade fillStyle, CanvasRenderingContext2D, 
621, 855 

propriedade filter (IE), 417 
propriedade font, 405, 852-853, 855 
texto no canvas, 636 
propriedade fontFamily, 426 
propriedade form, 390, 391 
objeto FormControl, 914 
objeto Label, 946 
objeto Meter, 957 
objeto Option, 964 
objeto Progress, 967 
propriedade formAction 
objeto Button, 848 
objeto Input, 927 
propriedade formEnctype 
objeto Button, 848 
objeto Input, 927 
propriedade formMethod 
objeto Button, 848 
objeto Input, 927 
propriedade formNoValidate 
objeto Button, 848 
objeto Input, 927 

propriedade forms, objeto Document, 357, 388, 

877 

propriedade formTarget 
objeto Button, 849 
objeto Input, 927 

propriedade frameElement, objeto Window, 348, 
986 

propriedade frames, objeto Window, 348, 986 
propriedade fromElement, objeto Event, 900 
propriedade geolocation, objeto Navigator, 339, 

653, 958 


propriedade global, objeto RegExp, 256, 816-817 
propriedade globalAlpha, 631, 632, 855 
propriedade globalCompositeOperation, 643, 
852-853, 855 

propriedade handler, objeto Event, 530 
propriedade hash 
objeto Link, 947 
objeto Location, 334, 657, 948 
objeto WorkerLocation, 995 
propriedade head, objeto Document, 357, 877 
propriedade heading, objeto Geocoordinates, 917 
propriedade height, 521 

(consulte tambem propriedades width e height) 
objeto ClientRect, 864 
objeto IFrame, 923 
propriedade high, objeto Meter, 957 
propriedade history, objeto Window, 336, 986 
propriedade host 
objeto Link, 947 
objeto Location, 334, 948 
objeto WorkerLocation, 995 
propriedade hostname 
objeto Link, 947 
objeto Location, 334, 948 
objeto WorkerLocation, 995 
propriedade href 
objeto CSSStyleSheet, 871 
objeto Link, 947 
objeto Location, 334, 948 
objeto WorkerLocation, 996 
propriedade htmlFor 
objeto Label, 946 
objeto Output, 965 

propriedade id, objeto Element, 887-888 
propriedade ignoreCase, objeto RegExp, 256, 
816-817 

propriedade images, objeto HTMLDocument, 357 
propriedade implementation, Document, 877 
propriedade indeterminate, objeto Input, 927 
propriedade index, objeto Option, 964 
propriedade Infinity, 768 
propriedade innerHTML, objeto Element, 369, 
376, 887-888 
API de fluxo da, 397 

usando para implementar outerHTML, 374 
uso na jQuery para obter conteudo de elemento, 
520 

propriedade innerText, objeto Element, 370 
propriedade isTrusted, objeto Event, 900 
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propriedade items, objeto DataTransfer, 466, 872 
propriedade javaException, objeto Error, 285 
propriedade jquery, 515 
propriedade key, 473 
objeto Event, 442, 904 
objeto StorageEvent, 972-973 
propriedade keyCode, 469, 472 
objeto Event, 901 
propriedade keyldentifier, 473 
propriedade label, objeto Option, 964 
propriedade labels 

objeto FormControl, 914 
objeto Meter, 957 
objeto Progress, 967 

propriedade lang, objeto Element, 887-888 
propriedade lastChild, objeto Node, 960 
propriedade lastlndex, objeto RegExp, 256, 817— 
818 

propriedade lastModified, objeto Document, 395, 
877 

propriedade latitude, objeto Geocoordinates, 917 
propriedade length 
arrays, 139 
arrays esparsos, 140 
manipulando, 140 
elemento Select, 970-971 
(undoes, 181 
no Comment, 865 
no Text, 977 

objeto Arguments, 167, 705 
objeto Array, 714 
objeto CSSStyleDeclaration, 870 
objeto DOMTokenList, 885-886 
objeto Form, 912 
objeto Function, 764-765 
objeto History, 920 
objeto HTMLCollection, 921 
objeto HTMLOptionsCollection, 922 
objeto NodeList, 964 
objeto Storage, 971-972 
objeto String, 37, 826-827 
objeto TimeRanges, 979 
objeto TypedArray, 981 
objeto Window, 348, 986 
objetos j Query, 514 
propriedade lineCap, 636 

propriedade lineCap, CanvasRenderingContext2D, 
635, 855 

propriedade lineno, objeto ErrorEvent, 897 


propriedade lineWidth, CanvasRenderingContex- 
t2D, 621, 634 

propriedade links, objeto Document, 357, 877 
propriedade list, objeto Input, 927 
propriedade loaded, ProgressEvent, 495, 968 
propriedade locale, objeto Event, 904 
propriedade localName, objeto Attr, 846 
propriedade localName, objeto Element, 888-889 
propriedade localStorage, objetos Window, 575, 986 
aplicativos Web off-line, 594 
armazenamentoAPI, 577 
dura<jao e escopo de armazenamento, 576 
eventos de armazenamento, 578 
propriedade location 
objeto Document, 334, 395, 877 
objeto Event, 904 
objeto Window, 299, 334, 986 
objeto WorkerGlobalScope, 668, 993 
propriedade longitude, objeto Geocoordinates, 917 
propriedade loop, objeto MediaElement, 604, 951 
propriedade low, objeto Meter, 957 
propriedade margin, 405, 421 
propriedade max 
objeto Input, 927 
objeto Meter, 957 
objeto Progress, 967 

propriedade maxLength, objeto Input, 927 
propriedade media 
objeto CSSStyleSheet, 871 
objeto Style, 973-974 
propriedade message 
objeto Error, 753, 755 
objeto ErrorEvent, 897 
objeto EvalError, 758 
objeto GeolocationError, 919 
objeto ReferenceError, 813-814 
objeto URIError, 840 
propriedade metaKey, 439, 455, 472 
objeto Event, 901 
najQuery, 529 

propriedade method, objeto Form, 912 
propriedade min 
objeto Input, 927 
objeto Meter, 957 
propriedade miterLimit, 636, 856 
propriedade multiline, objeto RegExp, 256, 814-815 
propriedade multiple 

elemento Select, 970-971 
objeto Input, 928 
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propriedade muted 

configurando para reprodufao de audio, 603 
objeto MediaElement, 951 
propriedade name 

elementos de formulario, 390 
objeto Attr, 846 

objeto DocumentType, 882-883 
objeto DOMException, 883-884 
objeto Error, 754, 755 
objeto EvalError, 758 
objeto File, 677-678, 908 
objeto Form, 912 
objeto FormControl, 914 
objeto IFrame, 923 
objeto ReferenceError, 813-814 
objeto URIError, 840 
objeto Window, 345, 987 
propriedade namespace URI, objeto Attr, 846 
propriedade navigator 
objeto Window, 337, 987 
objeto WorkerGlobalScope, 668, 993 
propriedade newURL, objeto HashChangeEvent, 
919 

propriedade newValue, objeto StorageEvent, 
972-973 

propriedade nextSibling, objeto Node, 360-361, 
960 

propriedade nodeName, objeto Node, 361-362, 
960 

propriedade nodeType, objeto Node, 360-361, 961 
propriedade node Value, objeto Node, 361—362, 
371, 961 

propriedade no Validate, objeto Form, 913 
propriedade offsetParent, objeto Element, 385, 
888-889 

propriedade oldURL, objeto HashChangeEvent, 
919 

propriedade oldValue, objeto StorageEvent, 972— 
973 

propriedade onerror 

objeto Window, 342, 438 

configurando com uma funqao, 313 
objeto WorkerGlobalScope, 668 
propriedade onhashchange, objeto Window, 657 
propriedade onLine 

objeto Navigator, 339, 958 
objeto WorkerNavigator, 996 
propriedade onmessage, WorkerGlobalScope, 667 


propriedade onreadystatechange, objeto XMLHtt- 
pRequest, 486, 997, 1001 
propriedade onstorage, objetos Window, 578 
propriedade ontimeout, objeto XMLHttpRequest, 
497 

propriedade opacity, 417, 537 
animando, 538, 542 

animando alteraqoes de elementos que podem 
desaparecer gradualmente, 424 
propriedade opener, objeto Window, 347, 987 
propriedade optimum, objeto Meter, 957 
propriedade orientation, objeto Window, 444 
propriedade origin, objeto MessageEvent, 662, 955 
propriedade originalEvent, objeto Event, 530 
propriedade otions, elemento Select, 970-971 
propriedade outerHTML, objeto Element, 369, 
888-889 

implementando com innerHTML, 374 
propriedade overflow, 417, 439 
propriedade ownerDocument, objeto Node, 961 
propriedade ownerNode, objeto CSSStyleSheet, 871 
propriedade ownerRule, objeto CSSStyleSheet, 871 
propriedade padding, 405 
propriedade parent, 347 
objeto Window, 987 

propriedade parentNode, objeto Node, 360-361, 

961 

propriedade parentRule, objeto CSSRule, 869 
propriedade parentStyleSheet 
objeto CSSRule, 870 
objeto CSSStyleSheet, 871 
propriedade pathname 
objeto Link, 947 
objeto Location, 334, 949 
objeto WorkerLocation, 996 
propriedade pattern, objeto Input, 928 
propriedade patternMatch, objeto Form Validity, 916 
propriedade paused, objeto MediaElement, 951 
propriedade persisted, objeto PageTransitionEvent, 
966 

propriedade pixelDepth, objeto Screen, 968 
propriedade placeholder, objeto Input, 928 
propriedade platform 

objeto Navigator, 338, 958 
objeto WorkerNavigator, 996 
propriedade playbackRate, objeto MediaElement, 
604, 951 

propriedade played, objeto MediaElement, 605, 951 
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propriedade plugins 
objeto Document, 877 
objeto HTMLDocument, 357 
propriedade port 
objeto Link, 947 
objeto Location, 334, 949 
objeto WorkerLocation, 996 
propriedade ports, objeto MessageEvent, 955 
propriedade position, 409 
objeto Progress, 967 
propriedade poster, objeto Video, 982 
propriedade prefix 
objeto Attr, 846 
objeto Element, 888-889 

propriedade preload, objeto MediaElement, 604, 951 
propriedade previousSibling, objeto Node, 360- 
361,961 

propriedade protocol 
objeto Link, 947 
objeto Location, 334, 949 
objeto WebSocket, 698-699, 984 
objeto WorkerLocation, 996 
propriedade prototype 
funqoes, 181 

objeto Function, 764-765 
restri<joes em subconjuntos seguros, 260 
propriedade publicld, objeto DocumentType, 
882-883 

propriedade rangeOverflow, objeto FormValidity, 
916 

propriedade rangeUnderflow, objeto FormValidity, 
916 

propriedade readOnly, objeto Input, 928 
propriedade readyState 
objeto Document, 315, 453, 878 
objeto EventSource, 905 
objeto FileReader, 682-683, 909 
objeto MediaElement, 605, 949, 952 
objeto WebSocket, 983 
objeto XMLHttpRequest, 485, 997 
valores, 485 

propriedade referrer, objeto Document, 395, 878 
propriedade relatedTarget, objeto Event, 440, 529, 
901 

propriedade relLIst, objeto Link, 947 
propriedade repeat, objeto Event, 904 
propriedade required 
elemento Select, 970-971 
objeto Input, 928 


propriedade response, objeto XMLHttpRequest, 
998 

propriedade responseXML, XMLHttpRequest ob- 
jetos, 488 
propriedade result 
objeto Event, 528, 530 
objeto FileReader, 682-683, 909 
propriedade return Value 
objeto BeforeUnloadEvent, 847 
objeto Event, 452, 901 
objeto Window, 987 

propriedade right, objeto ClientRect, 864 
propriedade rotation, 444 
propriedade rowlndex, objeto TableRow, 976 
propriedade rows 
objeto Table, 974-975 
objeto TableSection, 976 
propriedade rowSpan, objeto TableCell, 975 
propriedade sandbox, objeto IFrame, 923 
propriedade scale, 444 
propriedade scoped, objeto Style, 973-974 
propriedade screen, objeto Window, 339, 987 
propriedade scripts, objeto Document, 357, 878 
propriedade seamless, objeto IFrame, 924 
propriedade search 
objeto Link, 947 
objeto Location, 334, 949 
objeto WorkerLocation, 996 
propriedade seekable, objeto MediaElement, 605, 
952 

propriedade seeking, objeto MediaElement, 952 
propriedade selected, objeto Option, 394, 965 
propriedade selectedlndex 

elemento Select, 394, 970-971 
objeto HTMLOptionsCollection, 922 
propriedade selectedOption, objeto Input, 928 
propriedade selectedOptions, elemento Select, 
971-972 

propriedade selectionEnd 
objeto Input, 928 
objeto TextArea, 978 
propriedade selectionStart 
objeto Input, 928 
objeto TextArea, 978 
propriedade selector, objetos jQuery, 515 
propriedade selectorText, objeto CSSRule, 870 
propriedade self 
objeto Window, 987 
objeto WorkerGlobalScope, 668, 993 
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propriedade sessionStorage, objetos Window, 575, 

API de armazenamento, 577 
cookies versus, 580 

duraqao e escopo de armazenamento, 576 
eventos de armazenamento, 578 
propriedade shadowBlur, 639, 856 
propriedade shadowColor, 639, 856 
propriedade sheet, objeto Link, 947 
propriedade sheet, objeto Style, 973-974 
propriedade shiftKey, objeto Event, 439, 455, 472, 
901 

propriedade size 
elemento Select, 970-971 
objeto Blob, 847 
objeto Input, 928 
propriedade source 

objeto MessageEvent, 662, 956 
objeto RegExp, 817-818 
propriedade speed, objeto Geocoordinates, 917 
propriedade src 
objeto IFrame, 924 
objeto Image, 925 
objeto MediaElement, 952 
objeto Script, 969 

propriedade srcdoc, objeto IFrame, 924 
propriedade srcElement, objeto Event, 901 
propriedade state 
objeto History, 658 
objeto PopStateEvent, 658, 966 
propriedade status 

objeto ApplicationCache, 592 
objeto XMLHttpRequest, 998 
propriedade step, objeto Input, 928 
propriedade stepMismatch, objeto FormValidity, 916 
propriedade storageArea, objeto StorageEvent, 
972-973 

propriedade strokeStyle, CanvasRenderingContex- 
t2D, 621, 856 
propriedade style, 300 
objeto CSSRule, 870 
objeto Element, 300, 420, 889-890 
propriedade styleSheets, objeto Document, 429, 
430, 878 

propriedade support, 560 
propriedade systemld, objeto DocumentType, 
882-883 

propriedade tagName 
objeto Element, 889-890 


propriedade target 
eventos, 434 
objeto Event, 902-903 
najQuery, 529 
objeto Form, 389, 913 
objeto Processinglnstruction, 966 
propriedade tBodies, objeto Table, 974-975 
propriedade text 
objeto HTMLElement, 306 
objeto Link, 947 
objeto Option, 394, 965 
objeto Script, 969 

propriedade textAlign, CanvasRenderingContex- 
t2D, 637, 856 

propriedade textBaseline, CanvasRenderingContex- 
t2D, 637, 857 

propriedade textContent, objeto Node, 370, 961 
propriedade textLength 
objeto TextArea, 979 
propriedade text-shadow, 411 
propriedade tFoot, objeto Table, 974—975 
propriedade tHead, objeto Table, 974-975 
propriedade timeout, objeto XMLHttpRequest, 
497, 999 

propriedade timeStamp, objeto Event, 529, 902-903 
propriedade timestamp, objeto Geoposition, 919 
propriedade tide 
objeto CSSStyleSheet, 429, 871 
objeto Document, 395, 878 
objeto Element, 889-890 
objeto Link, 947 
objeto Style, 973-974 

propriedade toElement, objeto Event, 902-903 
propriedade tooLong, objeto FormValidity, 916 
propriedade top 

objeto ClientRect, 864 
objeto Window, 347, 988 
propriedade total, ProgressEvent, 495, 968 
propriedade type 
elemento Select, 393 
elementos de formulario, 387, 390 
eventos, 434 
objeto Blob, 847 
objeto CSSRule, 870 
objeto CSSStyleSheet, 871 
objeto Event, 902-903 
objeto FormControl, 914 
objeto Script, 969 
objeto Style, 973-974 
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propriedade typeMismatch, objeto Form Validity, 
916 

propriedade types, objeto DataTransfer, 465, 
882-883 

propriedade upload, objeto XMLHttpRequest, 495, 
999 

propriedade URL 
objeto Document, 334, 395, 878 
objeto Window, 988 
propriedade url 

objeto EventSource, 905 
objeto StorageEvent, 973-974 
objeto WebSocket, 984 
propriedade userAgent 
objeto Navigator, 338, 958 
objeto WorkerNavigator, 996 
propriedade valid, objeto Form Validity, 916 
propriedade validity, objeto FormControl, 914 
propriedade value 

elementos de formulario, 390 

objeto DOMSettableTokenList, 884-885 

objeto FormControl, 915 

objeto Meter, 957 

objeto Option, 965 

objeto Progress, 967 

propriedade valueAsDate, objeto Input, 928 
propriedade valueAsNumber, objeto Input, 928 
propriedade valueMissing, objeto Form Validity, 916 
propriedade view, objeto Event, 902-903 
propriedade wasClean, CloseEvent, 865 
propriedade wheelDelta, objeto Event, 902-903 
propriedade which, objeto Event, 439, 530, 902- 
903 

propriedade wholeText, no Text, 977 
propriedade width 
objeto ClientRect, 865 
objeto IFrame, 924 
objeto TextMetrics, 979 
propriedade window, objeto Window, 300, 988 
propriedade z-index, 411 
propriedades 

atributos dataset convertidos em, 367 
atributos de, 113, 128-131 
classe, 193 

consultando e configurando, 117—121 
erros de acesso, 120 
objetos como arrays associativos, 117 
propriedades herdadas, 119 


convencpoes de atribuipio de nomes para proprie¬ 
dades CSS em JavaScript, 420 
convertendo nomes de atributo F1TML em, 366 
definidas, 112 
enumerando, 123-125 

especiais, restrRao em subconjuntos seguros, 260 
estilo calculado, 425 
excluindo, 121 

formulario e elemento de formulario, 389 
fumpao, 181 

funcpoes atribuidas a, 171 
globais, 765-766 
herdadas, verificando, 801-802 
HTMLElement, espelhando atributos de elemen¬ 
to HTML, 365 

iterando por, com laipos for/in, 98 
ordem de enumeraipao, 99 
metodo Object.defineProperties(), 796-797 
metodos getter e setter, 125-127 
nomes de propriedade versus indices de array, 139 
nomes e valores, 114 

objeto Function, definindo suas proprias, 173 
privadas, em classes estilo Java, 202 
propriedades CSS nao padronizadas, 405 
propriedades de atalho na CSS, 405 
propriedades de estilo CSS, 403 
propriedades de estilo CSS importantes, 407-408 
prototipo, hera^a de, 115 
rotina de tratamento de evento, 445 
convempao de atribuicpao de nomes, 313 
espelhando atributos HTML, 307 
testando, 122 

tornando nao enumeraveis, 232 
usando como argumentos de funcpao, 169 
variaveis como, 54 

propriedades bottom, top, right e left, 382 
propriedades callee e caller 
objeto Arguments, 168 
restricpao em subconjuntos seguros, 260 
propriedades child, objeto Element, 361—362 
propriedades client, elementos de documento, 385 
propriedades clientHeight e clientWidth, objeto Ele¬ 
ment, 382, 887-888 

propriedades clientLeft e chentTop, objeto Element, 
887-888 

propriedades clientX e clientY, objeto Event, 439, 
455, 900 

propriedades de accesso, 126, 799-800 
adicionando em objetos existentes, 128 
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API legada de, 131 

definindo usando sintaxe de objeto literal, 126 
descritor de propriedade, 128 
heramja e, 120 
usos de, 127 

propriedades de atalho em CSS, 405 
propriedades correspondentes no objeto CSSSty- 
leDeclaration, 421 
propriedades de dados, 126 
atributos de, 128 
propriedades de estilo, 403 
combinando com propriedades de atalho, 405 
importantes, 407-408 
unidades para configurafoes, 421 
propriedades de estilo bottom e right, 410, 414 
propriedades de estilo height e width, 410, 414 
propriedades de estilo left e top, 410, 414 
propriedades de estilo right e bottom, 410, 414 
propriedades de estilo top, left, width e height, 413 
propriedades de estilo top e left, 410, 414 
propriedades de estilo width e height, 410, 414 
propriedades deltaX, deltaY e deltaZ, objeto Event, 
441, 459, 904 

propriedades enumeraveis, 99 

arrays, enumerafao por la^o for/each, 267-268 
metodo Object.propertyIsEnumerable(), 806- 
807 

retornando nomes proprios de propriedade enu- 
meravel, 805-806 

propriedades firstChild e lastChild, objeto Node, 
360-361, 960 
propriedades herdadas, 113 
propriedades innerHeight e innerWidth, objeto 
Window, 986 

propriedades left, right, top e bottom, 382 
objeto ClientRect, 864 

propriedades naturalHeight e naturalWidth, objeto 
Image, 925 

propriedades offset, elementos do documento, 384 
propriedades offsetHeight e offsetWidth, objeto Ele¬ 
ment, 384, 888-889 

propriedades offsetLeft e offsetTop, objeto Element, 
384, 888-889 

propriedades offsetX e offsetY, objeto Event, 901 
propriedades outerHeight e outerWidth, objeto 
Window, 987 

propriedades pageX e pageY, objeto Event, 901 
na jQuery, 529 


propriedades pageXOffset e pageYOffset, objeto 
Window, 381-382, 987 

propriedades portl e port2, objeto MessageChannel, 
955 

propriedades privadas, 202 

simulando campos de instancia privada em Java¬ 
Script, 220 

propriedades proprias, 113 
propriedades right, left, top e bottom, 382 
propriedades screenX e screenY 
objeto Event, 901 
objeto Window, 987 

propriedades scroll, elementos do documento, 385 
propriedades scrollHeight e scrollWidth, objeto Ele¬ 
ment, 889-890 

propriedades scrollLeft e scrollTop, 381-382 
objeto Element, 889-890 
propriedades shadowOffsetX e shadowOffsetY, 639 
propriedades sibling, objeto Element, 361-362 
propriedades top, bottom, right e left, 382 
propriedades videoHeight e video Width, objeto 
Video, 983 

propriedades wheelDelta, 459 
propriedades wheelDeltaX e wheelDeltaY, objeto 
Event, 902-903 
propriedades width e height 

consultando elemento na jQuery, 521 
objeto Canvas, 849 
objeto Image, 925 
objeto ImageData, 926 
objeto Screen, 969 
objeto Video, 982 
objetos contexto de Canvas, 623 
protocolo ws:// ou wss://, 697-698 
prototipos, 115, 199, 374, 795-796 
adicionando metodos para aumentar classes her- 
dando de, 202 
Array.prototype, 137 
classes e, 194 

construtora, usada como prototipo de novo obje¬ 
to, 195 
definifao, 113 

em varias janelas interagentes, 350 
funifao construtora, 197 
heramja e, 112 

inicializaQo correta, segredo das subclasses, 223 
jQuery.fn, 569 

metodo Object.getPrototypeOf(), 801-802 
metodo Object. isPrototypeOf(), 803-804 
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propriedade constructor e, 198 
testando o encadeamento de prototipos de um 
objeto, 204 
tipagem de pato e, 207 
tornando nao extensi'vel, 236 
pseudoclasse :hover, 600 

pseudoelementos :first-line e :first-letter (CSS), 360 
putImageData(), CanvasRenderingContext2D, 

647, 862 

Q 

quadraticCurveTo(), CanvasRenderingContext2D, 
629, 862 

incapacidade de fechar, 347 
porta de visualizaf ao, 380-381 
varias janelas e quadros, 344-350 
relaqoes entre quadros, 347 
quebras de linha 

em codigo JavaScript, 22 
interpretadas como ponto e virgula, excefoes, 26 
tratamento como pontos e vi'rgulas em JavaScript, 
25 

queryCommandEnabled(), objeto Document, 400, 
881 

queryCommandIndeterminate(), objeto Document, 
881 

queryCommandState(), objeto Document, 400, 

881 

queryCommandSupported(), objeto Document, 
400, 881 

queryCommandValue(), objeto Document, 881 

R 

radianos, especificando para angulos na API Canvas, 
624 

receptores de evento, 312 

(consulte tambem rotinas de tratamento de evento) 
politica da mesma origem, 326 
rect(), CanvasRenderingContext2D, 631 
recursos restritos em navegadores, 325 
referencias, 44 

referencias a subexpressao anterior de expressao re¬ 
gular, 250 

registerContentHandler(), objeto Navigator, 959 
registerProtocolHandler(), objeto Navigator, 959 


registrando rotinas de tratamento de evento, 312, 
444-448 

anulando o registro rotinas de tratamento de even¬ 
to com j Query, 532 

configurando atributos de rotina de tratamento de 
evento, 445 

configurando propriedades de rotina de tratamen¬ 
to de evento, 445 
para eventos load e click, 11 
para eventos progress HTTP, 494 
registro de rotina de tratamento de evento avan fa- 
da com j Query, 530 

registro de rotina de tratamento de evento simples 
com j Query, 526 
usando addEventListener(), 446 
regra de contorno diferente de zero, 621 
regras, estilo, 403, 869 

consultando, inserindo e excluindo em folhas de 
estilo, 430 
regras de estilo, 403 

removeAttribute(), objeto Element, 367, 891-892 
removeAttributeNS(), objeto Element, 891-892 
repetifao em expressoes regulares, 248 
nao gananciosa, 249 
replaceWholeText(), no Text, 978 
responseText, objeto XMLHttpRequest, 488, 998 
analisando a resposta, 487 
responseType, objeto XMLHttpRequest, 998 
responseXML, objeto XMLHttpRequest, 487, 998 
respostas HTTP slncronas, 486 
restore(), CanvasRenderingContext2D, 622, 862 

desenhando no canvas, 631, 851-852 
metodo clearRect(), 858 
metodo fiURect(), 860 
objeto ClientRects, 864 
retornos de carro, 22 
retornos de chamada, 312 
funfao jQuery.ajax(), 553 
funfoes passadas para setTimeout() e setlnter- 
val(), 314 

passando para metodos de efeitos da jQuery, 538 
revokeObjectURL(), metodo, objeto URL, 982 
revokeObjectURL(), objeto URL, 682 

script de Java com, 281-288 

exemplo de GUI (interface grafica do usuario), 
285-288 

suporte para E4X, 276 
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suporte para extensoes de JavaScript, 258 
versoes de JavaScript, 262 
rigor 

rotinas de tratamento de evento definidas no 
modo nao restrito, 446 
rolando, 384 

eventos scroll em janelas, 439 
rotates, 627 

rotate( )> CanvasRenderingContext2D, 624, 862 
rotina de tratamento de evento onbeforeunload, 
janelas, 450 

rotina de tratamento de evento ondragstart, 464 
rotinas de tratamento de evento 

anulando o registro com jQuery, 532 
chamando, 448-453 

argumento de rotina de tratamento de evento, 
448 

cancelamento de evento, 452 
contexto de rotina de tratamento de evento, 
448 

escopo de rotina de tratamento de evento, 449 
ordem de chamada, 450 
propagaqao de eventos, 451 
valor de retorno de rotina de tratamento, 450 
controles de formulario, 915 
definifao, 10 

definindo, rotina de tratamento de evento onclick 
(exemplo), 10 

definindo para aplicativo Web off-line, 595 
definindo para FileReader, 682-683, 910 
elementos de entrada de texto, 393 
evento upload progress HTTP, 495 
eventos mousewheel, 460-462 
eventos progress HTTP, 494 
formulario e elemento de formulario, 390 
funqoes para, 312 
j Query, 528 
na HTML, 307 
objeto ApplicationCache, 844 
objeto EventSource, 905 
objeto Worker, 993 
objeto XMLHttpRequest, 1001 
eventos readystatechange, 486 
objetos Element, 892-893 
objetos Form, 913 

propriedade onerror, objeto Window, 342 
propriedades de objetos Window, Document e 
Element, 301, 991 

propriedades definidas por HTMLElements, 365 


registrando (consulte registrando rotinas de trata¬ 
mento de evento) 

registro de rotina de tratamento de evento avanfa- 
do com jQuery, 530 
WebSocket, 984 
WorkerGlobalScope, 995 
XMLHttpRequestUpload, 1002 
rotinas de tratamento de evento de captura, 446, 
451,531 

eventos de mouse no IE, 456 
rotinas de tratamento de evento onchange 
botoes de alternancia em formularios, 392 
campos de texto, 393 

rotinas de tratamento de evento onclick, 308 
elementos botao em formularios, 391 
rotinas de tratamento de evento onload, 310 

em script do lado do cliente revelando conteudo, 
301 

no programa de relogio digital, 303-304 
rotinas de tratamento de evento onmessage, 328 
rotinas de tratamento de evento onreset, elementos 
de formulario, 390 

rotinas de tratamento de evento onsubmit, elemen¬ 
tos de formulario, 390 

s 

evento textlnput, 441 

eventos de gesto e toque em iPhone e iPad, 444 
JavaScript em URLs, 308 
mouse, trackball bidimensional, 459 
versao atual, 319 

save(), CanvasRenderingContext2D, 622, 863 
Scalable Vector Graphics (consulte SVG) 
scale(), CanvasRenderingContext2D, 624, 863 

atributo type, especificando tipo MIME, 306 
em arquivos externos, 305 
funqao jQuery.getScript(), 547 
objeto Script, 969 

sfncronos, assincronos e adiados, 310 
scripts de execucao longa, 330 
scripts mal-intencionados, contidos com politica da 
mesma origem, 326 

sefao FALLBACK, manifesto de cache de aplicativo, 
589 

seqao NETWORK, manifesto de cache de aplicati¬ 
vo, 589 
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seguran?a, 325-330 

armazenamento do lado do cliente e, 575 

ataques de nega<jao de serviqo, 330 

cross-site scripting (XSS), 328 

dados de cookie e, 579 

metodo toDataURL(), objetos Canvas, 643 

o que JavaScript nao pode fazer, 325 

pedidos HTTP de origens diferentes, 498 

politica da mesma origem, 326 

script de plug-ins e controles ActiveX, 328 

scripts e, 500 

subconjuntos de, 260 

listagem dos subconjuntos importantes, 261 
recursos removidos, 260 

selecionando elementos do documento, 354-361 
colefao document.all[ ], 360-361 
por classe CSS, 358, 359 
por identificaqao, 354 
por nome, 355 
por tipo, 356 

selectionRowIndex, objeto TableRow, 976 
seletores 
CSS, 359, 403 
para regras de estilo, 430 
usando para chamar furnpao jQuery(), 512 
jQuery, 560-564, 930 
combina^oes de, 563 
filtros para, 561-563 
grupos, 564 

selecionando parte do documento para exibir com 
jQuery, 545 

separadores de paragrafo, 22 
sequencias de escape 
em strings literais, 36 
Unicode, 22 

serializando objetos, 135, 662 
exemplo, funfao JSON.stringifyf), 773-774 
Server-Sent Events, 502-508 
cliente de chat simples usando EventSource, 503 
servidor de chat personalizado, 506 
simulando EventSource com XMLHttpRequest, 
504-506 

setCustomValidity(), objeto FormControl, 915 
setData(), objeto DataTransfer, 463, 882-883 
setDraglmagej), objeto DataTransfer, 463, 882-883 
setRequestHeader(), objeto XMLHttpRequest, 

1000 

setRequestHeader(), XMLHttpRequest, 483 
setSelectionRange(), objeto Input, 929 


setSelectionRange(), objeto TextArea, 979 
setTransform(), CanvasRenderingContext2D, 624, 
627, 863 

shadowOffsetX e shadowOffsetY, CanvasRendering- 
Context2D, 856 

showModalDialog(), objeto Window, 340, 991 
sistema de arquivo persistente, 684-685 
sistema de arquivo temporario, 684—685 
sistemas de arquivo, 684-690 

armazenamento do lado do cliente por aplicativos 
Web, 574 

lendo arquivos selecionados pelo usuario com 
JavaScript, 325 

trabalhando com arquivos no sistema de arquivos 
local, 684-685 

usando API de sistema de arquivos assincrona, 
685-686 

usando API de sistema de arquivos sincrona, 689 
sistemas em caixa de areia, 260 
sistemas operacionais 

navegadores Web como, 302 
operaqoes de arrastar e soltar baseadas nos, 442 
sniffing de cliente, 322 
sniffing de navegador, 322, 337 
usando navigator.userAgent, 338 
sobrecarga de construtoras, 221 
sobreposiqao de janelas translucidas (exemplo de 
CSS), 418-420 

sombras, desenhando no canvas, 639, 852-853 
soquetes Web, 697-700 

criando cliente de chat baseado em WebSocket, 
698-699 

criando soquete e registrando rotinas de tratamen- 
to de evento, 697-698 
servidor de bate-papo usando WebSockets e 
Node, 699-700 
sparklines, 367 

desenhando no canvas (exemplo), 649-651 
Spidermonkey 

atribuiqao de desestruturaqao, 265 
suporte para E4X, 276 
suporte para extensoes de JavaScript, 258 
versoes de JavaScript, 262 
startOffsetTime, objeto MediaElement, 952 
statusText, objeto XMLHttpRequest, 999 
stopImmediatePropagation(), objeto Event, 453, 
903-904 

stopPropagation(), objeto Event, 452, 903-904 
streaming de mi'dia, propriedade initialTime, 604 
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strings, 28, 35 

analise de resposta HTTP, 487 
caracteres Unicode, posiqoes de codigo, e, 35 
codificando estado de aplicativo como, 657 
como arrays, 156 
comparacao de padroes, 38 
comparacoes, 43, 73 
conversao de objeto para, do Ajax, 545 
conversoes, 44, 46 
entre JavaScript e Java, 285 
objeto para string, 49 
convertendo arrays em, 148 
imutabilidade das, 30 

metodos para comparacao de padroes, 253-255 
metodo match(), 254 
metodo replace (), 254 
metodo search (), 253 
objeto String, 819-837 
metodo charAt(), 822-823 
metodo charCodeAt(), 822-823 
metodo concat(), 823-824 
metodo estatico, fromCharCode(), 820-821 
metodo fromCharCode(), 469, 823-824 
metodo indexOf(), 824-825 
metodo lastIndexOf(), 825-826 
metodo localeCompare (), 73 
metodo localeCompare(), 826-827 
metodo match(), 827-828 
metodo replace!), 828-829 
metodo search!), 829-830 
metodo slice!), 830-831 
metodo split!), 831-832 
metodo substr() (desaprovado), 833-834 
metodo substring!), 833-834 
metodo toLocaleLowerCase(), 834-835 
metodo toLocaleUpperCase(), 835-836 
metodo toLowerCase(), 73, 835-836 
metodo toSting!), 835-836 
metodo toUpperCase(), 73, 836-837 
metodo trim!), 836-837 
metodo valueOf(), 836-837 
metodos, listados, 819-820 
metodos HTML, 820-821 
propriedade length, 826-827 
objetos wrapper, 42 

propriedades acessadas com notaplo [ ], 118 
trabalhando com, 37 

valores em folha de estilo ou atributo de estilo, 
421 


strings literais, 35 

sequencias de escape em, 36 
strings vazias, 35 

stroke!), CanvasRenderingContext2D, 619, 634, 
863 

strokeRect!), CanvasRenderingContext2D, 631, 
863 

strokeText(), CanvasRenderingContext2D, 636, 
863 

subarray!), objeto TypedArray, 674, 982 
subcaminhos (Canvas), 618 
subclasses, 222 

composiqao versus subclasses, 227 
construtora e encadeamento de metodos, 225- 
227 

criando com recursos de ECMAScript 5, 237 
definindo, 223 

hierarquias de classes e classes abstratas, 228-232 
subconjunto de seguranca ADsafe, 261 
subconjunto seguro Caja, 261 
subconjunto seguro FBJS, 262 
subconjuntos de JavaScript, 258-262 
para seguranqa, 260 

listagem dos subconjuntos importantes, 261 
The Good Parts, 259 

subdominios, problemas apresentados pela politica 
da mesma origem, 327 
subinstrucoes, 87 

sumario, gerando para um documento (exemplo), 
377-381 

suporte para navegador graduado, 321 
SVG (Scalable Vector Graphics), 608-616 
elemento <canvas> versus, 616 
exibindo a hora manipulando imagem, 614 
grafico de pizza construido com JavaScript, 610- 
613 

swapCache(), objeto ApplicationCache, 593, 844 

T 

tags de abertura e fechamento de elementos, 369 
tamanho de elementos, configurando com CSS pro¬ 
priedades, 410 

teclado, usando em vez de um mouse, 324 
teclas modificadoras do teclado para eventos de 
mouse, 439, 455 

tecnicas orientadas a objeto em JavaScript, 209 
classe Set (exemplo), 209-211 
emprestando metodos, 218 



Indice 1059 


implementando metodos de compara<jao em clas¬ 
ses, 215-218 

metodos de conversao padrao, 213 
simulando campos de instancia privada, 220 
sobrecarga de construtora e metodos fabrica, 221 
tipos enumerados (exemplo), 211-213 
tecnologia auxiliar, 324 

animaqao interferindo com, 537 
terceira dimensao, propriedade z-index, 411 
teste de capacidade, 321 
teste de recurso para navegadores, 321 
texto, 35-39 

campos de texto em formularios, 392 
comparafao de padroes com expressoes regulares, 
38 

consultando texto selecionado em documentos, 
397 

conteudo de elemento como texto puro, 370 
conversao para fala em leitores de tela, 324 
desenhando no canvas, 636, 852-853, 860 
em elementos <script>, 371 
incorporando dados textuais arbitrarios usando 
elemento de script, 306 

lendo arquivos de texto com FileReader, 682-683 
metodos CharacterData para manipulafao, 372 
sequencias de escape em strings literals, 36 
strings literals, 35 
trabalhando com strings, 37 
texto selecionado, consultando em um documento, 
397 

texto sombreado, exemplo de posicionamento de 
CSS, 411 
threads 

em JavaScript do lado do cliente, 314 
especificaqao Web Workers, 665-672 
depurando threads Worker, 671 
modelo de execuqao de Worker, 668 
FileReaders e, 682-683 
objeto WorkerGlobalScope, 993 
operates de IndexedDB e, 691-692 
threads Worker, 992 
timers, 333-334 

fumpao utilitaria para (exemplo), 333 
fumpoes timer do lado do cliente implementadas 
por Node, 289 

metodos disponiveis para o objeto WorkerGlo¬ 
balScope, 668 

semelhanqa com eventos, 437 


usando em scripts em linha de animacao CSS, 
422-424 

tipagem de pato, 207 

tipo (nome de tag), selecionando elementos HTML 
ou XML pelo, 356 
tipo de evento, 433 
tipos (consulte tipos de dados) 
tipos de dados, 4, 28-55 
argumento de fun<;ao, 169 
booleanos, 39 
classes e, 204 

determinando a classe de um objeto com a pro¬ 
priedade constructor, 205 
determinando a classe de um objeto com ins- 
tanceof, 204 

metodos de conversao padrao, 213 
tipagem de pato, 207 

usando nome de construtora como identifica- 
dor de classe, 205 
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